kamitool > 読みもの > 配信画面の文字を読みやすくするには｜サイズ・コントラスト比・縁取り・スマホ表示

配信画面の文字を読みやすくするには｜サイズ・コントラスト比・縁取り・スマホ表示

kamitool 運営者

配信画面に出す文字は、読んでもらえて初めて役に立ちます。自分のモニターでは読めても、視聴者の画面では、小さくて読めない、背景に溶けて見えない、ということが起こります。ここでは、文字の大きさ、背景との明るさの差（コントラスト比）、縁取りと影、スマホで見られる前提について、数字を使って整理します。

文字が読まれない主な理由

配信の文字が読まれない理由は、大きく4つに分けられます。

どれも、自分で配信を見返すと気づけますが、見返さないまま配信を続けると、気づく機会がありません。文字を出すときは、「画面を小さくして見る」「少し離れて見る」の2つを、確認の基本動作にします。

スマホで見られる前提で、大きさを決める

配信は、パソコンの大きなモニターだけで見られているとは限りません。スマートフォンで見る人も多く、その場合、1920×1080の映像は、幅が数百ピクセルほどの小さな画面に縮小されます。仮に、スマホの縦持ちで、映像の幅が約390ピクセルになるとします（機種によって異なります）。縮小の倍率は、390÷1920で約0.2です。

この表は、倍率をかけた計算の結果で、読みやすさの感じ方は、書体や色、背景によって変わります。目安として、画面の幅の1920に対して、読ませたい文字は48以上、見出しなら64以上を出発点にしてください。スマホの縦持ちでの視聴が多い配信は、さらに一段階大きくすると、安心です。

このサイトのツールの、文字の大きさの設定範囲は、次のとおりです。初めの値は、スマホで読ませる前提では、小さめのものもあります。必要に応じて、大きさを上げてください。

告知ティッカーは、初めの36が、スマホの縮小では小さめになります。流れる文は、読み取る時間も限られるため、スマホ視聴が多いと感じるなら、48前後まで上げて、1つの文を短くする方向で調整するのが現実的です。大きさを上げると、1行に収まる文字数が減ります。1920の幅を、大きさで割ると、全角の文字数の見当がつきます（48なら約40文字）。

コントラスト比という考え方

コントラスト比は、文字の色と背景の色の、明るさの差を、数字で表したものです。1対1が差のない状態（同じ色）で、白と黒の組み合わせが、最大の21対1です。Webのアクセシビリティの国際的な指針（WCAG）では、ふつうの大きさの文字で4.5対1以上、大きな文字で3対1以上が、読みやすさの基準として示されています。配信画面は、Webページとは条件が違いますが、数字の目安として借りられます。

計算は、色を明るさに換算して行います。色のコード（#ffffffなど）を入れると比を出してくれる確認用のサイトやツールが、いくつもあります。ここでは、このサイトのツールの初めの色で、計算した例を示します。

表のとおり、暗い背景に白い文字は、高い比が得られます。反対に、明るい色どうし（白と水色など）は、見た目が似て、境目がぼやけます。「色が違う」ことと、「明るさが違う」ことは別の話です。色相が違っても、明るさが近ければ、比は低くなります。

ここで挙げた比の数字は、色のコードから計算した値です。実際の画面では、ゲーム映像が透けて背景になる場面があります。映像の明るさは刻々と変わるので、計算上の比だけでは足りません。次の節の、縁取りや帯の出番です。

縁取り・影・帯で、背景を選ばない文字にする

ゲーム映像の上に直接重ねる文字は、背景が刻々と変わります。暗い場面では白い文字が映え、明るい場面では読みにくくなります。この問題を和らげる方法が、3つあります。

1. 縁取り：文字の周りに、細い線を巡らせる。白い文字なら黒い縁、黒い文字なら白い縁にして、明暗どちらの背景でも、文字の輪郭が残るようにする
2. 影：文字の下に、ずらした暗い影を付ける。縁取りより控えめで、自然に見える。ただし、背景が複雑なときは、効きが弱くなることがある
3. 帯（背景の板）：文字の背面に、半透明の暗い板を敷く。どんな映像の上でも、一定の背景を保てる。映像の見える面積は、少し減る

3つのうち、最も確実なのは帯です。告知ティッカーは、この方法を使っていて、初めの文字色は白で、位置は画面の下です。文字の背面には、暗めの半透明の帯が敷かれ、その帯越しに、ゲーム映像の下端が淡く透けます。縁取りや影を、無料版で変えられるツールは限られます。変えられない場合は、ほかの要素（帯や、暗い背景）で、読みやすさを確保します。

縁取りは、太くしすぎると、文字が潰れます。文字の大きさが48なら、縁の太さは2〜4ほどに抑えると、文字の形が保たれます。これはあくまで見た目の目安で、書体によって違います。実際の画面で確かめてください。

文字の書き方で、読みやすさを上げる

見た目の調整のほかに、文の書き方でも、読みやすさは変わります。

• 1つの文を短くする。流れる文は、おおよそ1つあたり15〜25文字に収めると、読み切りやすい
• 一度に出す情報を絞る。画面に出ている文字の種類は、同時に3つまでを目安にする
• 漢字を詰め込みすぎない。読みやすい言葉に置き換えると、小さい画面でも読める
• 書体は太めを選ぶ。細い書体は、縮小すると線が消えやすい
• 行間を取る。2行以上の文は、行が詰まると読みにくい

告知ティッカーでは、流れる速さの数字が、書いた文をすべて流し終えるまでの秒数を表します。文を増やすと、同じ数字でも速く流れて見えます。読める速さは、文の長さと、画面の幅に左右されます。文を足したときは、速さの数字を上げ直して、読める速さを取り戻します。

確認の手順

1. 配信前に、OBSのプレビューを、通常の大きさのまま、目から1メートルほど離して見る
2. プレビューを縮小する。または、スマホで限定公開の配信を開いて、同じ画面を見る
3. 文字の色と背景の色を、コントラスト比を計算するツールに入れて、4.5対1を超えているかを確認する（背景が動く場合は、最も明るい場面と、最も暗い場面を選ぶ）
4. ゲームの明るい場面で、文字が読めるかを見る。読めなければ、縁取り、影、帯のいずれかを足す
5. 流れる文は、実際に流して、最後まで読めるか、1周の長さを数えて確認する

場面や環境ごとの工夫

書体（フォント）の選び方

書体は、文字の印象を決めますが、読みやすさにも直結します。配信画面に向く条件を、整理します。

このサイトの無料版のツールでは、書体の選択は、ツールによっては有料版で選べる機能です。無料版で変えられないときは、文字の大きさと色、背景で読みやすさを整えます。OBS自体の「テキスト」ソースを使う場合は、パソコンに入っている書体から選べます。その場合、書体の利用条件は、各書体の規約で確認してください（詳しくは、配信でのBGM・画像・フォントの利用に関する記事で触れています）。

場面ごとの文字の考え方

同じ文字でも、画面の種類によって、読ませ方は違います。

• 待機画面：視聴者は、始まるのを待ちながら画面を見ています。時間に余裕があるので、少し長い文でも読まれます。ただし、「もう少しお待ちください」のような一言で足りるため、短い2行に収めると、遠くからでも読めます。初めの設定は、大きい文字が96、背景は暗い紺で、白い文字との比が高く保たれています。
• カウントダウン：数字そのものが主役です。残りが1分以内になると、数字が脈打つような動きをするため、数字の周りには余白を残します。大きさは32〜220から選べ、初めは96です。
• 離席中画面：視聴者が一目で状況を知ることが目的です。文は2つに絞り、大きい文字を短く言い切ります。文字は、3.6秒の周期で、少し淡くなる動きを繰り返します。薄くなった瞬間でも読める色の差を、残しておきます。
• ゲーム中の補助表示：視線がゲームに向いているので、文字は短く、数字を中心にします。長い文は、読み切る前に場面が変わります。
• 流れる告知：視聴者は、流れる文を、追いながら読みます。同じ位置に止まる文より、読み取りに時間がかかります。1つの文を短く、速さをゆっくりに寄せます。

動く文字と、止まる文字の使い分け

動く文字は目を引きますが、読みやすさの面では、止まった文字に劣ります。動きが速いと、目が追いつかず、文の途中で読み取れなくなります。使い分けの目安は、次のとおりです。

大事な知らせを、流れる文だけに頼らず、声でも伝えておくと、画面を見ていない人にも届きます。音声と画面の両方で伝えると、見落としの心配が減ります。

見る環境の違いにも備える

視聴者の環境は、一人ひとり違います。屋外で明るい日差しの下にいる人、画面の明るさを下げて見ている人、画質が落ちた状態で見ている人もいます。回線が弱いと、配信先が映像を自動で低い画質に切り替えることがあり、そのとき、細い文字や、細かい縁取りは潰れやすくなります。

こうした環境でも読めるように、次の工夫が役に立ちます。

• コントラスト比に余裕を持たせる。ぎりぎりの4.5対1より、10対1前後のほうが、環境の影響を受けにくい
• 太めの書体を選ぶ
• 文字と文字の間に、少し余白を残す
• 文字の色は、2色までに絞る。色が多いと、低画質のときに、見分けがつかなくなる

よくある失敗

• 背景色だけ明るく変えて、文字の色を白のままにした。待機画面では、背景を白に近づけると読めなくなる
• 自分のモニターが大きく、小さな文字でも読めたため、そのまま配信した
• 飾りの書体を選び、縮小したら形が崩れた
• 文を増やしたのに、流れる速さの数字をそのままにして、速すぎて読めなくなった
• 色の好みで選び、コントラスト比を確認しなかった

まとめ

文字の読みやすさは、大きさ、コントラスト、背景の処理、文の短さの4つで決まります。スマホで見る人がいる前提で、読ませたい文字は48以上を目安にして、色の組み合わせは、4.5対1を超えるかを数字で確かめます。計算した比は目安ですが、見た目の好みだけで決めるより、はるかに失敗が減ります。決めた設定は、配信前に、小さくした画面で見直してください。

あわせて読みたい記事