ThumbProof
すべてのサムネイルに、画面の約 25〜45% を占める焦点を1つ置きます。焦点が顔なら、顔が画像の 10〜15% 以上を占めるようきつめにトリミングし、はっきりした表情を1つ見せ、目と口の周りのコントラストを保ちます。左か中央の3分の1に、右下から離して配置し、スクイントテストと細部ヒートマップで、それが最初に目に入るものか確認しましょう。
焦点が1つであることが重要な理由
フィードは競い合う画像のグリッドです。目は素早い注視でその間を飛び回り、はっきり目立つところでだけ止まります。支配的な形が1つあるサムネイルは目に着地点を与え、同等の要素が5つあるサムネイルはつかまる場所を与えないので、目は次へ移ります。
人がウェブページをどう走査するかの研究はこのパターンを示しています。人はすべての要素を読まず、手がかりを探して残りを飛ばします。168×94 ピクセルでは細部が消え、最も大きくコントラストの強い形だけが残るため、この効果はさらに強まります。
“ユーザーはウェブページを F 字型のパターンで読むことが多い”
F-Shaped Pattern of Reading on the Web — Nielsen Norman Group · 引用は英語原文からの翻訳
顔や被写体はどのくらいの大きさに
大きさが最も重要な要素です。画面の 3% の顔は、サイドバーのサイズでは数ピクセル幅になり、表情を読み取れません。ThumbProof は検出された顔が画面の 4% 未満なら警告し、最も情報の多い領域が 5〜60% なら健全な主役とみなします。
| 顔の面積（画面に対する割合） | 168×94 では | 表情は読める？ | 判定 |
|---|---|---|---|
| < 4% | 顔の幅 約12 px | いいえ | 小さすぎ |
| 4–10% | 幅 約20 px | ときどき | 境界線 |
| 10–25% | 幅 約30–45 px | はい | 良い |
| 25–45% | 幅 約45–60 px | はっきり | 強い |
| > 60% | カードいっぱい | はい、ただし文脈の余地なし | 注意して使う |
製品、料理、結果など顔以外の被写体には、同じ範囲を物のシルエットに当てはめます。
小さなサイズでも伝わる表情
微妙な表情は画像が縮小されると消えます。大きく開いた目、開いた口、上がった眉、はっきりした首の傾きは残りますが、かすかな笑みや考え込む表情は残りません。すべてのサムネイルに大げさな顔が必要というわけではありませんが、表情はサイドバーのサイズで読み取れ、動画のトーンに合っているべきです。
光は表情と同じくらい重要です。顔が背景より明るくなるよう撮影・編集し、目と口を形づくるはっきりした影を作りましょう。平坦な正面からの光では、小さくなると顔が何もない楕円に見えます。
- はっきりした目と口
- 顔は背景より明るく
- 表情は動画のトーンに合わせる
- 顔1つは3つより強い
配置：3分割、視線、角
焦点は画面の左か中央の3分の1に置きます。そうすれば右下の再生時間バッジから離れ、上部を2〜3語のために空けられます。人物が何か——物、文字、結果——の方を見ていると視聴者の目はその視線を追う傾向があるので、被写体を画面の外ではなく内側に向けましょう。
進行バーや角丸で切られる最下部に顔を置かないこと、目や口の上に文字を置かないことも大切です。
| 位置 | 向いている用途 | 注意点 |
|---|---|---|
| 左3分の1 | 顔＋右上に文字 | 文字をバッジの角に入れない |
| 中央 | 単一の物、左右対称 | 文字は上か下に |
| 右3分の1 | 文字から顔への読みの流れ | 顔がバッジとぶつかることも |
5ステップで焦点を作って確認
- 01
被写体を選ぶ
動画のストーリーを伝える顔、物、結果を1つ選びます。
- 02
きつめにトリミング
画面の 25〜45% を占めるまで拡大。顔なら最低 10〜15%。
- 03
光を当てて分離
被写体を背景より明るくし、輪郭やリムライトを加えます。
- 04
3分割線上に置く
左か中央、画面の内側を向け、右下を避けます。
- 05
確認
スクイントテストを行い、細部ヒートマップを開き、監査の内訳で被写体の行を読みます。
ThumbProof が顔と被写体を検出する方法
一部のブラウザは Shape Detection API を通じて内蔵の顔検出を提供しています。利用できる場合、ThumbProof はそれをローカルで使い、顔の数と画面に占める割合を測ります。利用できない場合は、エッジ密度から主役を推定します。画像を 16×9 のグリッドに分け、細部の多い最大の連結領域を見つけ、その画面に占める割合を報告します。
どちらの方法も完全にブラウザ内で動き、画像はどこにも送られません。推定は目安であって判定ではありません。ごちゃごちゃした背景はエッジ検出には大きな被写体に見えることがあるため、細部がどこにあるかを正確に示すヒートマップ表示が役立ちます。
顔がないとき
人がまったくいない強いサムネイルもたくさんあります：完成品、劇的なビフォーアフター、地図、印象的な数字が1つあるグラフ。ルールは同じ——被写体1つ、大きく、コントラストを——ですが、表情の代わりに構図、色、言葉で感情を作る必要があります。ビフォーアフターの分割は、168×94 のグレースケールでも違いが見えるときに最も効果的です。
焦点を失わずに補助要素を加える
焦点が1つとは、要素が1つという意味ではありません。強いサムネイルの多くは、支配的な被写体1つと補助要素1つ——語、物、矢印、または小さな2つ目の顔——を持っています。補助要素ははっきり小さく、主役の約3分の1〜半分にし、視線、位置、色で主役を指し示すべきです。
背景も重要です。ぼかしたり暗くした背景は被写体を前に押し出し、シャープで細部の多い背景は被写体と競い合います。自分で撮影するなら開放気味の絞りを使うか編集でぼかしを加え、背景の明るさを被写体より 20〜40% 下げましょう。
| 要素 | 相対的な大きさ | 役割 |
|---|---|---|
| 主役 | 100% | 目が最初に止まる場所 |
| 補助要素 | 30–50% | 文脈や意外性を足す |
| 背景 | 柔らかく暗め | 競わずに枠を作る |
シリーズ全体での一貫性
シリーズや定番の形式で公開するなら、構図を使い回しましょう：顔は同じ側、文字は同じ位置、同じアクセント色。リピーターはパターンを覚え、混雑したフィードであなたの動画をより速く見つけます。動画ごとに表情、物、言葉は変えても、骨格は保ちます。
同時に、同じ顔写真の使い回しは避けてください。すべてのサムネイルが同じ驚き顔だと、視聴者はそれを合図と見なさなくなります。収録のたびにいくつかの表情を撮り、各動画のストーリーに合うものを選びましょう。
- シリーズはレイアウトの骨格を統一
- 表情と物は変える
- 1本ごとに複数の候補を撮る
実例：集合写真とアップ
ある Vlog のサムネイルは、夕日を背に浜辺の4人の友人を小さく写していました。顔はそれぞれ画面の約 1%。ヒートマップでは細部が地平線全体に均等に広がり、被写体の推定は 68%、つまり焦点が1つもありませんでした。
再デザインでは笑っている友人1人のアップにし、顔が画面の 18%、左に配置、夕日は柔らかな背景にしました。被写体の推定は 31% に下がり、サイドバーのサイズでも顔が判別できます。
| 指標 | 集合写真 | アップ |
|---|---|---|
| 最大の顔 | 画面の約 1% | 画面の 18% |
| 被写体の推定 | 68%（分散） | 31%（明確） |
| スクイントテスト | はっきりした形なし | 顔が目立つ |
| 168×94 で判別 | いいえ | はい |
焦点のよくある間違い
顔が小さすぎる
引きの写真は原寸では素敵でも、フィードでは判別できません。
同等の被写体が複数
同じ大きさの顔3つは注意を分散させます。1つを支配的に。
顔の上の文字
最も判別しやすい要素を隠します。文字は横へ。
バッジの角にある顔
再生時間バッジがあごや目を覆うことがあります。
平坦な光
影がないと、小さなサイズで顔が何もない形になります。
内容と合わない表情
落ち着いたチュートリアルに驚き顔は、間違った期待を生みます。
動画サムネイルのサイズ、解像度、ファイル制限、セーフゾーン
高CTRサムネイルのチェックリスト：目に留まる7つの視覚原則
端末別のタイトル省略：文字数ではなくピクセル幅
サムネイルの色とコントラスト：ダークとライトのフィードで目立つために
サムネイルの文字：何語、どの大きさ、どこに置くか