Meluva 美白美容液（医薬部外品）公式LP
全パターンの"再現コーディングの正解"として比較対象になる現行LP。 各パターン詳細ページから別タブで開いて、横並び比較に使用。
案件概要
既存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 一発で代替できる可能性。
ブランドトーンからLPを生成する
GPT Image 2を、いきなりLPセクションを作る道具としてではなく、 商品理解・ブランドトーン・世界観・情報設計・広告KVを段階的に固める制作フローとして使う。 実商品画像を入力し、クライアント確認用のコンセプトボード、商品情報インフォグラフィック、商品撮影バリエーション、広告KVからLP制作へ進める。
パターン比較サマリー
| 観点 | ① 初回再現 | ② AI分解後 | ③ Canva | ④ GPT Image 2 |
|---|---|---|---|---|
| ステータス | 検証済 | 検証済 · 推奨 | 検証中 | 未検証 |
| 必要素材 | URL + 写真 | AIファイル + URL | フルキャプチャ画像 | 実商品画像 + ブランド仮説 |
| "再現" は可能か | × ベタ貼りのみ可 | ◎（Codex流が本命） | ?（要検証） | ×（再現ではなくCV改善案） |
| 編集容易性 | △（限定的） | ◎（HTML overlay） | ◎想定（Canva UI） | △（画像校正 + 透明CTA） |
| テキスト/枠ズレ | — 該当なし | Codex は最小 / CC は残存 | ? | ? |
| 完成度を高める鍵 | — | デザイン段階での作り込み | Magic Eraser 精度 | ブランドトーン設計 + 商品画像入力 |
| 向いてるケース | 単発キャンペーンの "ベタ貼り" | 本番運用LP（再現精度重視） | 非エンジニアの編集運用 | 新LP/改善LPの世界観設計 |
| プレビュー | — 過程記録のみ | CC版 / Codex版 ⭐ | コンセプトボード公開 | 未公開 |