Claude Codeで開発するゲームの内容と使用ツール
この記事で開発するのは、Webブラウザで遊べる横スクロールゲームです。
横スクロールゲームとは、キャラクターが左から右に進みながら、ゴールを目指す形式のゲームを指します。
なお、この記事はpaizaラーニングの「バイブコーディング入門 Claude Code編4: 横スクロールゲームを作成しよう」で学べる内容をまとめたものです。動画とあわせて学ぶことで、より理解が深まります。
まだ環境構築（VS CodeやClaude Codeのインストール・ログイン）が済んでいない方は、まずバイブコーディング入門を見て、環境構築をしておきましょう。
【paizaラーニングの関連講座】
バイブコーディング入門 Claude Code編1: ダッシュボードアプリを作成しよう
【関連】Claude Codeとは？できること・使い方・料金まで初心者向けにやさしく解説
【関連】Claude CodeをVSCodeで使うには？導入から設定・連携まで初心者向けに丁寧に解説
ゲームの概要
今回開発するゲームは、「主人公のpaizaくんが仕様書を集めて、ビルにいるエンジニアに届ける横スクロールゲーム」です。
paizaくんは、画面の中を歩いたりジャンプしたりしながら、道に落ちている仕様書を拾っていきます。そして最終的にビルへ到達すると、ゲームクリアになります。ゲーム開発と聞くと、難しそうだと思うかもしれません。しかし、バイブコーディングを使えば、初心者でもこのくらいシンプルなゲームならすぐに作れます。
使う言語はJavaScript
今回のゲーム開発では、Webブラウザ上で動くJavaScriptというプログラミング言語を使います。ここまでのバイブコーディング入門ではPythonを使ってきましたが、JavaScriptは、よりゲーム開発に適した言語です。
JavaScriptは、多くのWebサイトで使われている人気の言語で、Webブラウザさえあれば動かせるというメリットがあります。JavaScriptで作ったゲームは、特別なソフトなどをインストールしなくても、ブラウザからURLにアクセスするだけで遊べます。また今回のゲームも、ツールはVS CodeとClaude Codeだけで開発できます。
ゲームエンジンではなくJavaScriptを選ぶ理由
初心者がゲーム開発を始めるなら、ゲームエンジンよりもJavaScriptのほうが取り組みやすいでしょう。ゲームエンジンは高機能ですが、学習コストが高くバイブコーディングとの相性にも課題があります。
一般的にゲーム開発では、UnityやUnreal Engineといったゲームエンジン（ゲーム開発に必要な機能が一通り揃った開発ツール）が使われています。Unityは、スマホからコンシューマーゲームの開発まで幅広く使われ、日本語の情報も豊富です。また、Unreal Engineはリアルな3Dグラフィックが得意で、実務でもよく使われています。
ただし、こうしたゲームエンジンを使いこなすには覚えることが非常に多くあります。また、専用ツール上でのGUI操作が必要な場面も多いため、現時点ではバイブコーディングとの相性が良いとは言えません。
そのため今回は、初心者でも取り組みやすいJavaScriptを使います。もちろん、ゲームの内容によってはゲームエンジンのほうが向いている場合もあります。ゲーム開発に慣れてきたら、AIと相談しながら使うツールを決めるのがおすすめです。
Claude Codeで作るゲームの設計と「仕様駆動」の開発手順
まずはゲームを開発する前に、登場する要素と開発の進め方を整理しておくことが重要です。
いきなりコードを書き始めるのではなく、先に仕様をまとめておくと、AIへの指示がぶれにくくなります。
ここでは、ゲームの構成要素と、「READMEを先に書く」という開発サイクルを解説します。
ゲームの構成要素を先に整理する
今回のゲームは、5種類のゲームオブジェクトと、3つのゲーム状態で構成していきます。
先にこうした構成要素を洗い出しておくと、AIに指示を出すときの仕様がぶれにくくなります。
画面上に登場するゲームオブジェクトは、次の5種類です。
- プレイヤー：ユーザーが操作する対象。左右に動いたりジャンプしたりする（今回はpaizaくん）
- ステージ：足場や穴を配置する。足場を歩いたり、穴をジャンプで避けたりする
- 敵キャラ：今回は虫。横から当たるとダメージ、上から踏むと倒せる
- アイテム：仕様書（スコア加算）、時計（経過時間を回復）、エナジードリンク（ダメージを回復）の3種類
- ゴール：エンジニアがいるビル。到達するとゲームクリア
さらに、ゲームの進行を管理するゲーム状態を3つ用意します。
- 残り時間：開始から1分以内にゴールしないとゲームオーバー（緊張感を生む）
- ライフ：3回ダメージを受けると0になりゲームオーバー
- スコア：取得した仕様書の数に応じて加算され、クリア時のランクに反映される
READMEに仕様を書いてから作る
今回の開発で最も大事なのが、「仕様を決めて先にREADMEを書く」という手順です。READMEを先に固めることで、AIが作るゲームと自分のイメージのズレを防げます。
READMEとは、プロジェクトの概要や仕様を記載しておくMarkdownファイルのことです。今回はこれを、「作りたいゲームの仕様をAIと一緒に整理するためのドキュメント」として使います。
バイブコーディングは、ゼロの状態から「一度の指示で全部を完成させられる」わけではありません。特に、ゲームは画面上の動きや内部処理が複雑になりやすく、一度に全機能を作らせると、思った通りに動かないことが多くあります。そのため、今回は「シンプルなゲームを作ってから、少しずつ要素を追加する」形式で進め、ステップごとに以下のサイクルを繰り返します。
- 仕様を決めて、まずREADMEだけを作らせる
- READMEの内容を確認し、イメージと違えば修正させる
- READMEに沿ってコードを書かせる
- 動作確認をして、違う場合はコードとREADMEを修正させる
このサイクルを回すことで、AIとイメージを揃えながら安定して開発を進められます。
ゲームの「面白さ」はAI任せにできない
AIの力だけで、人がプレイして「面白い」と感じるゲームを完璧に作れるわけではありません。特に、ゲームの面白さを左右する難易度は、人間の調整が必要となります。
今回のゲームで言えば、敵や穴の数・配置などが難易度にあたります。簡単すぎてもつまらないし、難しすぎても挫折してしまうため、絶妙なバランスが必要です。この調整をAIにすべて任せると、難しくなりすぎたり、逆に簡単になりすぎたりといったことが起こります。人間が遊んで「面白い」と思えるゲームを作るには、最終的に人間がプレイしながら調整する必要があります。
Claude Codeでゲーム開発をする事前準備（素材とプロジェクトの用意）
ゲーム開発を始める前に、画像や音の素材と、プロジェクトフォルダを用意しておきましょう。素材があらかじめ整理されていると、AIがそれを認識してコードに組み込みやすくなります。ここでは、素材の入手からClaude Codeの起動までを準備します。
使用する画像・音の素材を用意する
今回は、Kenneyの「New Platformer Pack」と、paizaのオリジナル素材を使います。どちらも、横スクロールゲームを作るのに必要な素材が揃っています。
Kenneyは無料のゲーム素材を公開しているサイトで、「New Platformer Pack」には横スクロールゲーム向けの素材が一通り含まれています。
また、今回のゲーム設定に合わせたpaizaオリジナルの素材は、無料で公開しています。ぜひダウンロードして使ってみてください。
もちろん、別の素材や自作の素材を使っても構いません。ただし、ネットで公開されているもの・購入したもの・誰かが作ったものは、使用条件をよく確認してから使うようにしましょう。
プロジェクトフォルダとassetsを準備する
プロジェクトフォルダを作り、その中に素材を種類ごとに整理したassetsフォルダを用意します。フォルダ構成を分かりやすくしておくと、その後の開発がスムーズにできます。
まず「side-scroll-game」というプロジェクトフォルダを作成し、VS Codeで開きます。次に、その中に「assets」フォルダを作り、画像を入れる「images」と音を入れる「audios」に分けます。
Kenneyの「New Platformer Pack」には、「Sprites」（個別の画像が1枚ずつ入ったフォルダ）などがあります。今回は、初心者でも扱いやすいこの「Sprites」の中身を「assets/images」に入れます。また、paizaオリジナルの画像素材も種類ごとにここへ入れます。
音については、Kenneyの音素材を「audios/SE」に、paizaオリジナルの音素材は使うシーンごとの名前をつけたフォルダに入れておきます。
Claude Codeは、フォルダ名やファイル名を見て素材の中身を判断します。そのため、名前は意味のあるものにしておくのがおすすめです。
Claude Codeを起動する
準備ができたら、VS CodeでClaude Codeを起動します。これで開発を始める環境が整います。
VS Codeで「side-scroll-game」フォルダを開いた状態で、右上のClaude Codeのマークをクリックして、Claude Codeを起動します。
最低限の横スクロールゲームを作る
まずは機能を盛り込まず、最低限の横スクロールゲームを作ります。READMEに仕様を書いてからコードを書くという手順で進めましょう。ここでは、「READMEを作る→確認・修正→コード化→動作確認」という一連の流れを体験します。
まずはREADMEだけを作らせる
最初のポイントは、コードを書かせる前にREADMEだけを作らせることです。いきなりコードから書き始めるのを防ぎ、仕様を先に固めるためです。
Claude Codeに、次のように指示を出します。
JavaScriptを使ってWebブラウザで遊べる横スクロールゲームを作りたいです。
ゲームの仕様。
プレイヤーは左右に歩く、ジャンプする、敵を踏んで倒す、という操作ができる。
穴に落ちるとゲームオーバー。
敵に横から当たるとゲームオーバー。
ゴールに到達するとゲームクリア。
ゴールに到達するのに1分程度で終わる短いステージ。
assetsフォルダの中に画像素材が入っているのでそれを使います。
コードは書かずに、まずはREADME.mdだけを作成してください。最後の、「コードは書かずに、まずはREADME.mdだけを作成してください」という一文が重要です。
しばらく待つと、ゲーム概要・操作方法・ルール・ファイル構成・使用する素材・ステージ設計・実装方針などが書かれたREADME.mdが作成されます。
READMEを確認・修正する
この段階で、「READMEが自分のイメージと合っているか」を確認します。コードを書く前に仕様を固めておくことで、あとから大きく書き直す手間を減らせます。
イメージと違うところがあれば、具体的に修正を指示しましょう。たとえば、画面サイズを指定したい場合は、次のように伝えます。
ゲームの画面のサイズは800×500ピクセルにしてください。READMEに沿ってコードを作り、動かしてみる
READMEが固まったら、それに沿ってコードを書かせて、ブラウザで動作を確認します。これで、まずは動く土台が完成します。
次のように指示を出します。
README.mdに書かれている仕様に沿ってコードを作成してください。しばらく待つと、HTML・CSS・JavaScriptのファイルが作成されます。なお、JavaScriptの外部ライブラリは攻撃の起点になるケースがあるため、外部ライブラリを使うコードが生成された場合は、内容に注意して使ってください。
動作確認をするには、VS Codeでindex.htmlファイルを選択し、右クリックから「パスのコピー」を押します。そのパスをブラウザのURL欄に貼り付けてEnterを押すと、ゲームのスタート画面が表示されます。
Enterキーでスタートし、スペースキーでジャンプ、矢印キーでpaizaくんを左右に動かせるようにします。虫を踏むと倒せて、ゴールに到達すると「ゲームクリア」と表示されます。もしREADMEに書いた内容と違う動きをしていたら、AIに指示を出して修正してもらいましょう。
Claude Codeで機能を追加してゲームを仕上げる
土台ができたら、機能をひとつずつ追加してゲームを仕上げていきます。追加のたびに「READMEを修正→コードに反映→動作確認」というサイクルを繰り返すのが基本です。ここでは、ゲームオーバー条件・アイテム・ランク・音の4つを順番に追加します。
ゲームオーバー条件を追加する
まずは、制限時間とライフによるゲームオーバー条件を追加します。これまでと同じく。READMEの修正から始めましょう。
ゲームオーバーの条件を追加したいです。
【ゲームオーバー条件】
制限時間を1分に設定して、時間を超過するとゲームオーバー。
敵に横から当たると1ダメージ受けて、合計3回ダメージを受けるとゲームオーバー。
まずはコードは書かずに、README.mdの修正だけ行ってください。READMEの修正を確認したら、コードに反映します。
修正したREADME.mdに沿って、ゲームのコードを修正してください。動かすと、画面上部に残り時間とライフが表示されます。さらに、ライフ表示をハートの画像に変えてみましょう。
残りのライフの表示をheart.pngとheart_empty.pngの画像を使って表現してください。
アイテムと取得エフェクトを追加する
次に、3種類のアイテムと取得時のエフェクトを追加します。アイテムに反応があると、取得できたことが分かりやすくなります。
まずは、READMEを修正します。
アイテムを追加したいです。
【アイテム】
仕様書を配置して、取得するとスコアが10点追加される。
時計を配置して、取得すると経過時間が1秒分回復する。
エナジードリンクを配置して、取得するとダメージが1回分回復する。
まずはコードは書かずに、README.mdの修正だけ行ってください。確認したら、コードに反映します。
修正したREADME.mdに沿って、ゲームのコードを修正してください。さらに、取得時に効果が分かるようエフェクトを追加します。
アイテムを取得したタイミングで、時計の場合は「+1秒」、エナジードリンクの場合は「+1（ハートの画像）」、仕様書の場合は「+10点」というテキストと画像がふわっと浮かび上がって消えるエフェクトを表示してください。
ここで大事なのが、画面上の動きと内部の処理の両方を確認することです。仕様書を3つ取ったらスコアが30点になっているか、経過時間が実際の時刻と同じ進み方をしているかなど、内部的な処理もあわせて確認しておきましょう。
クリア後のランクを追加する
ゲームクリア後に、スコアと経過時間に応じたランクを表示させます。ただし、この評価部分は一度の指示で納得感のあるものにするのが難しく、人による調整が前提になります。
まずは、READMEを修正します。
ゲームクリア後に表示されるランクを追加したいです。
ランク。
スコアと経過時間に応じてランク（S、A、B、C）を決定する。
スコアが高くて残り時間が多いほど、高いランクになる。
まずはコードは書かずに、READMEの修正だけ行ってください。確認したら、コードに反映します。
修正したREADMEに沿って、ゲームのコードを修正してください。動かしてゴールに到達すると、ランクが表示されます。前半で触れた「難易度はAI任せにできない」という話は、まさにこの部分に当てはまります。何度もプレイして、ランクの計算方法はこれでよいか、敵キャラや足場・穴を工夫してステージの難易度を上げるべきか、自分の手で調整してみてください。
BGM・効果音・ジングルを追加する
最後に、BGM・効果音・ジングルの3種類の音を追加します。音が入ると、ゲームの臨場感が一気に増します。
それぞれの役割は、BGMがプレイ中ずっと流れる音楽、効果音（SE）がジャンプやアイテム取得など特定のアクションに合わせて鳴る短い音、ジングルがクリアやゲームオーバーなど場面の区切りに流れる短い音楽です。これまでと同様に、READMEを修正しましょう。
ゲームに以下の音響機能を追加したいです。
BGM。スタートボタンを押した瞬間にBGMを再生。ゲームクリアとゲームオーバーにBGMを停止。
効果音。ジャンプした時、敵を倒した時、ダメージを受けた時、アイテムを取得した時、ゴールに到達した時。
ジングル。ゲームオーバー時、ゲームクリア時。
assetsフォルダの中に音の素材が入っているのでそれを使います。
まずはコードは書かずに、READMEの修正だけ行ってください。確認したら、コードに反映します。
修正したREADMEに沿って、ゲームのコードを修正してください。動かすと、スタート時にBGMが流れ、アクションに応じて効果音が鳴り、終了時にはジングルが流れます。これで、ゲームの基本的な機能が完成しました。
Claude Codeで開発したゲームをNetlifyで公開する
完成したゲームは、Netlifyを使えば無料でインターネット上に公開できます。公開すると、自分が作ったゲームでほかの人たちに遊んでもらえます。ここでは、アカウント作成から公開、動作確認までの手順を紹介します。
Netlifyは、HTML・CSS・JavaScriptで作ったWebサイトを無料で簡単に公開できるサービスで、今回のようなシンプルなゲームの公開に適しています。
Netlifyのアカウントを作成する
まずは、Netlifyの公式サイトでアカウントを作成します。GoogleアカウントやGitHubアカウントなど、好きな方法でサインアップできます。
Netlifyの公式サイトを開き、右上の「Sign up」ボタンから、案内に沿って好きな方法でサインアップしてください。サインアップ後は、名前や利用目的などの初期設定を入力する画面が表示されるので、案内に従って進め、最後にデプロイ画面へ進みます。
フォルダをアップロードして公開する
プロジェクトフォルダを丸ごとアップロードすると、自動でゲームが公開されます。アップロード前に、余計なファイルが含まれていないかを確認するのが重要です。
デプロイ画面で、ここまで作った「side-scroll-game」フォルダを丸ごとドラッグ＆ドロップして、アップロードします。
このとき、フォルダの中に個人情報や認証情報（APIキーの値が書かれたファイルなど）が含まれていないかを必ず確認し、含まれている場合はアップロード対象から除外してください。
しばらく待つとデプロイが完了し、ランダムな公開URLが発行されます。表示されたリンクをクリックすると、ネット上に公開された自分のゲームが表示されます。
ほかのPCから動作を確認する
公開URLは、ほかのPCからもアクセスして遊べます。自分のPC以外の環境でも、動くことを確認しておきましょう。
公開URLを別のPCで開くと、そこでもゲームが表示され、遊べることが確認できます。このURLをSNSなどで共有すれば、世界中の人たちに自分の作ったゲームで遊んでもらえます。これでゲームの公開も完了です。
Claude Codeでのゲーム開発についてよくある質問
Q.JavaScriptを触ったことがなくても、ゲームを作れますか？
A.作れます。バイブコーディングは、日本語で指示を出すだけでAIがコードを書いてくれるため、JavaScriptの知識がなくてもゲーム開発を始められます。ただし、思った通りに動かないときの修正では、JavaScriptの基礎知識があるとよりスムーズにできます。
Q.素材は、Kenneyやpaizaのものを必ず使わないといけませんか？
A.別の素材や自作の素材を使っても問題ありません。ただし、ネットで公開されているもの・購入したもの・誰かが作ったものを使う場合は、必ず使用条件を確認してから使うようにしましょう。
Q.AIが外部ライブラリを使ったコードを使うときは、どうすればいいですか？
A.JavaScriptの外部ライブラリは、攻撃の起点となってしまうケースがあります。外部ライブラリを使うコードが生成された場合は、そのライブラリの内容を確認し、注意して使うようにしてください。
Q.ゲームが思った通りに動かないときは、どうすればいいですか？
A.READMEに書いた仕様と実際の動きを見比べ、違う点をAIに具体的に伝えて修正してもらいましょう。画面上の見た目だけでなく、スコアの加算や時間の進み方といった、内部処理が合っているかも確認するようにしてください。
Q.作ったゲームの公開は、Netlify以外でもできますか？また、スマホでも遊べますか？
A.Netlify以外のホスティングサービスでも公開できます。また、公開URLはスマートフォンやほかのPCからもアクセスでき、そのまま遊べます。
Q.Claude Code以外のAIエージェントでもゲームは作れますか？
A.作れます。今回はClaude Codeを使いましたが、ほかのAIエージェントでも、同様の手順でゲーム開発を進められます。
まとめ
今回は、Claude Codeを使って横スクロールゲームを作り、インターネット上に公開するまでの手順を解説しました。
本記事のポイントは以下の通りです。
- ゲーム開発でも一度に全部を作らせず、シンプルな土台から少しずつ機能を追加していくことで、思い通りに動かないリスクを抑えられる
- 機能追加のたびに「READMEを修正→コードに反映→動作確認」のサイクルを回すと、AIとイメージを揃えながら安定して開発できる
- ゲームの面白さを決める難易度やランクの調整は、AIに任せきりにせず最後は自分でプレイしながら整えるのが、完成度を高めるコツ
- 画面上の見た目だけでなく、スコアや時間などの内部処理も確認することで、バグの少ないゲームに仕上がる
- 完成したゲームはNetlifyなどで無料公開でき、スマホやほかのPCからも遊んでもらえる
今回使ったpaizaオリジナル素材は、誰でも無料で使える状態で公開しています。この記事では使っていない素材もあるので、ぜひダウンロードして自分のゲーム開発に使ってみてください。また、作ったゲームを公開したら、ぜひSNSで「#paizaでバイブコーディング」のハッシュタグをつけて投稿してみてください。
なおpaizaラーニングでは、Claude Codeの使い方やJavaScriptなどのプログラミング言語が学べる動画講座を公開しています。興味がある方はぜひチェックしてください。
【paizaラーニングの関連講座】
バイブコーディング入門 Claude Code編
新・JavaScript入門編
【プログラミング問題を解いて力試し】