← LP再現プロジェクトに戻る
Pattern 4 · GPT Image 2 / 生成系

GPT Image 2 でセクション別生成

OpenAI の GPT Image 2（gpt-image-1）で、各セクションを個別に画像生成し、 連結して 1 LP 化する完全AI生成ルート。「再現」ではなく「生成で寄せる」アプローチ。

未検証 OpenAI API 想定 対象: Meluva LP 全7アートボード
⚠️

このパターンは未検証です

まだ実装・検証は行われていません。下記の検証手順に沿って進めることを想定しています。 特に 日本語テキストの生成品質が GPT Image 2 では難しいため、 「テキストは後乗せ」 / 「画像はビジュアルのみ生成」のハイブリッドが現実解の可能性。

想定アプローチ

Meluva LP の各セクションを、GPT Image 2 のプロンプトで個別生成。 アートボード単位（750×N）で出力し、連結すれば 1 LP になる構成を目指す。 テキスト品質の限界を踏まえ、「ビジュアル背景は GPT Image 2 / テキストは HTML overlay」のハイブリッドを基本形として想定。

期待されるメリット
  • 素材なしでも LP を立ち上げられる（PoC・新商品向き）
  • プロンプトだけで何度でもバリエーション生成
  • ブランドガイドを反映した独自ビジュアル可
  • OpenAI Responses API で自動化しやすい
想定される課題
  • 日本語テキストの生成品質（医薬部外品の表記要件あり）
  • セクション間のビジュアルの一貫性（同じ素材感の維持）
  • ピクセル一致は不可（参考LPの「再現」ではない）
  • 商品パッケージ写真の正確性（実物写真は別途用意必要）
  • API 利用料 / 生成時間

検証手順（Step by Step）

1
準備：OpenAI API キー手配 + ブランド情報整理
gpt-image-1 モデル利用可の API キーを用意。 参考画像 / フォント名 / カラーパレット / 写真トーンを brand.md に集約。
2
プロンプト設計：セクション別の生成指示
7アートボード分のプロンプトを設計。日本語テキストは出力させず「テキスト挿入用空白」を確保するのがコツ。 
// 例: MV (01_mv) のプロンプト雛形
A vertical landing page hero (750×3794 px) for a Japanese skincare brand "Meluva".
Soft cyan-blue gradient background with water droplets and dewy texture.
Center: a frosted glass bottle with cyan label, cosmetic essence.
Leave the upper-left 30% empty for hero copy overlay.
Style: editorial Japanese cosmetic ad, clean and serene.
Aspect: portrait, mobile LP (750 wide).
No text in the image.
3
生成：各セクションを個別に出力
7アートボード × 各3バリエーション = 21枚を初回生成。 size: "1024x1536" で生成して 750×N にリサイズ、または アートボード長辺に合わせて分割生成 → PIL で連結。
4
選定 + 連結：1 LP の縦長キャンバスにまとめる
各セクションのベスト1枚を選び、PIL で縦連結（背景の境目をブレンド）。 Pattern 2 の organize_for_codex.py SPLITS を流用して整理可能。
5
テキスト後乗せ：HTML overlay で日本語コピーを配置
Pattern 2 で確立した .ai-text overlay 方式を流用。 extract.json と同じスキーマで座標を手書き or 既存座標を流用してハイブリッド化。
6
比較評価：Pattern 2 と並べて主観 + 定量比較
参考LP / Pattern 2 (Claude Code & Codex) / Pattern 4 を横並びでスクショ比較。 ブランド一致度・写真の信頼感・エディタブル性 を 10 点満点で評価。
7
プレビュー公開 + ポータル更新
preview/lp-recreation/pattern-4/output/ に成果物を配置 → このページの「未検証」バナーを「検証済み」に更新 + 比較数値を追記。

検証完了基準（Done の定義）

📚 関連リンク・参考情報