LP生成品質アーキテクチャ

更新日: 2026-08-30

目的

社内制作の初稿として、構成・WF・トンマナ・KV・実装をレビュー可能な品質で一貫生成する。レイアウト数や装飾量ではなく、根拠のある内容、読み手の判断順、型付きデータ、検証可能な納品物を品質の正本とする。

制作パイプライン

1. 資料理解: 事実・仮説・未確認を分離し、資料から埋めた回答をユーザーが訂正できる状態にする。
2. 戦略: 流入意図、対象、課題、代替手段、CV、KPI、証拠を定義する。
3. 構成: 即決・比較検討・慎重検討の判断材料を並べ、キャッチコピー3案を選定する。
4. WF: セクションごとに役割、読者の疑問、主張、根拠、表示データ、必要素材、CTAを確定する。
5. トンマナ: Brand DNA、3軸比率、6軸セマンティック、Voice do/don'tを基に、ど真ん中・攻め・保守の3案を出す。
6. 画像設計: 3方向を内部では複数構図で探索し、選択トーン確定後は各セクションの文字なし背景層と文字込みコンテンツ層を同じ世界観で生成する。操作要素はHTMLに残す。
7. 実装: 型付き表示データを固有DOMへ変換し、画像を相対パスで同梱する。
8. QA: 内容、根拠、視覚、レスポンシブ、CV、オフライン納品を別々に検証する。

型付きセクションデータ

contentModel を表示内容の正本にする。body や content は編集画面の要約であり、カードや表の生成元にしない。

• 課題・特徴・用途・適合: items[{eyebrow,title,description,proof}]
• 仕組み・導入: steps[...] または beforeAfter{before,after}
• 実績: metrics[{value,label,source}] または caseStudy{issue,action,result,source}
• 比較: comparison{columns,rows[{label,cells}]}
• 価格: plans[{name,price,period,description,features,note,cta}]
• FAQ: faqs[{question,answer}]
• メッセージ: quote と quoteAttribution

資料にない数値・料金・社名・顧客の声は生成しない。必要データが欠けるセクションは、ダミー表示せず品質ゲートで止める。

トンマナ3案の差分条件

配色違いは禁止。各案で次をすべて変える。

• Brand DNAとDesign Principle比率
• 写真 / タイポ / UI・証拠の主役
• 情報密度、余白、グリッド、セクション遷移
• 日本語書体と欧文書体
• KVの被写体、構図、光、コピー余白
• Voice do/don't

画面で提示する3案は「ど真ん中」「攻め」「保守」。推奨理由と不採用理由を添える。

画像レイヤー運用

KVを含む各セクションは、同じトンマナで次の二層を生成できる。

• 背景レイヤー: 文字、ロゴ、UIを含めない。HTMLやコンテンツ画像の背後で光、紙、壁、机、素材、奥行きを作る。
• コンテンツレイヤー: セクションのコピー、写真、図版、文字組みを統合した完成ビジュアル。フォーム、FAQ、比較、料金は原則対象外。

CTA、フォーム、入力、FAQ、価格、比較、法務、計測はHTMLで保持する。画像内コピーのHTML正本も残し、アクセシビリティとSP可読性を担保する。生成画像は visualId = sectionId:layer で管理し、ZIPでは images/{sectionId}-{layer} として同梱する。

出力禁止

• 文章を句読点で分割してカード化すること
• 「項目1」「強みを記載」「要確認」「個別見積もり」等のプレースホルダー
• 根拠のない数字、顧客名、レビュー、比較優位
• 全セクションで同じDOMを使うこと
• 画像とセクション意図のラウンドロビン紐付け
• 画像生成済みに見せるフェイク進捗

完成ゲート

• 入力資料の主張と生成コピーの全数照合
• 全表示部品が型付きデータ由来
• キャッチコピー、構成、WF、トンマナの各承認点が独立
• WFコメントが対象セクションだけを更新し、非対象ハッシュが不変
• h1は1つ、フォームは実送信可能、個人情報導線あり
• 375 / 390 / 414 / 1280pxで横スクロールなし
• ZIP内画像がネットワーク遮断時にも表示
• QA証跡を保存後に再度開き、目視結果と報告が一致

PENGIN資産の扱い

社内資産は設計時とサーバー側品質判定にのみ使用する。エンドユーザー向けプロンプトへ全文を貼らず、クライアントバンドルにも含めない。具体案件の文章・社名・固有表現は生成物へ流用しない。