skills/note-image/references/design-and-qa.md

# note画像のデザインとQA

## 1. 見出し画像の方向を決める

本文の一般的なテーマではなく、確定タイトルと記事metadataから次を一文ずつ取り出す。

- 読者が続きを読みたくなる、記事固有の発見、対比、変化、疑問、感情。
- それを最も具体的に見せる人物、物、場面、関係、順序。
- 画像だけで約束してよい範囲。本文より強くしない。

主役を強く見せる、一瞬を見せる、対比、変化、複数の中の一つ、編集的な組み合わせ、文字を主役にする、関係や仕組みを見せる等から、記事と相性のよい異なる三方向を内部比較する。固定templateへcopyだけを差し替えない。

次の順で一方向へ決める。

1. 記事固有性。
2. 読む理由が見えること。
3. 320×168pxでの一覧視認性。
4. 文字とvisualの一体感。
5. 本文を超えない品位ある訴求。
6. 一画像の生成と寸法調整での実現性。

briefには採用方向だけを残し、候補名や点数を保存しない。

## 2. 見出し画像

- 1280×670px。
- copyを使う場合は意味として一つに絞り、目安は8〜16文字。独立した補足文、badge、URL、ロゴ、透かしを足さない。
- copyを使う場合は、背景、主役、構図、タイポグラフィと同じ一回の画像生成で描く。生成後に文字だけを重ねる後載せ合成は行わない。
- copyは確定タイトルと同じ読む理由を短く表し、片側だけにすると意味が変わる対比や例外を落とさない。
- 文字なしの方が記事の中心を強く見せられる場合は`exact_copy=null`とし、生成画像へ文字を入れない。
- 文字を縮めて詰め込まず、copyの短縮、改行、主役との比率、構図で調整する。
- 写真、編集イラスト、手描き、抽象表現等は記事の温度と場面で選び、汎用的な青紫発光、意味のない粒子、人型ロボット、過剰な3Dアイコンへ逃げない。

## 3. 差し絵

- 1280×720px。
- 指定された一節の理解または情景把握を助ける一場面にする。
- 記事タイトルや見出し風copyを入れない。説明に不可欠な短いラベル以外は文字なしにする。
- 見出し画像の縮小版や流用にしない。
- 完成後に具体的な挿入位置、caption、80字以内のALTを作る。

## 4. 実寸QA

- 記事の中心と確定タイトルに一致する。
- 本文にない成果、断定、数字、煽りを約束しない。
- 人物、顔、手指、食べ物、道具、画面、建物等に目立つ破綻がない。
- copyが指定どおりで、誤字、文字化け、欠落、重複、余計な文字がない。
- copyがある場合、生成後の文字追加ではなく、visualと同時に生成された完成画像である。
- 主役とcopyが切れず、中央基準の切り抜き後も安全な余白がある。
- 同ジャンルの別記事へcopyだけ変えて流用しにくい。

## 5. 小表示QA

見出し画像から320×168pxの確認用画像を作り、画像として実際に表示する。

確認したpreviewのSHA-256をQAへ記録する。保存時は最終PNGから同じpreviewを再生成し、一致したものだけを完成assetへ結び付ける。

透過PNGはalpha事前乗算で縮小し、透明部分の隠れた色が輪郭へにじんでいないことも見る。宣言寸法より多い展開データや過大画像を安全上の理由で拒否した場合は、完成扱いにせず入力画像を作り直す。

- 拡大や凝視なしで主役と意味の核が分かる。
- copyがある場合は、文字があると分かるだけでなく、一目で読める。
- 主役からcopyへ視線が自然につながり、強い色や別要素が意味を奪わない。
- visualとcopyが別々の層ではなく、同じ記事固有の意味を作る。

小表示を作れない環境では`pass`と装わず、画像生成不能時と同様にbriefまでを成果として止める。

## 6. 修正

中心的な問題があれば、copy、文字の太さ・contrast、主役の大きさ、切り抜き安全域、構図のいずれか一要素だけを直して一度再生成する。二度目もblocking issueが残る場合は完成扱いにしない。記事と通過済みの別画像は巻き戻さない。