Claude CodeとCodexでゲームを作る手順【2026年版】導入から公開まで

Claude CodeとCodexは、パソコンのフォルダの中で直接ファイルを作り、コマンドの実行や動作確認まで進めるエージェント型の開発ツールです。チャット画面からコードをコピーして貼り付ける作り方と比べると、複数のファイルに分かれたゲームでも途中で迷子になりにくくなります。

この記事では、Claude CodeとCodexでゲームを作る流れを最初から最後まで順番に説明します。扱う内容は2026年10月時点の料金とプラン、Windowsでの導入、計画ファイル（CLAUDE.md・AGENTS.md・PLAN.md）の書き方です。さらに最小版から機能を足す進め方とテスト、GitHub Pagesでの公開、両ツールの違いまでを1本にまとめました。

プログラミングの経験は少なくても構いません。ただし、ターミナルに数行のコマンドを打つ場面と、有料プランへの加入が前提になります。無料で試したい場合はChatGPTとGeminiでブラウザゲームを作る方法から始めると負担が少なく済みます。

この記事の目次

1. 01Claude CodeとCodexでゲームを作るとは
   1. チャット型との違い
   2. 向いている人と向いていない人
2. 02料金とプラン（2026年10月時点）
   1. Claude Codeが使えるプラン
   2. Codexが使えるプラン
3. 03導入の手順（Windows・Mac）
   1. 先に入れておくもの
   2. Claude Codeを入れる
   3. Codexを入れる
4. 04作る前に計画ファイルを用意する
   1. PLAN.mdにゲームの仕様を書く
   2. CLAUDE.mdとAGENTS.mdに作業のルールを書く
   3. プランモードで計画を確認してから進める
5. 05最小版を作り、1機能ずつ足していく
   1. 最初の指示の例
   2. 機能を足す順番
   3. うまくいかないときの伝え方
   4. 画像と音の素材を組み込む
6. 06テストで壊れていないか確かめる
   1. 手で遊んで確かめること
   2. Playwrightで自動確認する
7. 07GitHub Pagesで公開する
8. 08Claude CodeとCodexの比較
9. 09よくある質問
10. 10まとめ

Claude CodeとCodexでゲームを作るとは

Claude CodeはAnthropic、CodexはOpenAIが提供するツールです。どちらも指示を文章で受け取り、プロジェクトのフォルダを読んだうえで作業します。ファイルの作成と編集、コマンドの実行、エラーの修正までを続けて行うのが特徴です。

チャット型との違い

ChatGPTやGeminiのチャット画面でゲームを作る場合は、受け取ったコードを人がファイルに保存してブラウザで開きます。エラーが出たら、その文面をまたチャットに貼り直す流れです。ファイルが1つのうちはこの方法で十分です。画像や音のファイルが増え、コードが数千行になると、どのファイルのどこを直したのかを人が管理しきれなくなります。

エージェント型では、この管理をツール側が受け持ちます。フォルダ全体を読んでから修正するため、別のファイルとの食い違いに気づきやすいのも利点です。開発用サーバーの起動やテストの実行もツールが自分で行い、結果を見て次の修正に進みます。

比べる点	チャット型（ChatGPT・Gemini）	エージェント型（Claude Code・Codex）
作業する場所	ブラウザのチャット画面	パソコンのフォルダ（ターミナルやアプリ）
ファイルの保存	人がコピーして保存する	ツールが直接作成・編集する
エラーの確認	人がエラー文を貼って伝える	ツールがコマンドを実行して自分で読む
向いている規模	HTMLファイル1枚のミニゲーム	複数ファイル・素材・テストを含むゲーム
費用の目安	無料から試せる	月20ドル前後の有料プランが基本

向いている人と向いていない人

向いているのは、ミニゲームを1本作り終えて「次はステージやセーブ機能のある作品にしたい」と考えている人です。既存のゲームエンジンのスクリプトを書きたい人にも合います。

反対に、ターミナルを開くこと自体に抵抗がある場合は、最初の1本をチャット型で作ってから移るほうが挫折しにくくなります。どちらのツールにもデスクトップアプリがあり、ターミナルを使わずに操作することも可能です。

料金とプラン（2026年10月時点）

どちらも本体のインストールは無料です。使うには各社のアカウントと、ゲーム制作に足りる利用量のプランが必要になります。料金は2026年10月時点の公式ページの表示で、米ドル建てです。改定されることがあるため、加入前に公式ページで確認してください。

Claude Codeが使えるプラン

プラン	月額	Claude Code	補足
Free	0ドル	使えない	チャットだけ
Pro	20ドル（年払いは月17ドル）	使える	個人の入門用
Max	100ドルから	使える	利用量が大きい人向け
Team Standard	1人25ドル（年払いは20ドル）	使える	チーム向け

Claude Codeの公式ドキュメントでは、無料のclaude.aiプランにはClaude Codeが含まれないと明記されています。使えるモデルはプランによって異なり、OpusやSonnetなどを作業に応じて切り替えます。

Codexが使えるプラン

プラン	月額	Codexの扱い
Free	0ドル	デスクトップアプリで軽量モデルを試せる（順次提供）
Go	8ドル	Freeと同じく軽量モデルのみ（順次提供）
Plus	20ドル	Web・CLI・IDE拡張・iOSで使える
Pro	100ドル・200ドル・500ドル	Plusより利用量が大きい
Business	1人20ドル（年払い）	管理機能つきのチーム向け

Codexの料金ページによると、Plusでは5時間あたりの利用量の目安がモデルごとに示されています。上位モデルほど回数が少なくなる仕組みです。ゲームを本格的に作るなら、どちらのツールも月20ドルのプランが出発点になります。

導入の手順（Windows・Mac）

ここではWindowsを中心に、MacとLinuxのコマンドも併記します。Claude Codeの動作環境は、公式ドキュメントでWindows 10（1809以降）やmacOS 13以降、Ubuntu 20.04以降などとされています。メモリは4GB以上が必要です。

先に入れておくもの

• Git（Windowsでは「Git for Windows」。公開とバージョン管理に使う）
• Node.js（ViteやPlaywrightなど、ブラウザゲームの開発用ツールを動かすのに使う）
• GitHubのアカウント（GitHub Pagesでの公開に使う）
• VS Codeなどのエディター（必須ではないが、できたファイルを見るのに便利）

Claude Codeを入れる

Windowsでは、スタートメニューから「PowerShell」を開いて次のコマンドを貼り付けます。管理者として実行する必要はありません。

irm https://claude.ai/install.ps1 | iex

MacとLinuxではターミナルで次を実行します。

curl -fsSL https://claude.ai/install.sh | bash

インストールが終わったらターミナルを開き直し、claude --versionでバージョン番号が出るか確かめてください。ゲーム用のフォルダに移動してclaudeと打つと起動し、初回はブラウザでのログインを求められます。WinGetを使う場合はwinget install Anthropic.ClaudeCodeでも入りますが、この方法では自動更新されません。

Codexを入れる

Codexには、ChatGPTのデスクトップアプリから使う方法と、ターミナルで使うCLIがあります。CLIはnpmで入れられます。

npm install -g @openai/codex

MacとLinuxでは公式のインストーラーも使用可能です。

curl -fsSL https://chatgpt.com/codex/install.sh | sh

起動すると、ChatGPTのアカウントでサインインする画面が出ます。ゲーム制作用の公式プラグイン「Game Studio」を使う場合は、次のコマンドで追加します。追加したあとにCodexを再起動すると、指示の中で$game-studioと書いて呼び出せる仕組みです。

codex plugin add game-studio@openai-curated

Game Studioは2026年5月に公開されました。ViteとTypeScriptを基本に、2DならPhaser、3DならThree.jsを使う構成を前提にしています。

作る前に計画ファイルを用意する

エージェント型のツールは、指示があいまいでも何かしらのゲームを作り上げます。そのぶん、思っていたものと違う方向に進んでも途中で止まりません。手戻りを減らすには、コードを書かせる前に「何を作るか」と「どう作業するか」をファイルに書いておく方法が効きます。

PLAN.mdにゲームの仕様を書く

PLAN.mdは、そのゲームの設計書です。決まった書式はありませんが、次の項目があれば最小版を作るのに足ります。

• ゲームの目的（例: 落ちてくる星を拾って60秒でスコアを競う）
• 操作方法（例: 左右の矢印キーとスマホのタップ）
• 勝ち負けの条件（例: 爆弾に3回当たるとゲームオーバー）
• 画面の構成（タイトル、プレイ中、結果の3画面）
• マイルストーン（最小版・効果音・難易度の上昇・ランキングの順に作る）

この5項目を自分で埋めるのが難しいときは、ツールに相談しながら作らせても構いません。「落ちてくる物を拾うゲームを作りたい。まだコードは書かず、PLAN.mdを作って」と頼むと、項目を埋めた下書きが出てきます。中身を読んで直してから実装に進みます。

CLAUDE.mdとAGENTS.mdに作業のルールを書く

CLAUDE.mdはClaude Codeが、AGENTS.mdはCodexが、起動のたびに読み込む指示書です。ここにはゲームの中身ではなく、毎回守ってほしい作業のルールを書きます。

# 作業のルール
- 開発サーバーは npm run dev、テストは npm test で動かす
- 画像は assets/images、音は assets/audio に置く
- 1回の作業では1つの機能だけを変更する
- 変更したら npm test を実行し、通ってから終える
- 仕様は PLAN.md を正とする。仕様を変えるときは先に相談する

Claude Codeでは、起動後に/initと入力するとフォルダの中身を調べてCLAUDE.mdの下書きを作ります。公式ドキュメントが勧めるCLAUDE.mdの長さは200行以内です。長くなるほど読み込む量が増え、指示が守られにくくなるためです。

両方のツールを使い分ける場合は、ルールをAGENTS.mdにまとめておくと管理が楽になります。Claude CodeはCLAUDE.mdがないフォルダなら、AGENTS.mdを指示書として読む仕様です。CLAUDE.mdも置きたいときは、その1行目に@AGENTS.mdと書くと、AGENTS.mdの内容を取り込んだうえでClaude Code向けの追記ができます。

プランモードで計画を確認してから進める

Claude Codeには、ファイルを変更せずに計画だけを立てるプランモードがあります。Shiftキーを押しながらTabキーを押すと切り替わり、ツールは調べた結果と作業手順を示して止まります。手順を読み、問題がなければ実装を許可する流れです。Codexでも同じように「まだ実装しないで、手順だけ出して」と頼めば、計画の確認を挟めます。

最小版を作り、1機能ずつ足していく

最初から全部の機能を頼むと、どこで不具合が入ったのかが分からなくなります。遊べる最小の形を先に完成させ、そこへ機能を1つずつ足していくと失敗が少なくなります。

• STEP 1最小版動かして当たり判定まで
• STEP 2画面の流れタイトルと結果画面
• STEP 3素材画像と効果音を差し替え
• STEP 4調整難易度とスマホ操作
• STEP 5公開テストしてGitHub Pagesへ

最初の指示の例

PLAN.mdができていれば、最初の指示は短くて済みます。

PLAN.md のマイルストーン1だけを実装してください。
ViteとPhaserを使い、画像はまだ四角形と丸で代用してください。
左右キーで動くプレイヤー、上から落ちる星、当たったらスコアが1増える、
ここまでができたら npm run dev で起動できる状態にして止まってください。

「ここまでできたら止まって」と区切りを書いておくのがポイントです。区切りがないと、ツールは気を利かせて先の機能まで作り始めることがあります。

機能を足す順番

最小版がブラウザで動いたら、次の順に足していくと、壊れたときに原因を追いやすくなります。

1. ゲームの流れタイトル画面からプレイ、ゲームオーバー、リトライまでのつながりを作ります。
2. 難易度の変化時間とともに落下速度が上がる、爆弾が混ざるといった変化を加えましょう。
3. 見た目と音仮の図形を画像に、無音の状態を効果音つきに差し替えます。
4. スマホ対応タップ操作と画面サイズへの対応を入れます。
5. 記録ハイスコアをブラウザに保存すれば、ひとまず完成です。

1つ足すたびにブラウザで遊んで確かめ、問題がなければGitでコミットしておきます。後で不具合が出ても、コミットした地点まで戻せば遊べる状態に復帰できます。コミットもツールに「ここまでの変更をコミットして」と頼めば実行してくれます。

うまくいかないときの伝え方

不具合を伝えるときは、起きたことと期待していたことを並べて書きます。「動かない」だけでは、ツールは原因を推測で探すことになります。

• 悪い例: 「星が変です。直して」
• よい例: 「スコアが50を超えると星が画面の外に出て拾えなくなる。星は画面内に収まってほしい。原因を調べてから直して」

同じ不具合が2回直らないときは、一度会話を区切ってやり直すほうが早く片づく場合があります。Claude Codeで会話の履歴を消すコマンドは/clearです。その際、つまずいた点をCLAUDE.mdやAGENTS.mdに書き足しておくと、次の会話でも同じ失敗を避けやすくなります。

画像と音の素材を組み込む

最小版を四角形と丸で作っておくと、素材の差し替えは後からまとめて行えます。画像は透過PNG、アニメーションはスプライトシート、音はOGGかMP3にして決めたフォルダに置いておきます。置いたあとで「assets/imagesのplayer.pngをプレイヤーの画像に使って」と頼めば、読み込みのコードを書くのはツールの役目です。

Codexのgame-studioには、スプライトを用意する工程も含まれています。Claude Codeでは、外部のツールとつなぐMCPという仕組みを通じて、ドット絵生成のPixelLabなどを呼び出す使い方があります。素材ごとの作り方や商用利用の条件はゲーム素材をAIで作る方法で詳しく取り上げました。

テストで壊れていないか確かめる

機能を足すたびに全部を手で遊び直すのは大変です。手で確かめる項目と、自動で確かめる項目を分けておきます。

手で遊んで確かめること

• 操作したとおりにキャラが動くか、反応が遅れないか
• 難しすぎたり簡単すぎたりしないか
• スマホの縦画面と横画面で表示が崩れないか
• ゲームオーバーからリトライしたとき、スコアや速度が正しく戻るか

面白さと手ざわりは、人が遊ばないと分かりません。この部分はツールに任せず、自分の感想を言葉にして伝えます。

Playwrightで自動確認する

Playwrightは、ブラウザを自動で操作して画面の動きを確かめる無料のツールです。「Playwrightを入れて、ゲーム開始からスコア加算とゲームオーバーを経てリトライまでを確かめるテストを書いて」と頼みます。するとツールがテストの準備から実行まで進めてくれます。CodexのGame Studioは、Playwrightで画面を確認する工程を作業の流れに組み込んでいるのが特徴です。

テストの役目は、一度通った機能が後の変更で壊れていないかを見張ることです。CLAUDE.mdやAGENTS.mdに「変更したらテストを実行する」と書いておけば、機能を足すたびに自動で確認が走ります。

GitHub Pagesで公開する

完成したゲームは、GitHub Pagesを使うと無料で公開できます。ブラウザで動くゲームなら、URLを送るだけで誰でも遊べます。

1. ビルドの設定を確認するViteを使っている場合、公開用のファイルはnpm run buildでdistフォルダに出力されます。GitHub Pagesのアドレスはリポジトリ名の下の階層になるため、vite.config.tsのbaseをリポジトリ名に合わせる必要があります。ツールに「GitHub Pagesで公開するので、リポジトリ名に合わせてbaseを設定して」と頼めば直してくれます。
2. GitHubにリポジトリを作るGitHub CLIを入れていれば、ツールに頼んでリポジトリの作成からプッシュまで進められます。手で行う場合は、GitHubの画面で新しいリポジトリを作り、表示されたコマンドでプッシュします。
3. 公開の方法を選ぶリポジトリのSettingsからPagesを開きます。Viteでビルドする構成なら、GitHub Actionsでビルドして公開する方法を選ぶのが確実です。ワークフローのファイルはツールに作らせられます。
4. 公開されたURLで遊ぶ数分後に「ユーザー名.github.io/リポジトリ名」の形のURLで公開されます。スマホでも開き、操作と表示を確かめてください。

Claude CodeとCodexの比較

どちらもフォルダを読み、ファイルを編集し、コマンドを実行するという基本の動きは共通です。違いが出るのは主に料金体系、指示書の名前、ゲーム向けの機能の用意のされ方です。

比べる点	Claude Code	Codex
提供元	Anthropic	OpenAI
最低限のプラン	Pro（月20ドル）	Plus（月20ドル）。Free・Goは軽量モデルのみ
使う場所	ターミナル、デスクトップアプリ、VS Codeなど	ターミナル、ChatGPTデスクトップアプリ、WebやIDE拡張など
指示書	CLAUDE.md（AGENTS.mdも読める）	AGENTS.md
計画の確認	プランモードで実装前に止められる	指示で計画を先に出させる。Game StudioはPLAN.mdを使う流れ
ゲーム向けの機能	MCPで外部の素材生成ツールとつなぐ	公式プラグインGame Studio（Phaser・Three.js・Playwright・スプライト）
画像生成	本体にはないため外部ツールを使う	ChatGPTの画像生成と組み合わせやすい

迷った場合は、すでに契約しているほうから始めれば十分です。PLAN.mdとAGENTS.mdで仕様とルールをファイルに残しておけば、途中でもう一方のツールに切り替えても同じ前提で作業を続けられます。

よくある質問

まとめ

Claude CodeとCodexでゲームを作るときは、いきなり実装を頼まないことが肝心です。PLAN.mdで仕様を、CLAUDE.mdやAGENTS.mdで作業のルールを先に決めておくと手戻りが減ります。そのうえで最小版を作り、1機能ずつ足してはテストとコミットを繰り返します。完成したらGitHub Pagesで公開し、スマホでも遊べるか確かめれば一通りの工程は完了です。

ツール選びや素材作りも含めた全体像は、AIゲームの作り方完全ガイドで順番に整理しています。