「見た目だけの画像」で終わらせない。デザイン画像を用意し、Codex（OpenAIのコーディングAI）に忠実に再現させて、公開できるLPまで完走するための手順です。
難しく見えても、やることは「①設計 → ②画像 → ③素材 → ④実装」の一本道。特に差がつくのは③素材づくりと④の"忠実に"の指示です。
誰に何を売るか、構成、ワイヤーフレームを先に固める
GPT Image 2.0でデザインカンプを生成、1案に絞る
画像を1個ずつ生成し、本物の透過PNGに整える
AGENTS.mdを用意し、画像に忠実にコード化させる
「誰に・何を売るか」「ゴール（申込／登録／購入）」を先に言葉にする。ここが曖昧だと、あとの画像もコードもブレます。
セクションの順番とコピーの骨格を作る。よく使う並びは下記。
全体レイアウトを先に確定。FigmaでもClaude Designでも、手描きでもOK。「どこに何を置くか」が決まっていれば次の画像生成が速くなります。
構成をもとに、GPT Image 2.0でLPのデザイン画像（カンプ）を作る。世界観・参考イメージを添えると精度が上がります。まず3案作って、その中から1案を選ぶのがおすすめ。
"かわいい"だけで選ばない。Codexが忠実に再現しやすいかを見ます。
デザイン画像から画像を「切り抜く」のではなく、コーディング用に作り直すのがコツ。ここを丁寧にやると、実装での事故が激減します。
ヒーロー画像、理由セクションの挿絵、アイコン、装飾…をまとめず、1つずつ個別ファイルにする。サイズ調整・レスポンシブ・hoverが効くようになり、管理もラクです。
画像生成で「透過PNG」と頼んでも、実際は透明ではなくチェッカー柄が描かれているだけのことがあります。背景を本当に透明化して、alpha情報を持ったPNGにしましょう。
assets/transparent/ の本物透過だけにする。
日本語ファイル名は、実装やデプロイで404の原因に。「どこで何に使う素材か」が分かる英数字名にします。
色・フォント・スマホ幅・セクション構成・画像の使い場所・CTAルールなどを1か所に。Codexがこれを読んで実装します。
Codexはプロジェクト直下の AGENTS.md を設定ファイルとして読みます（Claude Codeの CLAUDE.md にあたるもの）。プロジェクト概要・実装ゴール・デザイン方針・使う素材フォルダ・カラー・CTAルール・最終チェック項目を書いておきます。
AGENTS.md ／ Claude Code = CLAUDE.md。ファイル名を間違えると読み込まれません。
最初から実装させず、まず仕様書と素材を読ませて計画だけ出させる。ここで方針のズレや不足素材を潰します。
採用したデザイン画像を「お手本」として渡し、余白・文字サイズ・配色をそのまま再現させる。仕上げに360／390px幅で崩れがないか確認します。
実装フェーズでそのまま貼れる指示文です。ファイル名やパスは自分のプロジェクトに合わせて調整してください。
このプロジェクトは、デザイン画像を忠実に再現するスマホファーストのLPです。 まず AGENTS.md を読み、その後に以下を確認してください。 - docs/design_spec.md - docs/design_tokens.css - docs/asset_inventory.csv - assets/transparent/ - assets/mockup_reference_01.png（採用したデザイン画像） まだ実装・編集はしないでください。まず以下だけを報告してください。 1. 読み取ったデザイン方針 2. 実装するセクション一覧 3. 使用予定の主要画像素材 4. 不足しているファイルがあるか 5. 実装方針 6. 実装前に確認したい懸念点 画像は必ず assets/transparent/ を優先。 CTAは画像ではなく HTML/CSS で再現してください。 デザイン画像の世界観を勝手に変えないでください。
実装に入る前に、画像素材の存在確認だけを行ってください。 確認対象： - assets/transparent/hero_woman_laptop.png - assets/transparent/reason_support_team.png - assets/transparent/icon_heart.png - assets/transparent/icon_clock.png - assets/svg/icon_sparkle.svg 存在しないファイルがあれば、勝手に別画像へ差し替えず、 「不足ファイル」として一覧化してください。
OKです。今の方針で、採用したデザイン画像に忠実に実装してください。 再現の指示： - レイアウト・余白・文字サイズ・配色は、デザイン画像から読み取った値をそのまま使う - 勝手に解釈・アレンジせず、画像に写っているとおりに再現する - スマホ幅 390px を基準に、360px で横スクロールが出ないようにする 実装後に以下を確認してください。 - 360px 幅で横スクロールが出ない - 390px 幅で余白が美しい - 画像のパス切れがない - CTAボタンが押しやすい（44px 以上） - 各セクションがデザイン画像に近い見え方になっている
元記事（Claude Design→Codex画像→忠実コーディングの3ステップ）では、最後の指示に"ある一文"を足すと再現度が上がるとされています。ただしその具体的な一文は元投稿の動画内で解説されており、記事テキストには含まれていませんでした。ここでは捏造せず、一般に効きやすいコツを挙げておきます。