サムネイルがスマホで読めるかは、幅360pxで確かめる

先に結論

• サムネイルは1280×720でつくりますが、実際に見られるのは一覧の中の小さな絵です。判断はいつも幅360pxで行います。
• 大きく表示したまま良し悪しを決めると、ほぼ外します。 鮮明に見えるので、読めない文字も読めているように見えます。
• 読めるかどうかは感覚ではなく明るさの比で測れます。 目安は4.5:1、大きな文字なら3:1です。
• 調整しても読めるようにならない色があります。オレンジや黄緑がそれです。理由は下に書きました。

なぜ360pxで見るのか

編集画面で見る大きさ

一覧に並ぶ大きさ（360px）

サムネイルを確認するとき、たいていは編集画面の大きなプレビューを見ます。 ところが視聴者が見るのは、スマホの一覧に並んだ小さな絵です。 大きさが違えば、読めるかどうかも変わります。

これを2回間違えました。 大きく表示した状態で「読める」と判断した絵が、実際の一覧の大きさでは文字が潰れていました。 文字が小さすぎたのではなく、細い書体と背景の明るさが近すぎて、輪郭が消えていたのです。 （書体の太さをどう選ぶかは「サムネイルのフォントは太さで選ぶ」に書きました。）

それ以来、候補を選ぶ画面も、確認の画面も、幅360pxに固定しています。 大きく出す場所をつくると、画面ごとに物差しが変わってしまうからです。

「読める」を数字にする

文字と背景の明るさの比をコントラスト比といいます。 Webのアクセシビリティ基準（WCAG AA）では、通常の文字で4.5:1以上、大きな文字（24px以上、または太字18.66px以上）と記号は3:1以上が目安です。

サムネイルはWebページではありませんが、小さく表示されて一瞬しか見られないという点で条件はむしろ厳しく、 この目安はそのまま使えます。

サムネるでは、文字が乗る場所の明るさを実際に画素で測って、 後ろに敷く板の濃さを逆算しています。 AIが背景に余白を残せば板はほとんど透明になり、 背景が明るく散らかっていれば板が濃くなります。どちらに転んでも読めるようにするための仕組みです。

ここで一度つまずきました。 必要な濃さを明るさの計算だけで求めたところ、 4.50を狙ったのに実際は4.45に着地しました。 画面上で色が混ざるときの計算と、明るさの計算は別のものさしだからです。 いまは実際の画素を見ながら濃さを探す方式にしています。

背景の明るさごとに板を何割敷けば4.5:1に届くかは、「文字の下の板（座布団）はどれくらい濃くすればいいか」に表で書きました。

調整しても読めるようにならない色がある

これがいちばん役に立つ話かもしれません。明るさが真ん中あたりの色は、どんな背景に置いても4.5:1に届きません。

たとえば鮮やかなオレンジ（#FF5A00）は、明るさが0.286あります。 この色で4.5:1を確保しようとすると、 背景の明るさは1.46以上か、0.025以下である必要があります。 ところが明るさの上限は1.0なので、前者は存在しません。 後者はほとんど真っ黒です。

つまりこの色は、調整では読みやすくなりません。濃さを変える、影をつける、縁取りを足す——どれも根本的な解決になりません。色そのものを変えるしかないのです。

サムネるでも、最初に選んだ強調色のうち3つを使えませんでした。 水色も、くすんだ金色も、明るい赤も、すべて明るさが真ん中付近にありました。配色を決める前にコントラストを逆算する—— これを先にやらないと、あとから直せません。

いま使っている強調色

逆算して選び直した結果が下の5色です。白い背景に対する比を添えてあります。 4.5:1に届かないものは、後ろに濃い板を敷くことを前提に使っています。

5色のうち4色は、白い紙の上では1.3〜1.4しかありません。 これは失敗ではなく、濃い面の上に置く前提で選んだ色だからです。 逆に言えば、板を敷かなければ読めません。 白背景でも成立するのは、5色のうち1色だけでした。

今日からできること

• できあがったら、幅360pxに縮めて見る。ブラウザの幅を狭めるだけでも構いません。その大きさで読めなければ、読めません。
• 白い文字を、明るい背景の上に直接置かない。置くなら後ろに濃い面を敷きます。影や縁取りだけでは足りないことが多いです。
• オレンジ・黄緑・水色を、そのまま文字色に使わない。使いたければ、はっきり暗くするか明るくするか、どちらかに振ります。
• スマホの実機でも一度見る。縮小表示と実機では、明るさの見え方が変わります。

文字を何文字にするかは、また別の問題です。そちらは「YouTubeサムネイルの文字数は何文字がいいのか」に実測を書きました。