# note見出し画像のデザイン選択 見出し画像は、固定templateへ記事を当てはめるのではなく、記事ごとに最も強い読む理由を一つ選び、その理由が小さな一覧表示でも伝わるように設計する。利用者へデザイン方式を選ばせず、内部で比較して完成画像を一枚だけ返す。 ## 1. 記事固有のフックを決める 本文と確定タイトルから、次の三つを一文ずつ抜き出す。 - 読者が続きを読みたくなる中心の発見、対比、変化、疑問、感情 - それを最も具体的に見せられる人物、物、場面、関係、順序 - 見出し画像だけで約束してよい範囲。本文より強くしない 一般的なテーマ名ではなく、その記事だけにある差を使う。「カメラ」「焼肉」「仕事」のような大分類だけでは設計を始めない。 ## 2. 内部で異なる三方向を比較する 次のデザイン文法から、記事と相性のよい異なる三方向を内部で候補にする。これは固定layout集ではない。同じ文法でも、主役、余白、色、質感、文字の位置、写真とイラストの選択は記事ごとに変える。 | デザイン文法 | 向いている記事 | 構図の考え方 | | --- | --- | --- | | 主役を強く見せる | 人物、道具、料理、作品など一つの具体物が中心 | 主役を大胆に切り取り、視線と短いcopyを一つの流れにする | | 一瞬の場面を見せる | 体験談、随筆、現場の気づき | 行動や空気が伝わる決定的な一瞬を作り、説明写真ではなく物語の入口にする | | 対比を一画面で見せる | 「AだがB」、例外、迷い、葛藤 | 二つの状態や価値を視覚的に衝突させ、titleの片側だけに寄せない | | 変化を見せる | 前後、改善、失敗からの発見 | 時間や状態の移行が一目で読める関係を作り、単純な左右分割に固定しない | | 複数の中の一つを見せる | 選択、記録、比較、失敗作、収集 | 複数要素の反復と一つの焦点を使い、記事固有の選択理由を見せる | | 編集的に組み合わせる | 複数の断片、複雑な感情、文化的な題材 | 切り抜き、紙面感、重なり、異素材の対話で意味を作る。素材を並べただけにしない | | 文字を主役にする | 強い一言、問い、短い結論が中心 | copyの字形、大小、行間、配置自体をvisualにし、背景を飾りとして扱わない | | 関係や仕組みを見せる | 手順、因果、構造、数字、考え方 | 矢印、軌跡、図形、象徴物などで関係を見せ、業務資料のdiagramにはしない | 利用者から写真、手描き、色、雰囲気等の指定がある場合は、その指定を守れる文法だけを候補にする。 ## 3. 一方向へ決める 三方向を次の基準で内部比較し、総合的に最も強い一方向だけを採用する。点数や候補名は利用者へ表示しない。 1. 記事固有性: 同じジャンルの別記事へ、そのまま使い回せないか 2. 読む理由: 本文とタイトルの中心となる発見、対比、変化が見えるか 3. 一覧視認性: 完成画像を実際に約320×168pxで表示し、初見の読者が拡大や凝視をせずcopyの意味の核を一目で読めるか 4. 文字とvisualの一体感: 背景と文字が別々の層に見えず、互いに意味を補っているか 5. 品位と訴求: 目を引くが、本文にない煽りや安いclickbaitになっていないか 6. 実現性: 一回の画像生成と1280×670pxへの調整で破綻しにくいか 僅差なら、記事固有性と読む理由を優先する。視覚的な無難さだけで決めない。 ## 4. 生成指示へ圧縮する 画像生成へは候補一覧や採点基準を渡さない。採用した一方向だけを、次の項目へ圧縮する。 ```text 記事固有のフック: 一文 主役と場面: 何を、どの瞬間または関係で見せるか デザイン構造: 主役、copy、余白、視線の流れの関係 表現: 写真、編集イラスト、手描き、抽象表現等と、その記事に合う色・質感 文字: 正確な短いcopy一つ。必要なら同じcopy内で大小や改行により二段階まで強弱をつける 文字サイズ: 最終1280×670pxで、意味の核となる一語または一行は見た目の文字高64px相当以上。理解に必要な補助部分は48px相当以上 一覧表示: 実際に約320×168pxで表示しても、意味の核を拡大や凝視なしで一目で読める 禁止: 余計な文字、logo、透かし、本文より強い約束、無関係な煽り 目標寸法: 1280×670px ``` copyは意味として一つにする。二段階の強弱や改行は使えるが、独立した見出し、補足文、badgeを増やさない。文字はvisualへ後から貼った飾りではなく、主役との距離、重なり、向き、余白を含めて構図の一部にする。 `64px相当`と`48px相当`はfont設定値ではなく、最終画像上で見える全角文字のおおよその高さを指す。すべての文字を同じ大きさへ固定しない。意味の核となる一語または一行を最上位の文字要素にし、残りは必要に応じて補助へ下げる。収まらない時は文字を縮めず、copyを短くする、改行する、主役との比率や構図を変える。 葉書、看板、画面、紙片等の物体へcopyを組み込む場合も同じ基準を適用する。場面の雰囲気を残すためにcopyを小さくせず、その物体ごと主役として十分大きく見せるか、別の統合方法へ変える。文字高を満たしても、細すぎる字、弱いcontrast、複雑な背景で一目で読めなければ不合格とする。 ## 5. 完成画像を判定する 実寸、誤字、破綻に加え、次を確認する。 - 記事の中心を知らない人にも、何が気になる画像なのか一つに絞れている。 - 同じ画像とlayoutを、同ジャンルの別記事へcopyだけ変えて流用しにくい。 - 最終1280×670pxで、意味の核が見た目の文字高64px相当以上、理解に必要な補助部分が48px相当以上ある。 - 完成画像を実際に約320×168pxで表示し、意味の核を拡大や凝視なしで一目で読める。「文字があると分かる」「時間をかければ判読できる」「元画像では読める」だけでは通さない。 - 小表示で、最初に見る場所からcopyへ視線が自然につながり、最後に残る印象まで順序がある。強い色や別の主役がcopyから視線を奪い続けない。 - visualとcopyの組み合わせに、記事固有の理由がある。 - AI画像でよくある雰囲気だけの光、粒子、過剰な艶、無意味な象徴へ逃げていない。 - titleと整合し、本文より強い結果や断定を約束していない。 文字高、320×168pxでの一目の可読性、または視線順のいずれかが欠けた画像はblocking failureとする。一つでも中心的な問題があれば、copyの短縮、文字の大小・太さ・contrast、copyを載せる物体の大きさ、構図のうち直す要素を一つに絞って一度だけ再生成する。利用者へデザイン選択を尋ねず、比較sheetや候補画像を見せず、通過した完成画像一枚だけを返す。