野田さんの方法を読み解いて、チームでも使える形にまとめました
ひとことで言うと ―
これまであやさんがClaude Codeで作っていたLPは、画像を別で用意する必要がありました。Codexを使うと、その画像づくりまでAIの中で完結します。参考画像も要りません。「こんな感じ」とお願いするだけで、Codexがデザインごと作ってくれます。
野田さんは「エンジニア界で革命と言われている」「絶対使ってください」と話していました。やっていることは難しそうに聞こえますが、分解すると3つだけです。
野田さんの作業は、大きく「制作」と「公開」の2フェーズ。公開はドミノのように自動で進みます。
野田さんが何度も「Codexいいですよ」と言っていた一番の理由はコストです。Claude Code単体では画像が作れず、外部の画像API(ChatGPTなどの有料API)を繋ぐ必要があります。これが「生成するたびにお金が減っていく」状態を生みます。
| 画像の作り方 | コスト | |
|---|---|---|
| Claude Code単体 | 自力では作れない。外部の画像APIを繋ぐ必要がある | 従量課金 作るたびにお金が減る |
| Codex | 画像生成が標準で入っている(gpt-image-2) | サブスク内 追加課金なし |
あやさんはCodexがもう入っているので、ここは確認だけで大丈夫です。チームメンバーに伝えるときの手順としてまとめます。
npm i -g @openai/codex
codex login
codex login status # ログインできているか確認
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へ差し込んでもらえば完成です。
野田さんはClaude CodeではなくCodexを主役にして、さらに作り込んでいます。文字起こしで話していた「サイドバーの中で画像を並列生成して、ポチポチ選ぶ」仕組みです。
| 野田さんが言っていたこと | その正体 |
|---|---|
| サブスク内で画像が作れる | 確認済 Codex標準の画像生成機能 |
| 「コデックスアップサーバー」を埋め込む | 確認済 Codex App Server(OpenAI公式機能) |
| サイドバーの画面でポチッと押すと内部で動く | 自作 App Serverを心臓にした野田さんの自作画面 |
| 4〜8枚を同時に並列生成して選ぶ | 自作寄り 自作画面からCodexに繰り返し生成させる作り込み |
| HTMLを見ながら画像を差し込み、デプロイ | 再現可 あや式(前章)でも同じことができる |
文字起こしの「コデックスアップサーバー」は、正式には Codex App Server です。Codex本体(頭脳)を、自分で作ったアプリや画面から動かすための「接続口・エンジン」のこと。OpenAI公式の機能で、実はVS Codeの拡張機能やCodexアプリも、この同じ仕組みで動いています。
野田さんはこれを使って、自作の「LP制作コックピット(管理画面)」から、Codexにこういう命令を出していると考えられます。
| 野田さんの自作ツール | あや式 | |
|---|---|---|
| 仕組み | Codex App Serverで専用画面を自作 | Claude Codeから codex exec を呼ぶ |
| 必要なこと | プログラミングで画面を構築(JSON-RPC・SDK) | 「Codexで画像作って」と頼むだけ |
| 成果 | 画像生成→差込→公開ができる | 同じことができる |
野田さんが「ドミノみたいに」と言っていた部分です。プッシュしたら → GitHub Actionsが動いて → Cloudflareに公開、が勝手に進みます。あやさんは湘南ビジコンで wrangler pages deploy を使った経験があるので、地続きです。
| 道具 | 役割 |
|---|---|
| GitHub | 制作物の保管(プライベートリポジトリ) |
| GitHub Actions | プッシュを検知して自動で公開作業を起動する「引き金」 |
| Cloudflare+Wrangler | 公開先。Wranglerを使えばCloudflareの画面を開かなくていい |
CLOUDFLARE_API_TOKEN と CLOUDFLARE_ACCOUNT_ID設定ファイル .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名
gh コマンドから、Cloudflareは wrangler から操作できるので、Claude Code/Codexの中で完結します。
熱海合宿(7/3-4)でCodexを紹介するときも、この順番で話すと伝わりやすいです。難しい単語より「何が嬉しいか」から。
このガイドは確認できた事実で作っていますが、野田さん独自の作り込み部分は本人に聞くのが確実です。聞くとしたら、この3つ。