Codex CLIで画像を27枚まとめて生成した全手順｜個人開発の画像調達を解決する

学習ゲームアプリに必要な画像27枚を、Codex CLIで一括生成しました。プロンプトの管理方法から、12MBを3.7MBに落とした圧縮まで、実際に動かした手順をそのまま公開します。

この記事でできるようになること

• Codex CLI で、アプリに必要な画像をまとめて生成できるようになる
• 画像プロンプトを1箇所で管理して、あとから何度でも作り直せる仕組みが作れる
• 生成した画像を、Webで実用的なサイズまで圧縮できる

個人開発でいちばん詰まるのが画像です。コードは書けても、27枚のゲーム用画像を自分で描くのは無理でした。外注すれば数万円かかります。そこをCodex CLIで解決した記録です。

前提

• 環境：macOS
• 必要なもの：Node.js、ChatGPTアカウント
• 実際にかかった時間：25枚の一括生成で43分30秒（2026-08-19実測。放置しているだけなので、拘束時間ではありません）
• 費用：ChatGPT Plus（月額20ドル／2026年8月時点。円での請求額は為替と消費税で変動します）

そもそも何を作っていたのか

中学生向けの学習ゲームアプリ「テストモンスターズ」です。数学・英語・理科の苦手分野を、3種類のゲームでつぶす作りにしました。

• 式ビルダー（数学／デッキ構築型）
• 英文の通路（英語／異変さがし型）
• 元素ドロップ（理科／マージ型）

ゲームである以上、カードやアイテムの絵が要ります。これが27枚。このアプリは依存パッケージゼロ・ビルド不要の素のHTML/CSS/JSで作っているので、画像だけが唯一の「自分で作れないもの」でした。

手順

1. Codex CLI を入れる

npm i -g @openai/codex

インストール後、ChatGPTアカウントでログインします。APIキーは不要で、ChatGPTのサブスクリプションで動きます。画像生成のためだけにAPIクレジットを買う必要がないのが、個人開発では効きます。

2. 「何の画像が要るか」を1つのファイルにまとめる

ここが一番大事な設計判断でした。

画像を1枚ずつその場で頼むと、あとで「あの絵だけ作り直したい」となったときに、どんな指示を出したか思い出せなくなります。そこで、必要な画像の一覧を1つのファイルに集約し、それを唯一の正としました。

js/data/manifest.js   ← 必要な画像の定義（ID・用途・説明）

3. 一覧からプロンプトを機械的に生成する

manifest を読んで、画像生成用のプロンプトを吐き出すスクリプトを用意します。

node tools/gen-image-prompts.mjs

これで次の2つが生成されます。

• CODEX_PROMPTS.md … 人間が読んで確認するためのプロンプト一覧
• assets/prompts.json … スクリプトが読む機械用の定義

手でプロンプトを書かないのがポイントです。 manifest を直せばプロンプトが自動で追従するので、画像とアプリの定義がズレません。

4. まとめて生成する

./tools/gen-images-with-codex.sh

27枚を一括で生成します。1枚だけ作り直したいときは、IDを指定します。

./tools/gen-images-with-codex.sh <id>

この「1枚だけ作り直せる」が実用上いちばん効きました。 27枚のうち気に入らない数枚を、全体に影響を出さずに差し替えられます。

5. 圧縮する

実行ログに残っている実測値はこうです。

=== 2026-08-19 10:36:51 開始：25枚 ===
=== 2026-08-19 11:20:21 終了 ===

25枚で43分30秒。 ただしこの間、こちらは何もしていません。コマンドを叩いて放置するだけです。イラストレーターに発注して納品を待つことを考えると、ここが個人開発では決定的でした。

生成直後の合計サイズは 12MB でした。このままWebに置くと、スマホ回線では話になりません。

python3 tools/optimize-images.py

結果、12MB → 3.7MB（約69%減）。見た目の劣化は、ゲーム内の表示サイズでは分かりませんでした。

つまずきやすい点

プロンプトを手書きすると必ず破綻する

最初は思いつきで1枚ずつ頼んでいました。10枚を超えたあたりで、絵柄がバラバラになっていることに気づきます。同じアプリの中で絵柄が揃っていないのは、素人が作った感が一気に出る一番の原因でした。

manifest から機械的にプロンプトを生成する方式に切り替えて解決しています。共通の絵柄指定を1箇所に書けば、全枚数に等しく効くからです。

1回目の実行は1分で落ちた

正直に書いておくと、最初の実行は失敗しています。

=== 2026-08-19 10:35:04 開始：26枚 ===
=== 2026-08-19 10:36:12 終了 ===

原因は jq: error (at assets/prompts.json:249): Cannot index string with string "id" でした。プロンプト定義のJSONの構造と、それを読む側の想定が噛み合っていなかったためです。同じエラーが20回出ていました。

ここで効いたのが、1枚ずつ別セッションで実行し、失敗しても他は続行するという作りにしていたことです。全部を1回のセッションで処理する作りにしていたら、途中で全滅していました。

1枚ずつ別セッションで呼ぶ。途中で失敗しても他は続く

スクリプトの冒頭にこのコメントを書いていたのですが、実際にその通りの事故が起きました。一括処理を書くときは「途中で1件失敗しても全体が死なない」形にしておくべきです。

圧縮を後回しにすると公開時に困る

Netlifyへのデプロイ自体は12MBでも通ります。ただしスマホでの初回表示が明確に遅くなりました。生成 → 圧縮までを1つの流れにしておくほうが、あとで一括処理するより楽です。

生成物の権利まわりは自分で確認が要る

商用利用の可否は、利用しているサービスの規約次第です。アプリを公開・収益化する予定があるなら、生成する前に規約を確認してください。 この記事は法的助言ではありません。

よくある質問

まとめ

個人開発の画像調達は、1枚ずつ頼む作業ではなく、一覧を管理する仕組みの問題でした。

• 必要な画像の定義を1ファイルに集約する
• そこからプロンプトを機械的に生成する
• 1枚単位で作り直せるようにする
• 生成と圧縮を一続きにする

この4つを最初に決めておけば、枚数が増えても破綻しません。実際に作ったアプリはテストモンスターズで公開しています。