背景イラストの上に字幕やタイトルを重ねると、絵がきれいなほど文字が埋もれやすくなります。そこで彩景に載せている保健室と職員室の画像を使い、文字を置く場所と明るさの関係を数字で測りました。この記事はその結果をもとに置き場所・色・帯の使い方をまとめたものです。
測ったものと、測り方
使ったのは保健室と職員室の画像で、昼・夕方・夜を1枚ずつ、合わせて6枚です。大きさは夜の保健室だけが1024×572pxで、残りの5枚は1376×768pxでした。
輪郭の多さは隣り合う画素との明るさの差が大きい画素の割合で表しました。画像は縦横を3つずつに分けた9区画で見ています。字幕エリアは画面の下から8〜20%の帯で、幅は中央の80%です。
読みやすさは文字と背景の明るさの比であるコントラスト比で見ました。値は1:1から21:1までで、ウェブの指針WCAGは通常の大きさの文字に4.5:1以上を求めています。この記事では字幕エリアの画素のうち4.5:1以上になった割合を「基準クリア」と呼びます。文字の色は白と濃いグレー(#111111)で試しました。
文字は輪郭の少ない区画に置く
図1は昼の画像の結果です。職員室は輪郭の多さが13.8%から36.8%まで開き、最少は左上の壁とホワイトボードの区画でした。最多は右中央の窓辺の区画で、植物や机の上の物が集まっています。
保健室は10.0%から19.7%で、差は職員室より小さめです。最少は右上の区画、最多は薬棚のある右中央の区画でした。
| 画像 | 最少の区画 | 最多の区画 | 下段中央 |
|---|---|---|---|
| 保健室(昼) | 10.0% | 19.7% | 16.8% |
| 保健室(夕方) | 8.9% | 18.0% | 14.7% |
| 保健室(夜) | 5.7% | 12.7% | 10.0% |
| 職員室(昼) | 13.8% | 36.8% | 27.6% |
| 職員室(夕方) | 11.3% | 34.1% | 24.2% |
| 職員室(夜) | 6.9% | 25.9% | 18.3% |
字幕を置く下段の中央を比べると、職員室の昼は27.6%、保健室の昼は16.8%でした。物の多い職員室は、保健室の約1.6倍の輪郭があります。
輪郭の多い場所に文字を重ねると、文字の線と背景の線が混ざって読みにくくなります。まず絵の中で線の少ない区画を探し、そこに字幕を置くのが基本です。保健室の昼なら、下段の左右の区画が11%台と少なく、候補になります。
明るさの合わせ方は、時間帯で逆になる
同じ保健室の3枚に、白い文字と濃い文字を重ねて測りました。白い文字のコントラスト比は、昼が3.7:1、夕方が5.75:1、夜が12.11:1です。濃い文字は逆に、昼が5.1:1、夕方が3.29:1、夜が1.56:1でした。
| 画像 | 白文字 平均 | 白文字 基準クリア | 濃い文字 平均 | 濃い文字 基準クリア |
|---|---|---|---|---|
| 保健室(昼) | 3.7:1 | 45.2% | 5.1:1 | 46.0% |
| 保健室(夕方) | 5.75:1 | 79.0% | 3.29:1 | 20.5% |
| 保健室(夜) | 12.11:1 | 99.7% | 1.56:1 | 0.2% |
| 職員室(昼) | 4.21:1 | 67.8% | 4.48:1 | 27.9% |
| 職員室(夕方) | 5.9:1 | 84.1% | 3.2:1 | 15.0% |
| 職員室(夜) | 8.93:1 | 90.8% | 2.12:1 | 8.6% |
夜の画像では白い文字の99.7%が基準に届き、濃い文字は0.2%にとどまります。夕方も白い文字が79.0%で、濃い文字の20.5%を大きく上回りました。夕焼けの画像でも、白い文字のほうが向いています。
平均の数字だけで決めるのは危険です。昼の保健室は濃い文字の平均が5.1:1あっても、基準クリアは46.0%にとどまりました。白い文字も45.2%で、どちらの色でも半分以上の画素が基準に届いていません。
縁取り・影・帯の4通りを比べる
職員室の昼は輪郭が多く、白い文字の基準クリアは67.8%でした。この条件で、図3のように字幕エリアを4つに分け、4通りを並べています。縁取りは文字のまわりに黒い線を付ける方法で、図では3pxです。影は文字の下に薄く黒を重ねる方法です。
縁取りと影は文字の形を保ったまま読みやすくできます。ただし今回は数値で測っていないので、図を見て判断してください。
帯は数値で効果が出ました。黒50%の帯で98.3%、黒60%の帯で100.0%になります。帯の濃さは背景の絵がうっすら見える程度に抑えると、雰囲気を残せます。
帯を置かずに、背景を少し暗くする
帯を置きたくないときは、背景全体を少し暗くする方法もあります。全体に黒を25%重ねると、職員室(昼)の基準クリアは67.8%から85.7%に上がりました。保健室(昼)も、45.2%から79.2%に上がっています。
| 画像(白文字) | 加工なし | 背景を25%暗く | 黒50%の帯 | 黒60%の帯 |
|---|---|---|---|---|
| 職員室(昼) | 67.8% | 85.7% | 98.3% | 100.0% |
| 保健室(昼) | 45.2% | 79.2% | 100.0% | 100.0% |
暗くしすぎると絵の明るさが失われるので、重ねる前と後を見比べてください。素材の加工や改変は、彩景の利用規約で自由とされています。
スマホの小さい画面でも確認する
パソコンで読めた字幕も、スマホでは小さくなります。たとえば幅1376pxの画像を幅360pxで見ると、大きさは約26%です。40pxの文字は約10.5pxまで縮みます。
1920×1080の動画を同じ幅で見るなら、大きさは約19%で、40pxの文字は7.5pxです。書き出す前に、プレビューを縮小して、文字が読めるかを確認してください。
夜の保健室だけは1024×572pxと小さいため、画面いっぱいに広げる使い方では、サイズと比率の合わせ方も見ておくと安心です。