AI画像モデルは中心を好むので、その偏りと戦うのではなく、サムネイルはそれに合わせて設計しましょう
焦点の被写体は最大2つまで。それ以上は320x180のプレビューサイズではただのモヤになります
顔と目は上左の3分の1に収め、下の3分の1はテキスト、右下はエンドスクリーンUI用に確保します
320ピクセル幅での高コントラストこそが実テストです。エディタで100%表示した見え方ではありません
この6つのルールは、1024x576のトリミング、1280x720の書き出し、そしてYouTubeプレビューの鬼門をくぐり抜けました
私はAIサムネイルをかなりの数生成しています。ほとんどはMagnificでフル解像度なら見栄えがよいのに、YouTubeが幅320ピクセルのプレビューにトリミングした瞬間に崩壊します。そういうことを十分に経験したあと、エディタ向けのデザインをやめて、トリミング向けに設計するようになりました。この6つのルールが、そこで残ったものです。
Center-weight your composition (because the model already does)
画像生成モデルには、中心へのバイアスが最初から組み込まれています。写真、雑誌の表紙、映画ポスター、商品撮影などで学習されていて、ほとんどすべてが「重要なもの」をだいたい中央に配置しています。だから「ノートPCを持った女性」という指示を出しても、女性が左下に来ることはありません。女性がど真ん中に来て、こちらを見て、年賀状のように“写真枠”の中に収まります。
そのバイアスに逆らうのは高コストです。指示で中心から外れた被写体に誘導することはできますが、モデルは何度でも元に戻そうとします。構図は不自然に感じられます。解剖学的な描写は端のほうがぼやけます。中心から外れた“使える”フレームを1枚得るのに、10回生成を消費することになります。
もっと速いのは、寄り添うことです。中心寄りの被写体を軸にサムネイルを組み立て、周囲はそれを支える構造として使います。上はネガティブスペース、下はテキスト、左下はサポート要素。中心はきれいで目立つままになり、それが320ピクセルでも読み取られるからです。
私が使っているコツはこれです。60%の「中心安全領域」を持つ1024x576のフレームを想像します。重要なものはすべて、その領域の中に入れます。端は飾りです。もしサムネイルが、左右それぞれの外側20%を切り落としてもまだ機能するなら、そのサムネイルはYouTubeのトリミングでも生き残ります。
Maximum 2 focal subjects, no exceptions
私が最初に作ったサムネイルは、焦点の被写体が4つでした。顔、スマホ、ロゴ、グラフです。フル解像度では雑誌の見開きのように見えましたが、プレビューサイズではただのノイズに見えました。1秒以内に判読できず、YouTubeの視聴者はそれより短い時間で判読します。
上限は2つです。1つなら、見た瞬間に読めるようになります。2つなら、それらの間に関係性が作れます。たとえば、画面に反応する顔や、物を指さす手のように。3つはすでに忙しすぎます。4つは壁紙です。
このルールは、ほとんどの「特徴スタック（feature stack）」系サムネイルを潰します。1枚の画像で5つの商品の特徴を見せようとするやつです。そういうものは決してうまくいきません。目が320ピクセルのプレビュー内で5つのものを行き来する時間はありません。刺さる“1つの特徴”を選んで、そのサムネイルを出し、残りは動画の中に入れましょう。
もう1つ、2つに絞ることで強制されるのが階層（ヒエラルキー）です。2つしかなければ、そのうちの1つはヒーローになる必要があります。大きく、よりシャープで、より彩度が高く、カメラに近い方です。2つ目はそれを支えます。この階層が、視聴者がスクロールして離脱するまでの半秒で目を導くのです。
Text in the lower third (because every template overlays there anyway)
YouTube、LinkedIn、Substack、そしてほとんどのニュースレタープラットフォームは、どんなサムネイルプレビューに対しても、所要時間バッジ、再生ボタン、あるいはタイトルのオーバーレイを下の3分の1あたり、またはその付近に落とします。意図してテキストを下の3分の1に置くのは、プラットフォームと同じ方向に合わせて“逆らわない”ということです。
それは、人の読み方とも一致します。目は左上から始まり、被写体を横切るように視線を走らせてから、文脈を探すために下へ落ちていきます。下の3分の1にあるテキストは、まさに視聴者が読み始める準備ができたタイミングで届きます。上のテキストにすると、視聴者は後ろ向きに作業することになります。
私が守るテキストのルールは2つあります。1つ目は、最大4語まで。「レンダリング時間をどうやって削ったか」ならOKです。「並列バッチ処理を使って動画のレンダリングパイプラインを最適化した方法」みたいなのは、プレビューサイズでは読めません。2つ目は、フォントの太さです。Outfit Bold 以上にするか、それより太いもの。細いフォントは320ピクセルでは消えます。文字のストロークは、文字通りJPEG圧縮の中に消えてしまいます。
私は下端から96ピクセルの安全領域を確保しています。YouTubeの所要時間バッジは右下にあり、モバイルでは一部のオーバーレイがさらに別の30〜40ピクセル上まで食い込んできます。その安全領域の内側にあるものは、すべて削られます。
High contrast at 320x180, not at full resolution
これは、私の中で“すべてを変えた”ルールです。私は以前、1024x576で美しく見えるまでサムネイルをカラグレしていました。柔らかいトーン、穏やかなグラデーション、考え抜かれたパレット。ところがYouTubeのプレビューを見ると、全体がただのグレーのモヤになっていました。
今は、まず320x180で確認します。デザインを確定する前に、文字通りJPEGを書き出してプレビューサイズで見ます。被写体と背景がそのサイズで分離できないなら、それ以外の何も重要ではありません。構図は完璧でも、色は上品でも、タイポグラフィはエレガントでも、それでも“顔と黄色い背景”のサムネイルに負けます。
最速の修正は、被写体と背景の間でコントラストを強く押し上げることです。明るい背景に暗い被写体、または暗い背景に明るい被写体。 「暖かいグレーの被写体を、冷たいグレーの背景に置く」のような“暖色寄りグレー vs 寒色寄りグレー”ではありません。プレビューサイズでは、1つの形として読まれてしまいます。繊細にしたいなら、それを被写体の中で使いましょう。被写体と背景の関係性は、“うるさいくらい”はっきりさせる必要があります。
また、プレビューサイズで彩度も確認します。AI生成は、彩度が落ちた、写真っぽいパレットを出しがちです。そのパレットはフル解像度では洗練されて見えて、320ピクセルでは死にます。ヒーロー被写体の彩度を15〜25%上げるだけで、サムネイルがアニメっぽくならずに直ることが多いです。
Faces and eyes in the upper-left third
YouTubeサムネイルの視線追跡研究ではかなり一貫した傾向があります。視聴者はまず顔を見る、顔の中の目を見るのは次、そしてスキャンは左上から始めます。だから被写体が人物なら、目を上左の3分の1の中に入れましょう。顔は大きく中央寄せでも構いませんが、目は特にフレームの上左の四分円（上の左側のエリア）に着地するべきです。
これは小さな回転であって、完全な位置の付け替えではありません。私は通常、被写体が少し下向きかつ右を向くように、トリミングするか生成します。そうすると目が上左の3分の1に入り、体は中心を埋める形になります。そして視聴者の目は目に着地し、その視線の流れに沿ってテキストやサポート要素のある場所へ下へ移動し、下の3分の1のテキストが読めるタイミングで到達します。
副次的なメリットもあります。この回転によって、フレームの右下が空きます。そこにちょうどYouTubeは所要時間バッジを置きます。つまり同じ構図の動きで、2つの問題を一度に解けるのです。
もし被写体が人物でないなら、対応するものを探してください。商品サムネイルなら：ブランドラベル、またはヒーローの詳細を上左の3分の1に。チュートリアルサムネイルなら：いちばん「クリックしたくなる」要素をそこに。画像の目を引く“磁石”がある場所を、とにかく上左へ寄せましょう。
Negative space for end-screen UI and platform overlays
どのプラットフォームも、あなたのサムネイルを尋ねることなくトリミングし、オーバーレイし、飾り付けます。YouTubeは中央に再生ボタンを追加し、右下に所要時間バッジを置き、モバイルでは底面にタイトルのオーバーレイが載ることもあります。動画の最後の20秒あたりで表示されるエンド画面では、サムネイルが再利用され、購読ボタンや「次の動画」カードがその上に重ねて配置されます。
それを考えずにデザインすると、再生ボタンで顔が半分に切れたり、所要時間バッジでテキストが文字通り消されたりすることになります。
私が従うルールはこれです。少なくとも200×80ピクセル分、右下の角を空けておきます。これで、デュレーション（再生時間）バッジに余裕をもって対応できます。さらに、中央のど真ん中は、過度にごちゃごちゃさせないでください。ホバー時の再生ボタンがそこに表示されるからです。そして、エンド画面として再利用する可能性のあるサムネイルについては、左よりも右の3分の1を静か（落ち着いた状態）にしておきます。エンド画面の要素は右側に積み重なるためです。
かなりの「余白」だと思われるかもしれません。ですが、最初からそれを前提に構成すれば、そうでもありません。中央の被写体が中央と、左側の大部分を占めます。テキストは左下と下中あたりに入ります。右側は背景、あるいは補助的なディテールとして維持します。全体に“呼吸”が生まれ、それによってプレビューサイズでも見やすくなります。
結論
この6つのルールは、見た目の好みではありません。320ピクセルのプレビュー、1024×576のクロップ、そして出荷するすべてのサムネイルの上に重なるレイヤー構成のプラットフォームUIに対する、生存のためのルールです。いま私が生成しているサムネイルは、1つに決める前に、これらのルールをチェックリストとして通します。ほとんどの生成は、少なくとも1つのルールに失敗します。失敗したものは捨てます。
このデザインシステムがどこから来たものかを見てみたいなら、the RAXXO Labで、AIツールをデザインパイプラインの一部としてどう扱っているかについてもっと書いています。そして、私が使っているサムネイルテンプレートはRAXXO Studiosのワークフローの中にあります。短い版は上のルールのとおりです。長い版は、失敗したYouTubeプレビューが大量にある、という話です。
