← LP再現プロジェクトに戻る
Pattern 2 · AI素材分解 + HTML overlay

AIデータ分解後の再現（本命）

イラレ上で文字レイヤーをあらかじめ取り除いた背景画像を書き出し、その上に HTML/CSS でテキストを重ねるアプローチ。 Adobe Fonts を読み込めばある程度のビジュアル再現は可能だが、改行位置や枠の位置にズレが出る。 完成度を上げるには 「枠まで取り除く」「装飾要素も分解する」といった デザイン段階での実装を見据えた作り込みが鍵。

検証済み Claude Code版 lp-meluva.pages.dev Codex版 lp-meluva-codex.pages.dev Codex 圧倒的優位
💡

完成度を上げるための前提：デザイン段階の作り込みが効く

この検証で得た最大の知見

「文字を消した背景画像 + HTMLテキスト」だけだと、Adobe Fonts を入れても改行の位置や枠の位置がどうしてもズレる。 これを最小化するには、イラレ側で段階的に "AIで再構築させる要素" を抜いていくのが効く。

レベル1（最低限）
文字だけ取り除く

textFrame を全部 hidden にして書き出した「テキストなし背景画像」+ HTML overlay。 再現はある程度可能だが、改行や枠の位置ズレが残る。

レベル2（推奨）
枠も一緒に取り除く

HTML/CSS で再現しやすいシンプルな枠（吹き出し・ボックス・タグ枠）はイラレ側で除去 → コード側でCSSで描画。ズレが大幅に減る。

レベル3（理想）
装飾要素まで分解

KVなど "画像でしか表現できない" 部分以外、ユーザーコメントカードや シンプルな装飾（よくあるWebデザイン要素）もイラレ側で剥がす → 背景は背景画像、その上の要素はコーディングで再構築。完成度が一段上がる。

🎯 結論: AI で LP を再現する前提なら、 デザイン段階で実装手法の想定（どこを画像、どこをコード）を決めてからデザイン依頼するべき。 この前提なしに既存のイラレデータを後から分解しようとしても、限界がある。

処理パイプライン（実際にやったこと）

Pattern 1 で「写真フォルダだけでは無理」と分かった反省を踏まえ、AI ファイルを情報源として徹底活用する設計に切り替え。

  1. 1
    extract.jsx — AI ファイルから構造抽出
    全 textFrame / placedItem / rasterItem / artboard を JSON に書き出し（272 textFrames + 47 placedItems + 12 rasterItems + 19 fonts）
  2. 2
    export-no-text.jsx — テキスト非表示書き出し
    全 textFrame を hidden にして @1x JPG（quality 90）で各アートボードを export → 純粋な背景画像
  3. 3
    export-text-and-shapes.jsx — テキスト + 単純図形を非表示
    isSimpleShape 判定で帯/ボックス/枠を hidden にした「枠なし背景」も生成（v2 = Codex review 反映済み）
  4. 4
    organize_for_codex.py — 整理 + 細分化
    SPLITS 定義に従い、フル画像 7 枚 → 細分化 24 枚（背景 transition で割る）+ サフィックス整列
  5. 5
    generate_overlay.py — extract.json → HTML overlay
    座標とフォントを .ai-text クラスで配置。container queries (cqw) で画像と同期スケール
  6. 6
    手動微調整 + Cloudflare Pages デプロイ
    セクション単位の HTML/CSS 微調整 → wrangler で公開

2実装の並列比較（Codex版が圧倒的優位）

同じパイプラインから出発しても、出力されたLPの完成度には明確な差が出た。 テキストと枠のずれが Codex 版は圧倒的に少ない。

A
Claude Code版
公開中（参考）

「ハイブリッド」設計

MV / Trouble セクションのみ HTML overlay、Section 3 〜 CV は with-text 画像で固定の段階的アプローチ。 編集対象を絞ることでズレ問題を局所化したが、テキストと枠の位置ズレは複数箇所に残存。

📁 ファイル: index.html 255行 / styles.css 224行
🖼 画像: 39枚（11MB）
🌐 公開先: lp-meluva.pages.dev
ハイブリッド 編集領域は限定的 テキスト/枠ズレ残存
プレビューを開く →
B
Codex版 · 推奨
公開中（本命）

「全セクションHTML化」設計

全セクションを「背景画像 + HTML/CSS テキスト + 図形オーバーレイ」で統一。 extract.json のテキスト全件を data-driven で HTML化。テキストと枠のズレが Claude Code版と比べて圧倒的に少ないのが最大の差。

📁 ファイル: index.html 593行 / styles.css 656行
🖼 画像: 78枚（14MB / フル7 + 細分化24 + バリアント）
🌐 公開先: lp-meluva-codex.pages.dev
data-driven 全域 HTML 化 テキスト/枠ズレ最小
プレビューを開く →
🏆 総評: 同じパイプライン・同じインプットでも、アウトプットの質は Codex >> Claude Code。 特に textFrame 単位の正確な座標再現（位置・改行・サイズ）と、装飾図形の処理ロジックの一貫性で Codex が一段上。 LP再現を AI に任せる場合、本番運用は Codex 流（全域 HTML 化）を推奨。

数値比較

項目 Claude Code版 Codex版 所感
HTML 行数 255 593 Codex は全テキストをHTML化するため行数が増える
CSS 行数 224 656 Codex は textFrame ごとに pixel position を CSS 化
画像枚数 39 78（細分化版含む） Codex は背景 transition で分割 → 表示崩れに強い
ペイロード合計 11 MB 14 MB どちらも CDN/Cache で実用域
テキスト位置の正確さ 5/10（複数箇所で目視可能なズレ） 9/10（圧倒的に正確） 最大の差はここ。Codex は座標再現が忠実
枠（ボックス・吹き出し）の整合性 5/10（テキストと枠のずれが目立つ） 9/10（ずれが圧倒的に少ない） Codex は装飾図形の処理ロジックが一貫
ビジュアル一致度（総合） 6/10 9/10 Adobe Fonts ありの前提で、Codex がブランド再現 ◎
編集容易性（AI で本文差し替え） 6/10（HTML化された範囲のみ） 9/10（全域 HTML 化） Codex は AI 一括編集の対象が広い
コード可読性（人間レビュー） 8/10 6/10（自動生成由来で冗長） CC は手書き比率が高くて読みやすい（唯一の優位）
総合完成度 6/10 9/10 ⭐ 本番運用は Codex 流を推奨
向いてるケース 人間レビュー前提のドラフト作成 本番運用 LP（再現精度重視） 普通は Codex 一択。CC は読みやすさが必要なケース限定

ライブプレビュー（3面比較）

CC版・Codex版・再現元LP を横並びで比較

Claude Code版

別タブで開く ↗

Codex版 ⭐ 推奨

別タブで開く ↗

📌 再現元LP（参考）

別タブで開く ↗
📌
cosmecollege.com
外部サイトのため、本ポータルからは
iframe で埋め込めません。
右上ボタンから別タブで開いて
左の2版と並べて比較してください。
再現元LPを開く ↗

共通の学び・ハマったポイント

⚙️ 技術的
  • Adobe Fonts CJK kit は JS embed 必須（CSS link は HTTP 412）
  • ExtendScript 2026 は JSON が無い → polyfill 自作
  • JSX 内の日本語インラインコメントで構文エラー → 削除
  • Tailwind CDN preflight が img { display: block } で意図せず上書き
  • iPhone Safari の積極キャッシュ → _headers + ?v=N で対処
🧠 設計判断
  • テキスト/枠ズレを最小化するには「全域 HTML 化」（Codex流）が現実解。ハイブリッド（CC流）は妥協が残る
  • イラレ側で枠・装飾まで取り除いてからコード再構築するとさらにクリーン
  • extract.json は AI ↔ 実装の 共通言語 として最強
  • Container queries（cqw）で画像と同期したフォントスケール
  • SPLITS 定義は背景 transition の y で割る（Codex review 採用）
  • デザイン段階で実装手法を決めてからデザイン依頼するのが工数最適