1これで何ができるようになる？
ひとことで言うと ―
画像もデザインも全部AIに作らせて、自分は「気に入った1枚を選ぶ」だけ。
完成したらボタンひとつで世界に公開。しかも追加のお金（API課金）がかからない。
このガイドはCodexだけで完結します。Codexはそれ自体がAIエージェント（Claude Codeと同じ仲間）なので、「LPを作る」「画像を作る」「公開する」を全部Codexひとつでこなせます。Claude Codeは使いません。参考画像も要りません。「こんな感じ」とお願いするだけで、Codexがデザインも画像も作ってくれます。
野田さんは「エンジニア界で革命と言われている」「絶対使ってください」と話していました。やっていることは難しそうに聞こえますが、分解すると3つだけです。これからのワークショップも、このCodex中心のやり方で進めます。
2全体像 ― 制作から公開までのドミノ
野田さんの作業は、大きく「制作」と「公開」の2フェーズ。公開はドミノのように自動で進みます。
制作フェーズ（Codexに頼むだけ）
1. CodexにLPを作ってもらう
「こんなLP作って」とお願いするとHTMLができる
↓
2. Codexに画像を作ってもらう
4〜8枚出して、気に入った1枚を選ぶ→そのまま差し込み
公開フェーズ（これもCodexに「公開して」と頼むだけ）
3. GitHubにプッシュ
Codexがコマンドを実行（プライベートリポジトリで管理）
↓
4. GitHub Actionsが自動起動
最初に1回だけ設定すれば、あとは毎回自動
↓
5. Cloudflareに公開
Wrangler経由で、画面を開かずそのまま公開
ポイント：3〜5は全部Codexが代わりにコマンドを打ってくれます。あやさんやチームは「GitHubに上げて公開して」と日本語で頼むだけ。最初の1回だけ設定すれば、以降は「公開して」のひとことで世界に出ます。
3なぜCodex？ ― お金の話がいちばん大事
野田さんが何度も「Codexいいですよ」と言っていた一番の理由はコストです。多くのAIツールは画像を作るのに外部の画像API（従量課金）を繋ぐ必要があり、「生成するたびにお金が減っていく」状態になります。Codexはそこが違います。
| 画像の作り方 | コスト |
|---|
| 外部API接続タイプ |
画像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 # ログインできているか確認
5Codexだけで全部やる（基本の流れ）
これがワークショップの標準フローです。むずかしいコマンドを覚える必要はありません。Codexを起動して、あとは日本語でお願いするだけ。CodexがHTMLも画像も書いて、公開まで代わりにやってくれます。
はじめに一度だけ：Codexを起動する
LPを作りたいフォルダの中で、これを打つだけです。会話できる画面（エージェント）が立ち上がります。
codex
あとは下の1〜5を、ぜんぶこの会話の中で日本語で頼んでいきます。
1
LPの土台を作ってもらう
例：「女性起業家向けの〇〇のランディングページを1枚作って。ヒーロー／お悩み／解決／特徴／料金／お客様の声／お申込み の順で。やさしい雰囲気で、絵文字は使わないで。」
2
画像を作ってもらう（Codexの一番の強み）
例：「ヒーローの背景画像を作って。湘南の海とやわらかい朝の光。images/hero.png に保存して、HTMLにも入れて。」
気に入らなければ「もう4枚、ちがう雰囲気で」と頼めば、どんどん出してくれます。その中から好きな1枚を選ぶだけ。
3
できあがりを確認する
例：「プレビューを立ち上げて、ブラウザで見られるようにして。」Codexがローカルサーバーを立ててくれるので、その場で完成形を確認できます。
4
直したいところを伝える
例：「料金の文字をもう少し大きく」「お客様の声を3人に増やして」。見ながら何度でも頼めます。
5
公開してもらう
例：「GitHubに上げて、Cloudflareに公開して。」最初の1回だけ設定（次の章）をすれば、以降は「公開して」だけで世界に出ます。
画像をうまく出すコツ：お願いの文に $imagegen と付けると、Codexの画像生成スキルが確実に動きます（例：「設定画面のバナーを作って $imagegen」）。保存場所は文中で images/〇〇.png のように指定すると、そのままLPのフォルダに入ります。
もっと簡単な道もあります：Codexのアプリ版（デスクトップ）には「Sites」という機能があり、Webサイトを作ってそのまま公開までできます。ターミナルが苦手な方には、こちらをワークショップで案内するのも手です。
6【発展】野田さんの自作コックピット
ここは「もっと先を知りたい人向け」です。第5章のCodex単体でやりたいことは全部できるので、最初は読み飛ばしてOK。野田さんは文字起こしで「サイドバーの中で画像を並列生成して、ポチポチ選ぶ」専用画面を自作していました。その正体の話です。
「コデックスアップサーバー」の正体 ＝ Codex App Server
文字起こしの「コデックスアップサーバー」は、正式には Codex App Server です。Codex本体（頭脳）を、自分で作ったアプリや画面から動かすための「接続口・エンジン」のこと。OpenAI公式の機能で、実はVS Codeの拡張機能やCodexアプリも、この同じ仕組みで動いています。
野田さんはこれを使って、自作の「LP制作コックピット（管理画面）」から、Codexにこういう命令を出していると考えられます。
- このセクションの画像を作って（4〜8枚いっぺんに）
- 選んだ画像をここに入れて
- コードを書き換えて
- デプロイして
基本（第5章） vs 自作コックピット
| 基本：Codex単体（第5章） | 発展：自作コックピット |
|---|
| やり方 | Codexに日本語で頼むだけ | Codex App Serverで専用画面を自作 |
| 必要なこと | とくになし（会話するだけ） | プログラミング（JSON-RPC・SDK） |
| 画像を一気に出す | 「4枚出して」と頼めばOK | ボタンひとつで本当に同時並列 |
| 成果（作る→画像→公開） | できる | できる（速さと使い勝手が上） |
結論：専用画面そのものは開発者レベルの作り込みです。同じものを作る必要はありません。第5章のCodex単体で、やりたいことは全部できます。自作コックピットは「もっと速く・もっと快適に」を目指すときの応用編です。
参考：Claude Codeから呼ぶ別ルート
すでにClaude Codeを使い慣れている人は、Claude Codeの中から codex exec "画像を作って ./images/hero.png に保存" でCodexの画像生成だけ借りることもできます。ワークショップでは基本（Codex単体）を案内し、これは「Claude Code派の小ワザ」として補足する程度でOKです。
7公開を自動化する（GitHub→Cloudflare）
野田さんが「ドミノみたいに」と言っていた部分です。プッシュしたら → GitHub Actionsが動いて → Cloudflareに公開、が勝手に進みます。あやさんは湘南ビジコンで wrangler pages deploy を使った経験があるので、地続きです。
仕組み（リポジトリごとに1回だけ設定）
| 道具 | 役割 |
|---|
| GitHub | 制作物の保管（プライベートリポジトリ） |
| GitHub Actions | プッシュを検知して自動で公開作業を起動する「引き金」 |
| Cloudflare＋Wrangler | 公開先。Wranglerを使えばCloudflareの画面を開かなくていい |
設定の流れ
- LP用のGitHubリポジトリを用意する
- Cloudflareで「APIトークン」と「アカウントID」を取得する
- GitHubのリポジトリに、その2つを「シークレット」として登録する
名前：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名
大事なポイント：この設定はリポジトリごとに必要です（GitHub Actionsは1つのリポジトリにつき1セット）。新しいLPを作るたびに、最初の1回だけこの設定をします。逆に言えば、一度設定したそのLPは、以降プッシュするだけで自動公開されます。
GitHubもCloudflareも、画面を開かなくていい：GitHub Actionsは gh コマンドから、Cloudflareは wrangler から操作できるので、Claude Code／Codexの中で完結します。
8チーム・合宿で伝えるときのコツ
熱海合宿（7/3-4）でCodexを紹介するときも、この順番で話すと伝わりやすいです。難しい単語より「何が嬉しいか」から。
- まず「嬉しいこと」から：画像もデザインもAIが作る／選ぶだけ／追加のお金がかからない
- たった3ステップだと見せる：このガイドの「全体像」の図をそのまま使う
- 一番ラクな入口を渡す：「
codex と打って、あとは日本語でお願いするだけ」（第5章の基本フロー）から始めてもらう
- 自動公開は応用：慣れてきたら GitHub→Cloudflare の自動化、という順で。ターミナルが苦手な人にはCodexアプリの「Sites」も案内
合宿での見せ方おすすめ：その場で1枚、画像をCodexに作らせて見せると一番伝わります。「参考画像なしで、お願いするだけでデザインごと出てくる」インパクトが効きます。
9野田さんに確認したいこと
このガイドは確認できた事実で作っていますが、野田さん独自の作り込み部分は本人に聞くのが確実です。聞くとしたら、この3つ。
- 並列生成の「サイドバー画面」は何で作った？ ― 自作ツール？それとも既存のCodex機能の組み合わせ？
- 1セクション4〜8枚を一気に出すのは、どういう頼み方・設定でやっている？
- 気に入った画像を選んだら自動でデプロイまで繋がる仕組みは、どう組んでいる？
ここは正直に：この3つは野田さんの「秘伝のタレ」部分（発展編）です。聞けたらこのガイドに追記します。聞けなくても、第5章のCodex単体で同じ成果は出せます。