サムネイルの文字：何語、どの大きさ、どこに置くか

語数が少ないほど効果的な理由

フィードをスクロールする視聴者が各サムネイルに割く時間は一瞬です。その間に人が把握できるのは顔1つ、形1つ、そして1〜2語で、文章ではありません。タイトルを繰り返す文字はスペースの無駄。数字、結果、意外性を足す文字は、クリックするもう1つの理由を与えます。

サイズの問題もあります。画面の幅は固定なので、語が1つ増えるたびにすべての文字が小さくなります。3語から7語に増やすと使える文字の高さはおよそ半分になり、サイドバーのサイズでは読めるか見えないかの差になります。

読めるサイズで何語入るか

文字の高さ100ピクセル以上、通常の字間なら、1280ピクセル幅のキャンバスで余白を取り右側を空けると、1行に約 10〜14 文字入ります。大きな文字2行が実用上の上限で、それ以上は画像自体の余地がなくなります。

6ステップで読みやすいサムネイル文字をデザイン

1. 01

   文字が何を足すか決める

   画像では見せられない事実や意外性を1つ書きます。なければ文字は入れません。

2. 02

   5語以下に削る

   冠詞、埋め草、タイトルにすでにあるものを削ります。

3. 03

   大きく太く

   1280×720 のキャンバスで、最も小さな重要な語を高さ 100 px 以上に。

4. 04

   分離を加える

   文字が 4.5:1 のコントラストチェックに合格するまで、縁取り、影、箱を使います。

5. 05

   左上に置く

   画面の右 22% と下 22% に入れないこと。

6. 06

   168 ピクセルで確認

   セーフゾーンチェッカーを 168px 幅で開き、拡大せずに語を読みます。

文字をどこに置くか

左から右へ書く言語の視聴者は左上から目を走らせる傾向があり、ウェブページの視線追跡研究でも、人は行頭とコンテンツの左側に注目することがわかっています。そのためサムネイルの左上と上部中央は文字に強い位置です。右下は最悪で、ほぼすべての画面で再生時間バッジが覆います。

1280×720 のキャンバスでは四辺に約 50 ピクセルの余白を取り、文字を画面の右 22% と下 22% に入れないこと。被写体の顔の上に文字を置かず、顔の横の落ち着いた背景に置きましょう。

サムネイルの数字、記号、絵文字

数字は短く具体的なので、サムネイルで最も効果的な語の1つです：「$0」「30 DAYS」「1 vs 100」。太いフォントの数字は幅が広くはっきりしていて、縮小にもよく耐えます。通貨記号や単位は数字と同じか少し小さくし、決して極小にしないこと。

矢印、疑問符、チェックマークなどの記号は語の代わりになりますが、1つ増えるたびに注意を奪い合う要素が増えます。使うのは1つまで。絵文字はエディタで画像として描画されるので他の図と同じく縮小されます。大きな絵文字1つならリアクションとして機能しますが、小さな絵文字をいくつも並べると 168×94 では色の点になります。

• 数を表す語より数字を使う
• 記号や矢印は1つまで
• 大きな絵文字1つ、小さな絵文字の列は不可

実例：9語から3語へ

あるテックレビュアーの初稿は、画面の下部いっぱいに「I USED THIS CHEAP LAPTOP FOR 30 DAYS」と、収まるよう 64 ピクセルで書いていました。168×94 では文字の高さは8ピクセルで、最後の2語は再生時間バッジの下にありました。

第2稿では主張をタイトルに移し、左上に「30 DAYS LATER」だけを暗い縁取り付きの 130 ピクセルで残しました。サイドバーのサイズで文字は17ピクセルになり、角は空き、監査の文字チェックは緑になりました。

サムネイル文字のよくある間違い