案件概要
既存LPの再現業務を、AIだけでどこまで一気通貫できるか。 ピクセル一致（見た目）と編集容易性（OMY側がフォトショ・イラレなしで本文修正できるか）を両立する手法を探る。
- 商品: メルヴァ Meluva 美白美容液（医薬部外品）
- 元LP: cosmecollege.com/lp
- サイズ: 750×N（モバイル縦長 / 7アートボード）
- 元データ形態: AI ファイル（PDF互換オフ）
- 主フォント: Noto Sans JP / Noto Serif JP / yu-gothic-pr6n
- 欧文: din-2014 / futura-pt / minion-pro（Adobe Fonts kit
obw0mvr） - 主色: rgb(53,91,112) ディープブルー / rgb(128,164,187) ライト
- トーン: 清潔感・水光肌・医薬部外品の信頼感
- OMY_LP共有_肖像あり / 肖像なし（写真PNG群）
- 元LPスクリーンショット（PC / モバイル）
- 後出し: AIファイル（meluva_lp_design_nomaya.ai）
検証4パターン
クリックで各パターン詳細へ
参考画像でポン出し（限界あり）
参考画像と写真フォルダだけを渡して、AI に「ポン出し」でコーディングしてもらう最も素朴なルート。 複雑な背景・装飾を含む LP の "再現" は不可能だが、 原稿LP と同じく「縦長キャプチャをそのまま縦に並べてベタ貼り」する実装なら問題なく作れる。
AIデータを分解して再構築（本命）
イラレ上で文字レイヤーをあらかじめ取り除いた背景画像を書き出し、その上に HTML/CSS でテキストを重ねる。 Adobe Fonts を読み込めばある程度の再現は可能で、枠まで剥がして HTML/CSS で再構築するとズレが激減。 完成度は Codex >> Claude Code。
Magic Layers でフラット画像を分解
Canva の Magic Layers（2026年3月パブリックベータ）で、PNG/JPG をテキスト・オブジェクト・背景の編集可能なマルチレイヤーに自動変換。 Pattern 2 で JSX を書いてやっていた工程を Canva UI 一発で代替できる可能性。
GPT Image 2 でセクション別生成
OpenAI の GPT Image 2（gpt-image-1）で、各セクションを個別に画像生成し、 連結して 1 LP 化。生成系で「再現」に近づけられるかを試す全自動ルート。
パターン比較サマリー
| 観点 | ① 初回再現 | ② AI分解後 | ③ Canva | ④ GPT Image 2 |
|---|---|---|---|---|
| ステータス | 検証済 | 検証済 · 推奨 | 未検証 | 未検証 |
| 必要素材 | URL + 写真 | AIファイル + URL | フルキャプチャ画像 | プロンプト + 参考 |
| "再現" は可能か | × ベタ貼りのみ可 | ◎（Codex流が本命） | ?（要検証） | ×（"生成"であって再現ではない） |
| 編集容易性 | △（限定的） | ◎（HTML overlay） | ◎想定（Canva UI） | ×（再生成必要） |
| テキスト/枠ズレ | — 該当なし | Codex は最小 / CC は残存 | ? | ? |
| 完成度を高める鍵 | — | デザイン段階での作り込み | Magic Eraser 精度 | プロンプトと参考画像 |
| 向いてるケース | 単発キャンペーンの "ベタ貼り" | 本番運用LP（再現精度重視） | 非エンジニアの編集運用 | 素材ゼロから PoC を作る |
| プレビュー | — 過程記録のみ | CC版 / Codex版 ⭐ | 未公開 | 未公開 |