ウェビナーのサムネイルを作りました。 Claude Codeに指示して、出てきたデザインを見て、修正を出して、また直して。 12回やりました。
「もうちょっと目立たせて」 「なんか違う」 こういう曖昧なフィードバックを出しそうになるたびに、立ち止まって考えました。なぜ違うのか。何がどう変われば良くなるのか。 結果、気づいたことがあります。 サムネイルの良し悪しは、センスではなく科学で説明できる。 今日は、12回の修正の全記録を公開します。各修正に「なぜ変えたか」の科学的根拠を1つずつ添えます。最後に、私が今後すべてのサムネイルで使うチェックリストも置いておきます。
KAWAI LAB Vol.4のサムネイルです。 ビビッドオレンジの背景に、暗いネイビーの有機的な形が重なり、その中に人物が立っている。 これが最初からこうだったわけではありません。 初稿は全く別物でした。
最初の企画は「フォルダ構造」をテーマにしていました。 サムネのコピーも「インストールしたその次」。 問題: YouTube/セミナーのサムネイル調査で「フォルダ構造」テーマの人気コンテンツはゼロでした。インフラの話はコンテンツにならない。 変更: テーマを「実ワークフロー全公開」に変更。タイトルを「何に使えばいいの？」が消える40分」に。 根拠: ビフォーアフター型はセミナータイトルで最も効果が高い（TITLE_FRAMEWORK調査）。「消える」は変化を約束する動詞で、セミナーの「時間を投資する意思決定」にリターンを可視化する。
季節感を出したくて、淡いサクラピンク（#F5D0D0）の背景にしました。 問題: この時点ではまだ問題に気づいていません。後で致命傷になります。
テキストの背面に敷く帯が角丸になっていました。 変更: すべて直角の長方形に統一。 根拠: これは科学的根拠ではなく、私のブランド判断です。角丸が科学的に劣るというデータはありません（むしろ処理しやすいという研究もある）。ただし、直角はシャープさ・権威性を伝える。デザインの判断には「データで決めること」と「ブランドで決めること」の2種類があります。
「noteメンバーシップ限定」の帯とメインコピーの帯が同じオレンジでした。 問題: 同じ色の要素は「同じグループ」に見える。意味が違うのにグルーピングされてしまう。 根拠: ゲシュタルト心理学の「類同の法則」。色は最も強いグルーピング手がかりです（Treisman 1980）。意味が異なる要素に同じ色を使うと、偽のグルーピングが発生する。
メインコピー、サブコピー、ツール名、サブテキストの4行がバラバラに見えていました。 変更: 4行を1つの塊として密着させました。行間を見出しフォントサイズの0.3倍に。 根拠: ゲシュタルト「近接の法則」の2:1ルール。グループ内の間隔とグループ間の間隔に2倍以上の差がないと、脳は別グループとして認識しない（Kubovy & van den Berg 2008）。
すべてのテキストが似たようなサイズで、情報過多に見えていました。 変更: 3レイヤーに限定。巨大（メインコピー100%）、中（補足35-40%）、極小（日時・肩書15-18%）。レイヤー間は2倍以上の差。 根拠: Weber-Fechnerの法則。人間の知覚は対数的で、弁別閾（JND）を超えないと差として認知されない。フォントサイズの差が1.2倍程度では「中途半端に違う」としか見えず、最悪のパターンになる。
ここで根本的な転換がありました。サムネイルは0.3秒で見られる。 知性ではなく本能に訴えるべきだと気づきました。 変更: 淡いピンク背景を廃止。漆黒（#0D0D0D）に変更。メインコピーのオレンジ帯と人物の顔だけが暗闇に浮かぶ設計に。 根拠: 前注意処理は200msで完了する（Treisman 1985）。この段階で知覚されるのは最大コントラスト要素と顔だけ。淡いトーンは前注意処理で検出されない（Itti & Koch 2001の視覚顕著性モデル）。 ここが一番大きな学びでした。「きれい」と「目に入る」は違う。 淡いピンクはきれいだけど、フィードの中で目に入らない。
希少性バッジ（先着100名限定）を赤にしていました。オレンジの帯と赤のバッジ、2色のメインカラーが共存していました。 変更: 赤を廃止。オレンジの補色である鮮やかなグリーン（#00C896）に変更。バッジは直角帯ではなく正円に。 根拠: 2色のメインカラーは視覚的な選択肢を増やし、判断を遅くする（Hick’s法則）。アクセントカラーはメインの補色を選ぶと、互いの彩度を最大化する（Chevreul 1839の同時対比）。形も帯（直角）vs 丸（正円）で完全に異質にする（Von Restorff効果）。
配色のバランスが崩れていました。 変更: ベース70%（暗色＋白テキスト）、メイン25%（オレンジ）、アクセント5%（グリーン）に明確化。中途半端なグレーも廃止。 根拠: メイン1色が面積の過半を占め、アクセントは10%以下が基本。曖昧な中間色は処理流暢性を下げ、信頼・好感度が低下する。
漆黒の背景がフラットすぎて、こだわりが伝わらないと感じました。 変更: 3層構造に。Layer 1に暗いネイビー、Layer 2にネットワークグリッド線＋ターミナル風ゴーストテキスト、Layer 3に人物背後のオレンジグロー。 根拠: Berlyneの最適複雑性理論（1971）。美的好感度は逆U字カーブを描く。単純すぎても複雑すぎても下がる。微細なテクスチャは意識的に読めなくても「質感」として脳が拾い、知覚品質を上げる。
タイトルが下がりすぎていました。肩書きと名前が2箇所に重複配置されていました。 変更: タイトルブロックの重心を光学的中心（上端から35-45%）に配置。テキスト一覧をフラットリスト化し、各テキストに1回だけの配置場所をy座標%で指定。 根拠: 人間の目は数学的中央（50%）より上を「中央」と感じる。また、画像生成AIは曖昧な指示で要素を重複配置する。全要素の位置をシミュレーションしてから書くべきでした。
ここで参考デザインを見ました。 ビビッドな背景に有機的な形の重なりが奥行きを作るスタイル。 変更: v2として新規作成。漆黒背景→ビビッドオレンジに転換。暗いネイビーの有機的ブロブを人物の背後に重ね、白い幾何学装飾を散りばめる。メインコピー帯はネイビー直角帯＋白文字に反転。 根拠: バナーブラインドネス回避（Benway & Lane 1998）。テンプレ感のあるデザインは広告として無意識にスキップされる。有機的な形の重なりと大胆な配色は、フィードの中で「他と違う」印象を作る。テキストと背景の意味一致（Semantic Congruence）も確保——Claude Codeのテック感をブロブ内のターミナルテキストで表現。
私が今後すべてのサムネイルで使うチェックリストです。
12回は多いと思うかもしれません。 でも、この12回で「なぜこれが正解なのか」の語彙が増えました。 「もうちょっと目立たせて」は、実は「コントラスト比が4:1しかない」だった。 「なんか違う」は、実は「類同の法則で偽のグルーピングが起きていた」だった。 「バラバラに見える」は、実は「近接の2:1ルールを満たしていなかった」だった。 科学的な言語を持つと、修正指示が正確になる。正確な指示は、AIでも人間のデザイナーでも、1回で正しい方向に動く。 次にサムネイルを作るとき、12回はかからないはずです。