AI Landing Page Lab — Current Status

最終更新: 2026-08-31

この文書は、別セッションで作業を再開する際の最初の参照先です。過去のレビュー指示は fix-list-2026-08-30.md、設計原則は generation-quality-architecture.md、現在の実装・検証状況は本書を正本とします。

現在の到達点

• PENGINのBtoB LP制作工程を、資料理解、適応型ヒアリング、構成、WF、トンマナ3案、画像生成、HTML実装、ZIP納品まで接続済み。
• 17セクションの実案件相当データでE2E生成済み。
• 選択トーンA「現場編集室」を、#1F1A17 / #F4F1EA / #D94B2B、明朝主体、暖色の編集写真として全セクションへ接続済み。
• 全17セクションに背景レイヤー、画像化が適切な13セクションに文字・ビジュアル込みコンテンツレイヤーを生成済み。合計30画像。
• フォーム、入力、ボタン、FAQ、料金、比較表、法務表記、計測導線は編集・操作・SEOを守るためHTMLのまま保持する。
• h1は1つ、フォームと個人情報同意、OGP、canonical、JSON-LD、favicon、GA4差し込み口、相対画像を含むZIP出力を実装済み。
• npm test は31件PASS、npm run build はPASS。

二層画像方式

各セクションの画像識別子は sectionId:layer とする。

• background: 文字・ロゴ・UIを含めない背景素材。全17セクションで生成する。
• content: 日本語コピー、写真、図版、文字組みを統合した完成ビジュアル。フォーム、FAQ、比較、料金を除く13セクションで生成する。
• HTML操作要素を画像に描かない。フォーム、ボタン、入力欄、ナビゲーションは必ずHTMLで実装する。
• コンテンツ画像のコピーはHTMLにもアクセシブルな非表示テキストとして保持する。SPで画像内文字が小さくなるメッセージ章は、読みやすいHTMLコピーを画像下へ再表示する。
• 画像レコードの正本キーは visualId。同一sectionIdの背景とコンテンツを上書きしない。

主な実装:

• src/visual-strategy.js: セクション役割別の二層生成計画。現在の実E2Eは30ジョブ。
• api/design-images.js: 画像ジョブの受付・状態取得。visualId と layer を保持する。
• src/main.jsx: 7件単位で画像生成要求を送り、最大30件を追跡・統合する。
• src/export-html.js: 背景層とコンテンツ層を別DOMとして配置し、トーン、固有レイアウト、HTML操作要素を統合する。
• src/export-bundle.js: images/{sectionId}-{layer}.png で画像をZIPへ同梱する。

最新成果物

• ローカルプレビュー: output/real-e2e/layered-preview/index.html
• 全30画像: output/real-e2e/layers/
• オフライン納品ZIP: output/real-e2e/landing-page-layered-package.zip
• 最終PC証跡: output/real-e2e/layered-preview/evidence/layered-final2/full-1280.png
• 最終SP証跡: output/real-e2e/layered-preview/evidence/layered-final2/full-390.png
• 最終DOM計測: output/real-e2e/layered-preview/evidence/layered-final2/metrics-chromium.json
• トーンA/B/C比較: output/tone-comparison/comparison-1280.png

output/ は生成成果物であり、手修正しない。修正は必ず生成器側へ入れて再生成する。

QA結果

最終確認対象は layered-final2。

目視済み: PC/SPのHero、用途、導入工程、メッセージ、最終フォーム。Heroは文字込み画像とHTMLフォームを分離し、SPも縦積み。メッセージはPCでは画像主体、SPでは画像と可読HTMLコピーを併用する。

再生成・QAコマンド:

node scripts/build-layered-local-preview.mjs
$env:QA_OUTPUT='output\real-e2e\layered-preview'
node scripts/browser-qa-real-e2e.mjs layered-next
npm test
npm run build

画像生成の実行履歴と障害

• 共有画像生成Workerで最初の13ジョブは完了した。
• 残り17ジョブは、キュー解放後もPOSTがHTTP 502を返した。原因は未確定。Workerの受入上限、日次枠、上流Runtimeのいずれかを次回調査する。
• 今回はCodex内蔵画像生成へ切り替え、残り17画像を生成してローカルへ保存した。
• 再開用スクリプト: scripts/generate-layered-real-e2e.mjs。状態は output/real-e2e/layered-generation-state.json。この状態ファイルにはWorkerで完了した13件のみが入る。内蔵生成分は layers/ が正本。
• 502を直すまでは、状態ファイルだけを見て「30件完了」と判定しないこと。

未完了・次の着手順

1. 30画像すべてについて、日本語コピーの完全一致、不要文字、人物破綻、構図、章間の反復を1枚ずつ目視監査する。現時点では代表セクションのみ目視済み。
2. 共有画像生成WorkerのHTTP 502を再現し、レスポンスログ、日次上限、同時実行数、VPS Runtime状態を確認する。
3. 実アプリの通常生成フローで二層画像30件が保存・再読込・部分再生成・ZIP出力まで通るE2Eを追加する。今回の完成プレビューはローカル組立スクリプトによるもの。
4. docs/fix-list-2026-08-30.md のB群（ログイン、サーバー保存、後日課金）と、残存するUI/運用項目を現在コードで再監査する。
5. 本番公開前に、認証・レート制限の実環境試験、フォーム送信先、GA4、プライバシーURL、OGP絶対URLを確定する。

公開状態と承認境界

• 今回の二層画像版はローカル生成・QAまで。本番Vercelへは未Deploy。
• 本番Deploy、外部送信、SNS、決済開始、支出、契約は従来どおりApproval必須。
• 決済は実装のみ可能。課金開始は別承認。
• OpenAI APIキーは使わず、公開サービスは共有VPS LLM Runtimeとsubscription経路を使う。

再開時の読書順

1. ../AGENTS.md
2. README.md
3. docs/CURRENT_STATUS.md
4. docs/generation-quality-architecture.md
5. 必要なときだけ docs/fix-list-2026-08-30.md と各QA文書

最初に git status --short を確認し、既存変更を消さない。特に src/export-html.js、src/visual-strategy.js、src/main.jsx、api/design-images.js は今回の二層画像実装を含む。