生成LP デザイン品質QA — 2026-08-30

対象: output/real-e2e/index.html（17セクション）

判定

• D1: 同一原稿をトーンA/B/Cで出力し、配色・書体・面・情報密度・画像の扱いが別物になることを目視確認した。
• D2: statement / information / evidence / narrative の4密度へ分け、セクション余白と要素数を役割別に変更した。
• D3: 1200pxの共通12カラムと共通gutterへ統一した。画像とカードの意図しない負マージンを撤去した。
• D4: 本文・リードを最大40emに制限した。
• D5: 日本語見出しの負のletter-spacingを実描画から撤去した。ラベルのみ正のトラッキングを残した。
• D6: Before / Afterを低彩度面 → アクセント矢印 → 反転面で表現し、比較表・工程・時間軸も型固有の造形へ変更した。
• D7: 画像とカードを別カラムへ分離し、偶然の重なりを撤去した。画像生成指示にも配置先と余白条件を追加した。
• D8: セクション高さを内容依存に戻し、役割別の上下余白だけを使用した。
• D9: fitを上段GOOD / 下段NOT FITとして面・罫線・文字色で分けた。

証跡

• A/B/C比較: output/tone-comparison/comparison-1280.png
• トーンA 1280px: output/real-e2e/evidence/design-foundation-v2/full-1280.png
• トーンA 390px: output/real-e2e/evidence/design-foundation-v2/full-390.png
• セクション別: output/real-e2e/evidence/design-foundation-v2/sections/
• DOM/破綻QA: output/real-e2e/evidence/design-foundation-v2/metrics-chromium.json

目視結果

• Aは暖色の編集紙面・写真中心、Bは赤黒のタイポグラフィ・罫線中心、Cは黒地と黄緑の検証UI中心に見える。
• Problemの画像とカードは重ならず、同じグリッド内で隣接している。
• Before / Afterは文字を読む前に変化方向が分かる。
• Comparisonは本サービス列が面で強調される。
• Fitは向いている2件と向いていない2件を面で区別できる。

注: A/B/C比較ではデザイン層だけを比較するため、画像素材は同一に固定した。本番の新規画像生成では visual-strategy.js が選択トーンの名称・パレット・型を各画像ジョブへ渡す。

追補: 二層画像版 — 2026-08-31

• 全17セクションへ背景画像、13セクションへ文字込みコンテンツ画像を生成し、合計30画像を接続した。
• 最終プレビュー: output/real-e2e/layered-preview/index.html
• 最終証跡: output/real-e2e/layered-preview/evidence/layered-final2/
• 375 / 390 / 414 / 1280pxで横スクロール、破損画像、意図しないクリップは0。
• PC/SPのHero、用途、導入工程、メッセージ、最終フォームを再撮影後に目視した。
• 30画像すべてのコピー完全一致と人物破綻の全数監査は未完了。次回の第一優先とする。