CODEX × CLAUDE CODE

コーデックスでLP制作 完全ガイド

野田さんの方法を読み解いて、チームでも使える形にまとめました

目次

  1. これで何ができるようになる?
  2. 全体像 ― 制作から公開までのドミノ
  3. なぜCodex? ― お金の話がいちばん大事
  4. 準備するもの
  5. 【あや式・最短】Claude CodeからCodexで画像を作る
  6. 【野田さん式】Codex単体+並列生成
  7. 公開を自動化する(GitHub→Cloudflare)
  8. チーム・合宿で伝えるときのコツ
  9. 野田さんに確認したいこと

1これで何ができるようになる?

ひとことで言うと ―

画像もデザインも全部AIに作らせて、自分は「気に入った1枚を選ぶ」だけ。
完成したらボタンひとつで世界に公開。しかも追加のお金(API課金)がかからない。

これまであやさんがClaude Codeで作っていたLPは、画像を別で用意する必要がありました。Codexを使うと、その画像づくりまでAIの中で完結します。参考画像も要りません。「こんな感じ」とお願いするだけで、Codexがデザインごと作ってくれます。

野田さんは「エンジニア界で革命と言われている」「絶対使ってください」と話していました。やっていることは難しそうに聞こえますが、分解すると3つだけです。

2全体像 ― 制作から公開までのドミノ

野田さんの作業は、大きく「制作」と「公開」の2フェーズ。公開はドミノのように自動で進みます。

制作フェーズ(自分の手元)
1. Codexで画像を並列生成
各セクション4〜8枚出して、気に入った1枚を選ぶ
2. HTMLに画像を差し込む
完成形を見ながら、その場でLPに組み込む
公開フェーズ(一度設定すれば全自動)
3. GitHubにプッシュ
プライベートリポジトリで制作物を管理
4. GitHub Actionsが自動起動
最初に1回だけ設定すれば、あとは毎回自動
5. Cloudflareに公開
Wrangler経由で、画面を開かずそのまま公開
ポイント:野田さんは画像生成も並列で同時に回し、HTMLをリアルタイムで見ながら差し込んでいます。気に入らなければどんどん回して、いいやつをポチポチ選ぶスタイルです。

3なぜCodex? ― お金の話がいちばん大事

野田さんが何度も「Codexいいですよ」と言っていた一番の理由はコストです。Claude Code単体では画像が作れず、外部の画像API(ChatGPTなどの有料API)を繋ぐ必要があります。これが「生成するたびにお金が減っていく」状態を生みます。

画像の作り方コスト
Claude Code単体 自力では作れない。外部の画像APIを繋ぐ必要がある 従量課金 作るたびにお金が減る
Codex 画像生成が標準で入っている(gpt-image-2) サブスク内 追加課金なし
事実確認できました:Codexの画像生成は ChatGPTのPlus/Pro などのサブスク(月額)に含まれています。野田さんの「サブスク内で画像が作れるから、わざわざAPIを繋がなくていい」という話は、その通りでした。
注意:無料プランでは画像生成は使えません。画像生成は通常の利用枠を3〜5倍ほど早く消費します(無限ではない)。Plusプランの方が画像の質も良くなります。

4準備するもの

あやさんはCodexがもう入っているので、ここは確認だけで大丈夫です。チームメンバーに伝えるときの手順としてまとめます。

A
ChatGPTの有料プラン(Plus以上)
画像生成を使うので、無料プランはNG。Plusでまず十分です。
B
Codex(コーデックス)をインストール
npm i -g @openai/codex
C
ChatGPTアカウントでログイン
APIキーではなく、いつものChatGPTアカウントでログインします。これがサブスク内で使えるカギです。
codex login
codex login status   # ログインできているか確認

5【あや式・最短】Claude CodeからCodexで画像を作る

あやさんに朗報:あやさんはClaude Codeを使っているので、野田さんより簡単な道があります。Claude Codeの中からCodexを「呼び出す」だけで画像が作れます。Codexを単体で覚え直す必要はありません。

Claude Codeはターミナル(コマンド)を動かせるので、画像が欲しいときにこう言うだけです。

やり方:Claude Codeにこう頼む

例:「ヒーロー画像として、湘南の海×やわらかい朝の光のLP用バナーを作って、images フォルダに保存して」

するとClaude Codeが裏でこのコマンドを実行して、Codexに画像を作らせます。

codex exec -C "$(pwd)" -s workspace-write \
  --skip-git-repo-check \
  "画像生成ツールで作って:[ここに欲しい画像の説明]、
   ./images/hero.png として保存して"

できあがった画像は、いま作業しているフォルダの ./images/ に保存されます。あとはClaude CodeにそのままLPのHTMLへ差し込んでもらえば完成です。

覚えなくて大丈夫:このコマンドを毎回手打ちする必要はありません。「Codexで画像を作って」とお願いすれば、Claude Code側でやってくれます。一度この仕組みを「スキル」として登録しておけば、もっと一言で呼べるようになります(必要になったら作りましょう)。

6【野田さん式】Codex単体+並列生成

野田さんはClaude CodeではなくCodexを主役にして、さらに作り込んでいます。文字起こしで話していた「サイドバーの中で画像を並列生成して、ポチポチ選ぶ」仕組みです。

野田さんが言っていたことその正体
サブスク内で画像が作れる確認済 Codex標準の画像生成機能
「コデックスアップサーバー」を埋め込む確認済 Codex App Server(OpenAI公式機能)
サイドバーの画面でポチッと押すと内部で動く自作 App Serverを心臓にした野田さんの自作画面
4〜8枚を同時に並列生成して選ぶ自作寄り 自作画面からCodexに繰り返し生成させる作り込み
HTMLを見ながら画像を差し込み、デプロイ再現可 あや式(前章)でも同じことができる

「コデックスアップサーバー」の正体 = Codex App Server

文字起こしの「コデックスアップサーバー」は、正式には Codex App Server です。Codex本体(頭脳)を、自分で作ったアプリや画面から動かすための「接続口・エンジン」のこと。OpenAI公式の機能で、実はVS Codeの拡張機能やCodexアプリも、この同じ仕組みで動いています。

野田さんはこれを使って、自作の「LP制作コックピット(管理画面)」から、Codexにこういう命令を出していると考えられます。

自作ツール vs あや式

野田さんの自作ツールあや式
仕組みCodex App Serverで専用画面を自作Claude Codeから codex exec を呼ぶ
必要なことプログラミングで画面を構築(JSON-RPC・SDK)「Codexで画像作って」と頼むだけ
成果画像生成→差込→公開ができる同じことができる
結論:専用画面そのものは開発者レベルの作り込みで、あやさんが同じものを作る必要はありません。やりたいこと(サブスク内で画像を量産して選ぶ→HTMLに差し込む→公開)は、あや式で全部できます。App Serverで自作UIを作るのは、ずっと先の「応用編」です。

7公開を自動化する(GitHub→Cloudflare)

野田さんが「ドミノみたいに」と言っていた部分です。プッシュしたら → GitHub Actionsが動いて → Cloudflareに公開、が勝手に進みます。あやさんは湘南ビジコンで wrangler pages deploy を使った経験があるので、地続きです。

仕組み(リポジトリごとに1回だけ設定)

道具役割
GitHub制作物の保管(プライベートリポジトリ)
GitHub Actionsプッシュを検知して自動で公開作業を起動する「引き金」
Cloudflare+Wrangler公開先。Wranglerを使えばCloudflareの画面を開かなくていい

設定の流れ

  1. LP用のGitHubリポジトリを用意する
  2. Cloudflareで「APIトークン」と「アカウントID」を取得する
  3. GitHubのリポジトリに、その2つを「シークレット」として登録する
    名前:CLOUDFLARE_API_TOKENCLOUDFLARE_ACCOUNT_ID
  4. リポジトリに自動公開の設定ファイルを置く(下記)

設定ファイル .github/workflows/deploy.yml の中身(Cloudflare公式の wrangler-action を使用):

on: [push]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy ./ --project-name=あなたのLP名
大事なポイント:この設定はリポジトリごとに必要です(GitHub Actionsは1つのリポジトリにつき1セット)。新しいLPを作るたびに、最初の1回だけこの設定をします。逆に言えば、一度設定したそのLPは、以降プッシュするだけで自動公開されます。
GitHubもCloudflareも、画面を開かなくていい:GitHub Actionsは gh コマンドから、Cloudflareは wrangler から操作できるので、Claude Code/Codexの中で完結します。

8チーム・合宿で伝えるときのコツ

熱海合宿(7/3-4)でCodexを紹介するときも、この順番で話すと伝わりやすいです。難しい単語より「何が嬉しいか」から。

  1. まず「嬉しいこと」から:画像もデザインもAIが作る/選ぶだけ/追加のお金がかからない
  2. たった3ステップだと見せる:このガイドの「全体像」の図をそのまま使う
  3. 一番ラクな入口を渡す:「Claude Codeに『Codexで画像作って』と言うだけ」(あや式)から始めてもらう
  4. 自動公開は応用:慣れてきたら GitHub→Cloudflare の自動化、という順で
合宿での見せ方おすすめ:その場で1枚、画像をCodexに作らせて見せると一番伝わります。「参考画像なしで、お願いするだけでデザインごと出てくる」インパクトが効きます。

9野田さんに確認したいこと

このガイドは確認できた事実で作っていますが、野田さん独自の作り込み部分は本人に聞くのが確実です。聞くとしたら、この3つ。

ここは正直に:この3つは野田さんの「秘伝のタレ」部分です。聞けたらこのガイドに追記します。聞けなくても、あや式で同じ成果は出せます。