kamitool > 読みもの > 配信オーバーレイの色選び｜色数・背景との相性・色覚の違いへの配慮

配信オーバーレイの色選び｜色数・背景との相性・色覚の違いへの配慮

kamitool 運営者

オーバーレイの色は、好みで選びたくなる部分です。ただ、配信の画面では、色には役割があります。目を引く、読ませる、状態を知らせる、雰囲気をそろえる。役割ごとに色を決めておくと、画面が散らからず、視聴者にも伝わりやすくなります。ここでは、色数の絞り方、背景との相性、色覚の違いへの配慮を整理し、このサイトのツールの色の設定にも触れます。

色には役割がある

配信画面で使う色は、役割で分けると、選びやすくなります。

役割を決めずに、そのときの気分で色を足すと、画面ごとに印象が変わり、統一感がなくなります。配信を続けるうえでも、「このチャンネルの色」という印象が残りません。最初に、役割ごとの色を決めて、メモに残しておきます。

色数を絞る

色は、増やすほど、まとまりが崩れます。目安は、次のとおりです。

• 基本の文字色：1色（白、または淡い色）
• 差し色：1〜2色
• 背景色：1色、またはその濃淡

全部で、3〜4色に収めると、まとまりが出ます。色を増やしたい場合は、新しい色を足すのではなく、既存の色の明るさや濃さを変えます。たとえば、青を基調にしたら、濃い青、青、淡い青の3段階で、画面を作れます。

色数が多いと、視聴者にも負担がかかります。画面の中で、目を引く色が5つも6つも出ていると、どれを見ればよいか分からなくなります。強調したいものが1つなら、差し色は1色で足ります。

背景との相性

オーバーレイの文字は、背景の上に乗ります。背景が決まった色（待機画面など）か、動く映像（ゲームなど）かで、考え方が変わります。

暗い背景に明るい文字を使うのは、明るさの差を大きく取りやすく、長時間見ても疲れにくいためです。反対に、明るい背景に暗い文字は、コントラストは取れますが、配信全体の画面が明るくなりすぎて、目に刺さることがあります。

色の組み合わせで、特に注意するのは次の3点です。

• 明るい色どうし（白と水色、黄色と白）は、明るさが近く、読みにくい
• 鮮やかな補色どうし（赤と緑、青とオレンジ）を、隣に置くと、境目がちらついて見える
• 背景に近い色の文字は、読めない。ゲーム映像に多い色（緑の草原、青い空、灰色の建物）と同じ色は、避ける

色覚の違いへの配慮

人の色の見え方は、一人ひとり同じとは限りません。日本では、男性の20人に1人ほど、女性の500人に1人ほどに、赤と緑の区別がつきにくい特性があるとされています（数字は一般に紹介されている目安です）。見え方の違いは、病気とは別の、色の感じ方の個人差として捉えられています。配信の視聴者にも、一定の割合で、見え方の異なる人がいます。

配慮のコツは、「色だけで伝えない」ことです。

1. 赤と緑の組み合わせを避ける。状態を、赤と緑の色だけで表すと、区別がつかない人がいる
2. 色に加えて、形や文字でも伝える。達成を示すときは、色を変えるだけでなく、「目標達成」のような文も出す
3. 明るさの差を使う。色相が似て見えても、明るい色と暗い色なら、区別がつく
4. 線の種類（実線、点線）や、記号（○、×）を足す

色を選ぶときの手がかりとして、見分けやすさに配慮して作られた配色のセットが、公開されています。たとえば、Okabe-Itoの8色のセットは、色覚の違いに配慮した配色として、広く紹介されています。次の表は、そのセットのうち、有彩色の7色です。

この配色は、あくまで参考の一例です。使うときは、背景色との明るさの差も確認してください。色覚シミュレーションができるアプリや、ブラウザの拡張機能もあり、画面のスクリーンショットを、見え方の異なる条件で確かめられます。

このサイトのツールの色の設定

kamitoolのツールの色は、設定パネルで変えられます。画面に出る色の初めの値と、変えられる部分を、ツールごとに整理します。

目標カウンターは、目標に届くと、バーなどの差し色が水色（#8ecae6）に切り替わり、「目標達成！ありがとう！」の文も出ます。色の変化と、文の変化が、両方起きるため、色の違いが分かりにくい人にも、達成が伝わる作りです。自分で数字の色を変える場合は、達成前の色が、水色に近いと、変化が見えにくくなります。達成前は橙系や黄色系、達成後は水色、という離れた色の組み合わせのままにしておくと、切り替わりが分かりやすくなります。

告知ティッカーでは、文字の色を白から変えるなら、半透明の暗い帯の上で読める、明るい色を選びます。暗い色（紺、濃い緑など）に変えると、帯と同化して読めなくなります。待機画面で背景色を明るくした場合は、文字の色も、背景と明るさの違う色へ変えてください。

色を変え終えたら、パネルにあるURLコピーのボタンで、色入りのURLを取り出し、OBS側のソースへ貼り直します。色は、そのURLの中に書き込まれるので、パネルでの設定が、そのまま配信画面に反映されます。

色を決める手順

1. 配信全体の雰囲気を、言葉で決める（落ち着いた、元気な、静かな、など）
2. 背景色を1つ決める。迷ったら、暗めの紺や、暗い緑
3. 基本の文字色を決める。白が無難
4. 差し色を1〜2色決める。背景との明るさの差を確かめる
5. 状態を示す色（達成、注意）を、差し色と区別して決める
6. 決めた色のコードを、メモに残す
7. どのツールにも、同じ色を使う
8. 色覚シミュレーションで、画面を確認する

雰囲気ごとの配色の考え方

配信の雰囲気を言葉にしたら、それに合う色の方向を、おおまかに決められます。次の表は、一般的な色の印象をもとにした、出発点の例です。色の印象は、人や文化によって違うため、絶対的な決まりではありません。

このサイトの待機画面は、濃い紺から少し紫がかった色へ、ゆっくり色が流れるグラデーションが初めの背景です。離席中画面も、とても暗い紺から暗い紫の背景で、文字は白、差し色は淡い紫です。どちらも、暗い背景に淡い色を載せる、落ち着いた方向の配色になっています。

色の組み合わせを確かめる手順

1. 文字の色と背景の色を、それぞれ色のコード（#から始まる6桁）で控える
2. コントラスト比を計算できる確認用のサイトやツールに、2つのコードを入れる
3. 結果が4.5対1以上か確かめる。大きな文字（見出しなど）は、3対1以上を目安にする
4. 背景が動く映像の場合は、最も明るい場面と、最も暗い場面の両方で、見え方を確かめる
5. 色覚シミュレーションのできるアプリや拡張機能で、画面のスクリーンショットを確認する
6. モニターを変えて、スマートフォンでも見る

確認用のツールによって、小数点以下の丸め方は違い、数値が少しずれることがあります。基準に近い値が出たときは、少し余裕を持たせた色に変えるのが安全です。

季節やイベントで色を変えるとき

季節のイベントや、記念の配信で、画面の色を変えたくなることがあります。そのときも、役割ごとの色の決め方は変えず、差し色だけを入れ替えるのが、まとまりを保つ方法です。たとえば、基本の文字色と背景色は、そのままにして、差し色だけを、イベントに合う色にします。配信が終わったら、元の差し色に戻せるよう、元のコードを控えておきます。

設定パネルでコピーしたURLを、色の違いごとに分けて保存しておくと、戻すのも簡単です。「通常用」「イベント用」の2つのURLを、メモに並べておけば、ソースのURL欄を貼り替えるだけで、切り替えられます。

配色のメモの書き方

色のコードは、頭の中では覚えきれません。ファイルやメモに、役割ごとに書いておくと、ツールを増やしたときにも、同じ色を使い回せます。書式の例です。

色コードは、例として、このサイトのツールの初めの値を入れたものです。自分で決めた色に書き換えてください。背景との比を、一度計算して書いておけば、色を変えるたびに、基準を割っていないかを、すぐ見比べられます。

透明な背景に重ねる色の考え方

ブラウザソースは、ページの背景を透明にしておくと、文字や数字だけが、ゲーム映像の上に重なります。この場合、文字の背後の色は、その瞬間の映像の色です。暗いステージでは白い文字が映え、雪原や空のような明るい場面では、白い文字が溶けます。透明に重ねるタイプのツール（目標カウンター、告知ティッカーなど）は、映像の色の変化に弱い面があります。

告知ティッカーの帯が、半透明の暗い色で作られているのは、この変化に備える意味があります。無料版の目標カウンターには、帯や縁取りの設定がないため、位置を変えるか、OBS側で、ソースの背後に、半透明の黒い四角形を敷くなど、別の方法で背景をそろえます。背景の板を敷く場合は、不透明度を下げすぎず、ゲームの映像を隠しすぎない程度に調整します。

よくある失敗

• ツールごとに別々の色にして、画面がまとまらない
• 鮮やかな色を、全部の要素に使い、目を引く対象が分からなくなった
• 達成と未達成を、赤と緑だけで表した
• ゲーム映像と同じ色の文字を選び、場面によって消えた
• モニターの色が偏っていて、他の画面で見ると違う色になった

最後の点は、見落とされがちです。モニターの設定や種類によって、色の見え方は変わります。可能なら、別の画面（スマートフォン、別のモニター）でも確認します。

迷ったときの無難な選び方

色選びに自信がないときは、次の組み合わせから始めると、大きく外しにくくなります。背景は、濃い紺（#131a2b）のような、暗くて彩度の低い色。文字は白。差し色は、橙系（#f4a261）か、水色（#7dd3fc）のどちらか1色。このサイトのツールの初めの値も、この方向で作られています。慣れてきたら、差し色だけを自分の好みに変えていくと、配信の個性が出ます。

色を変えたら、必ず一度、配信と同じ条件で画面を映し、文字が読めるかを確かめます。設定パネルの見た目だけでは、背景の映像が重なったときの読みやすさは、分かりません。

まとめ

オーバーレイの色は、役割で分けて、3〜4色に絞ると、まとまります。暗い背景に明るい文字を基本にして、ゲーム映像の上では、帯や縁取りで、映像に左右されない処理を足します。色覚の違いには、色だけで伝えない工夫で配慮できます。決めた色のコードを控えておけば、ツールが増えても、同じ雰囲気を保てます。

あわせて読みたい記事