GPT Image 2 × Codex で
1時間で一流デザインのLPを作る完全ガイド

「外注に2週間で30万円」と言われていた1ページLPが、AIで1時間・原価数百円で公開できる時代に入りました。鍵は GPT Image 2（OpenAI最新の画像生成）と Codex（OpenAIのコーディングエージェント）の組み合わせです。

筆者は実際に医療系LPやタレント起用LPなどを、この方法で1時間以内に複数本公開しています。本記事では、ワイヤーフレーム設計から Vercel 公開までの全工程を、つまずきやすいポイントとプロンプト例つきで解説します。

特にデザイナー経験のない方が再現できるよう、「FVをどう指示するか」「2〜3セクションをまとめて生成する理由」「PCで崩さないコーディング指示」 など、実戦で詰まる箇所を全部公開します。

全体ワークフロー（所要60〜90分）

工程は5つです。

1. ワイヤーフレーム作成（10分）— 構成と訴求順を決める
2. FVをGPT Image 2 で生成（10分）— デザイン方向性を確定
3. 2〜3セクションずつまとめて生成（20〜30分）— FVと統一感のあるカンプを作る
4. Codex CLI で画像コーディング（15〜20分）— HTML/CSS化、CTAホットスポット、PC両サイド埋め、JSアニメ
5. Vercel デプロイ（5分）— 公開URLを発行

最大の落とし穴は 「セクションごとに別々に生成して、デザインがバラバラになる」 ことです。これは後述します。

ステップ1：一流のワイヤーフレームを作る方法

LPの良し悪しは7割が 訴求順 で決まります。デザイン凝る前に、何をどの順で見せるかを決めるのが先です。

必ず入れる要素（FVから順番に）

• FV：誰に・何を・いくらで・なぜ今 を一画面で
• 悩み訴求：読者の頭の中の言葉そのまま
• オファー詳細：価格・特典・初回割引
• 比較表：自分たち vs 競合 vs 既存手段
• 信頼要素：実績・医師監修・受賞・運営者
• プロセス：申込→受け取り の3〜5ステップ
• 特典/限定要素：契約者限定で何がもらえるか
• CTA：FV直下／中盤／フッター の最低3箇所
• FAQ：申込前の不安を全部潰す
• 注釈：薬機法・特商法・自由診療

ワイヤー作成プロンプト（GPT-5 / ChatGPT どちらでも）

以下の商材のLPワイヤーフレームを作って。

【商材】〇〇（マンジャロ オンライン処方）
【ターゲット】20-40代女性、忙しくて通院できない層
【独自オファー】月額18,000円、初回1,000円OFF、LINE相談OK、
　ゆいぴす（タレント）応援プロマイド付き
【参考LP】https://...
【出力】
- 全セクションを縦に並べた箇条書き
- 各セクションに見出しコピー案・サブコピー案・本文要点を3つずつ
- CTAは何箇所にどんな文言で置くか
- 注釈に入れる薬機法配慮文も

ここで出てくる 箇条書きを、そのまま GPT Image 2 のプロンプトに流用 します。テキストを2回考えなくて済むので速い。

ステップ2：GPT Image 2 にデザインを依頼するときの最重要コツ

ここが本記事のメインです。実戦で詰まるポイントを上から順に。

コツ1：プロンプトより参考デザイン画像を送るほうが圧倒的に速い

「ピンクと赤の女性向けLPで、雑誌っぽくて、バラの花弁が舞っていて……」と文章で書くより、参考LPのスクショを2〜3枚アップロードして「この方向性で」 と言ったほうが10倍速く理想に近づきます。

GPT Image 2 は参考画像のスタイル追従が非常に強い。逆に、参考画像なしでテキストだけだと「いかにもAIっぽい」凡庸なLPが出てきます。

実戦Tips：

• 参考画像は同業他社LPを2〜3枚（FVだけ・全体・配色がほしい1枚）
• 「色味・文字組はこの画像／余白とリズムはこの画像」と役割分担で指示
• ロゴ・写真など「絶対これを使う」素材は別途参考として渡す

コツ2：FVは具体指示が命。曖昧にしない

LPの全工程の中で、FVだけは 指示の粒度を細かくしないと事故ります。FVが決まればそれ以降のページはFVに引っ張られて勝手にまとまるので、ここに時間を使ってください。

FV指示で必ず明示する項目：

ここを曖昧にすると CTAが勝手にダミーで生成される／バッジが2個になる／受賞シールが消える など、本来あってほしいものが落ちます。

コツ3：FV先行 → デザイン方向性を確定 → 残りを作る

これは順番の話です。やってはいけないのは「全セクションを一気に発注」。

正しい流れ：

1. FVを2〜3案つくる（バリエーションA/B/Cで色違い・余白違い）
2. 1案を確定
3. その確定FVを参考画像として添付 しながら、残りのセクションを作る

FVを参考に渡せば、フォント・色・余白・装飾モチーフ（バラの花弁、サテン布など）が自動で揃います。

コツ4：セクション単位ではなく「2〜3セクション×縦長1枚」で生成する

ここが意外と知られていない最重要ポイント。

セクションごとに1枚ずつ画像を作ると、どんなに参考を揃えても セクション間に切れ目 が生まれます。背景色のグラデが微妙に違う／フォントサイズが揃わない／装飾の密度が変わる、などが起きる。

解決策：2〜3セクションを縦に連続させた1枚の縦長画像として生成 する。

10セクション構成のLPなら：

• 1枚目：FV単独（縦長）
• 2枚目：悩み + アンバサダー + 特典案内（3セクションまとめ）
• 3枚目：比較表 + 価格設計 + CTA（3セクションまとめ）
• 4枚目：信頼要素01・02（2セクション）
• 5枚目：信頼03・04 + プロセス + CTA（3セクション）
• 6枚目：プラン詳細 + 特典詳細 + 最終CTA（3セクション）

合計5〜6枚で全体LPがまとまります。1枚に2〜3セクション乗せておけば、その内部は必ずデザインが連続します。

コツ5：セクションタイトルのフォントサイズなど統一指示を毎回入れる

毎回プロンプトに入れる「絶対ルール」を3〜5項目決めておくと、全画像で統一感が出ます。

絶対ルールの例：

- セクション見出しは48pxの明朝体（VOGUE誌のような重み）
- 本文は24pxのゴシック、行間1.8
- アクセントカラーは #B81F1A（深い赤）のみ
- 装飾は金色の細罫線とバラの花弁、これ以外は使わない
- 余白は左右60px、セクション間120px
- どの画像も同じサテン布の背景テクスチャ

これを毎回コピペで添付。指示を覚えているふりをするAIに頼らないのが鉄則です。

コツ6：私が追加で効かせている小ワザ

• アスペクト比を明示：「724×2172px、縦長3:9」のように具体的なpx指定で頼む。Image 2はpx指定にも応える
• 連番で生成：「Page 1 of 6」「Page 2 of 6」とプロンプト内で位置情報を渡す
• 修正は局所指示：「3つ目のバッジの色だけ深い赤に。他は変えない」と局所だけ
• テキストを画像に焼かない判断：本気で差し替えそうな数字（料金）は、画像生成時にあえてダミー入りにして、後でHTML側で上に被せる選択肢もある。確定なら焼き込んで楽
• 生成毎に「前のページと連続するように」と一言：参考画像がある状態でも、念押しすると揃う

ステップ3：Codex で画像コーディング

ここから実装。Codex CLI に画像を渡して、HTML/CSSと最低限のJSまで一気に書かせます。

Codex CLI の起動

cd {プロジェクトのフルパス}
codex

対話モードに入ったら、画像をassets/に置いた状態で以下のプロンプトを投げます。Codex は GPT-5 系の推論で動くため、長文の仕様を渡しても破綻なく実装してきます。

基本のプロンプト（コピペで使えます）

このフォルダの assets/lp_01.png 〜 lp_06.png を縦に順に並べた1枚のLPを
index.html として作って。

仕様：

- スマホベース。max-width: 460px の中央ステージに画像を縦組み。
- 画像は <img> で width:100%。CSSで自動スケーリング。
- 各画像のCTAボタン位置に透明な <a class="hot"> をabsolute配置（クリック領域）。
  ボタン位置は top%/height% でレイアウト追従させる。
- リンク先は仮で href="#reserve" "#line" にして、後で差し替えられるようにする。
- フッターは黒背景、運営／特商法／プラポリ／規約／注釈／コピーライト。
- フローティングCTAは入れない。
- PC（>=760px）でも中央460pxレイアウトのまま。
  両サイドはLP本体のブランドカラーに馴染むグラデ背景で埋める。
  PCで画像が拡大されないこと。
- viewportは width=device-width,initial-scale=1。
- 1ファイル完結（index.html にCSS/JS埋め込み）。
- 画像は loading="eager"（FV）/ loading="lazy"（それ以降）。

完成後、ローカルで起動してスクショを撮って確認してから、
Vercel に static deploy できる構成にして。

Codex の強みは 「ローカルサーバ起動 → ブラウザでスクショ → CTA位置のズレを自分で直す」を1サイクル内で回せる こと。Claude Code とほぼ同等のことができますが、長時間タスクの安定性が高く、放置しても破綻しないのが特長です。

スマホ前提でPCを崩さないコツ

LPの90%以上はスマホで見られます。スマホで完璧に作って、PCはオマケ が正解。

具体的にはCSS側で：

.stage {
  max-width: 460px;     /* これが重要 */
  margin: 0 auto;
  background: #fff;
}
.stage img { width: 100%; height: auto; }

body {
  background: linear-gradient(160deg, #F8EBD4, #EFD9BA, #E2BC95);
  background-attachment: fixed;
}

これだけで PC版は中央460pxにLP、両サイドにブランド色グラデ、になります。「PC版を別途デザインする」という工数を一切かけずに済むのが現代の正解です。

CTAホットスポット方式

画像内に描かれているボタンを「クリックできる」ようにするには、透明な<a>タグをabsolute配置で被せます：

<section style="position:relative">
  <img src="assets/lp_01.png" />
  <a class="hot" href="#reserve"
     style="left:6%;right:6%;top:88%;height:5%"></a>
</section>

a.hot { position:absolute; display:block; background:transparent; }
a.hot:active { transform: scale(.985); }

top% と height% で指定するのがミソ。画像が縮小拡大しても、ボタン位置が画像にぴったり追従します。Codex は top をpx指定で書きがちなので、「必ず % で書いて、画像のスケールに追従するように」 と明示しておくと安定します。

JSで背景にうっすらアニメーションを入れる

Vercelに上げただけだと「画像を縦に並べただけのページ」になりがち。両サイド埋めの背景に、JSで光球がふわふわ漂うエフェクト を入れるだけで、一気に「ちゃんと作られた高級LP」感が出ます。

実装：Canvas + requestAnimationFrame。光球を半透明の放射グラデで描いて、低速drift＋呼吸（透明度のsin波）。mix-blend-mode: screen と filter: blur(60px) で柔らかく光らせる。

Codex に頼むときの追加プロンプト：

両サイドの背景に、Canvas+JSでふわふわ漂う光球エフェクトを追加して。
- 半透明の円を10〜14個、ブランドカラーのパレットで
- ゆっくりdrift（vx,vy = 0.1前後）
- 透明度はsin波で呼吸
- mix-blend-mode: screen + filter: blur(60px)
- LP本体には影響を与えない（z-index背景側）
- prefers-reduced-motion対応
- タブ非表示時はrAF停止（パフォーマンス）

10秒で書いてくれます。LP本体は画像をそのまま見せて、両サイドだけ静かに動く。主張しすぎない動きが信頼感のある高級LPの正体 です。

ステップ4：Vercel に公開

cd {プロジェクトフォルダ}
vercel deploy --prod --yes

Vercel CLIにログイン済みなら、これだけで本番URLが発行されます（xxx.vercel.app）。Hobby プランなら無料、商用利用前にだけ Pro へ上げればOKです。

カスタムドメインを当てるなら vercel domains add で1分。

Codex はこの vercel deploy までを1コマンドで含めて完結させてくれることもあります（プロジェクトの設定が整っていれば）。

1時間タイムテーブル（実測）

実測値です。慣れれば 60分。慣れないうちは、ワイヤーで詰まりがちなので90分見ておくのが安全。

Codex ならではの使い分け

Codex と Claude Code の使い分けは、LP制作の文脈では以下のとおりです。

LP1本作るだけなら どちらでも実用速度 です。本記事は Codex を選んだケースの解説。Claude Code 側のワークフローは GPT Image 2 × Claude Code で1時間で一流デザインのLPを作る完全ガイド にまとめています。

よくある失敗とリカバリー

• 「セクションごとに作ったらバラバラ」 → 2〜3セクションを縦長1枚にまとめて再生成
• 「FVのバッジが3つしか出ない（4個指示なのに）」 → 「楕円バッジを4つ、必ず4つ」と数字を強調＋参考画像で4個並べたものを送る
• 「PCで画像が引き延ばされる」 → .stage { max-width: 460px; } が効いているか確認。<img> に width:100% のみ指定し、heightは auto
• 「Codex がCTAホットスポットの位置をpxで書いた」 → 「必ず%で書いて」と明示し直す。レイアウト追従がpxだと壊れる
• 「文字が小さい・大きい」 → 縦長画像の中の文字サイズは、Image 2 が画像内のpx単位で扱う。「本文は24px相当」と毎回明示する

まとめ：1時間でLPは作れる、外注10万円の領域はもう終わり

GPT Image 2 で デザイン方向性をFVで固める → 2〜3セクションまとめて連続生成 → Codex で画像コーディング という流れに乗せると、1時間で公開可能なLPが手に入ります。

外注10万円〜30万円の領域がほぼ消えるので、A/Bテスト用に5本同時に出す とか、キャンペーンごとに使い捨てLPを毎月出す といった、これまで予算的にできなかったマーケ施策が手の内に入ります。

「自社でやる時間がない」「Codex を運用に乗せる人がいない」という場合は、月額AI担当（まるっとAI：月20万円〜）にこの一連の流れごと任せていただくのが最短です。LP制作・運用・改善ループまで丸ごと社内に持ち込めます。