このパターンの位置づけ・できること / できないこと
OMYから受領した時点の素材は 「元LPのURL」 + 「肖像あり / 肖像なしの写真フォルダ」のみ。 まずこの状態で、 Claude Code と Codex の双方に同じインプットを渡して試した最初のパターン。AIファイルは未受領。
✅ できる
- 原稿LPと同じ「縦長キャプチャを縦に並べてベタ貼り」する実装
- 画像をそのまま縦に積むだけのHTMLは AI ポン出しでも問題なく作れる
- 運用変更が不要な単発キャンペーンには十分使える
❌ できない
- 複雑な背景・装飾を含む LP の "再現コーディング"
- テキスト位置・色・フォント・改行の正確な復元（参考画像だけでは正解情報がない）
- あとから本文だけ差し替える編集運用
📥 入力
- 元LP URL（cosmecollege.com）
- OMY_LP共有_肖像あり（PNG群）
- OMY_LP共有_肖像なし（PNG群）
- 元LPのスクリーンショット数枚
📤 出力
- HTML + CSS（Tailwind CDN）
- 受領画像をそのまま貼った疑似LP
- "再現" としてはほぼ写真の貼り付け以上のことはできない
Claude Code / Codex 両者の振る舞い
同じインプット（参考LP URL + 写真フォルダ）を Claude Code と Codex に並列で渡したところ、 両者ともに同じ結論に到達した：「画像をそのまま縦に並べたベタ貼りLPは作れるが、装飾やレイアウトの再現は不可能」。 これは AI の能力差ではなく 入力情報そのものに正解（テキスト座標・フォント・色値）が含まれていないため原理的に再現できない、という構造的な問題。
A. Claude Code版
~/dev/humbulls/clients/omy/lp-meluva- Tailwind CDN + 単一画像背景で着手
- 「マテリアル分解」（写真要素を切り出して再合成）も試したが複雑性爆発で撤退
- Tailwind CDN preflight の
img { display: block }強制でハマる
B. Codex版
~/dev/humbulls/clients/omy/lp-meluva-codex- HTML + 独立CSS（CDN非依存）でスタート
- 「画像主体・HTMLは構造のみ」というスタンスが一貫
- Tailwind CDN を最初から避けたため preflight 衝突を回避
結論: 両者とも参考画像だけでは "再現" には届かない。
ベタ貼りで足りるなら Pattern 1 で十分／本格的な再現が必要なら AI ファイルの提供を受けて Pattern 2 へ進む、という線引きが妥当。
このフェーズで得た学び（Pattern 2 への布石）
-
1
「画像ベタ貼り」だけなら AI ポン出しで余裕。原稿LPと同じく長尺画像をそのまま縦に並べる実装は、参考画像だけでも問題なく作れる。
-
2
"再現コーディング" は写真フォルダだけでは不可能。テキスト座標・フォント・色・改行といった正解情報が参考画像に含まれていない以上、AI の能力ではどうにもならない構造問題。AI データのソースアクセスが必須と判断。
-
3
「肖像あり / 肖像なし」の素材選択は OMY 側の最終判断が必要。AI が勝手に決めるとフィードバック工数が増える。
-
4
Tailwind CDN は 運用フェーズで preflight 問題を引き起こす。最終形は CDN 抜きの独立CSSが妥当。
-
5
「再現が必要か / ベタ貼りで足りるか」の判断を 制作着手前に決めるのが工数最適化のキモ。
📝 ポータルでの扱いについて
Pattern 1 はその後 Pattern 2 に置き換わったため、ライブプレビューは公開していません（成果物は git history と Claude Code セッションログに残存）。 このページは「初回アプローチの記録」として保持し、Pattern 2 との対比で「なぜ AI データの分解が必要だったのか」を示す資料の位置づけです。