1
全体像:実はゲームが一番ワクワクする入門
ゲームは結果がすぐ目に見えるので一番楽しく学べます。キャラが動き点が上がるのを見ると止まりません。
ブラウザで動くゲームを作ります。ダウンロードもアプリストアも不要、リンクを送れば友だちがすぐ遊べます。道具は軽くて速い Vite を使います。
ヒント
最初のゲームは「ジャンプで障害物を避ける」「落ちてくる物を受ける」のように一行で説明できるものを。単純なほど完成します。
無料 · 基礎
ゲームを作る
ブラウザですぐ動くゲームを、話すだけで作る
約35分9ステップ
完成すると手に入るもの
リンクを送れば誰でも遊べる自分のブラウザゲーム
必要なもの
Claude Pro 以上のプラン必須
バイブコーディングの頭脳です。まずは Claude Pro($20/月)で十分始められます。毎日たくさん作るなら Max プランが余裕があります。無料プランでも体験はできますが、すぐに上限に達します。
パソコン(Windows か Mac)必須
スペックはほとんど関係ありません。ネットにつながるノートパソコンで十分です。
Node.js(LTS 版)必須
コードを動かすエンジンです。nodejs.org で「LTS」と書かれた安定版を入れます。インストールはステップ1で一緒に行います。
VS Code(Visual Studio Code)必須
無料のコードエディタです。ここに Claude Code 拡張を入れて「AI と話しながらコーディング」します。Microsoft の Visual Studio(別の重い IDE)とは違うので名前に注意してください。
2
ステップ1, Node.js をインストールして確認
nodejs.org で「LTS」版を入れ、VS Code のターミナルで下を確認します。
ターミナル
$node -v$npm -v
v20.18.0 10.8.2
こう出れば成功
バージョン番号が2つ出れば成功です。
エラーが出たら？
3
ステップ2, VS Code に Claude をつなぐ
VS Code を入れた後、拡張機能で「Claude Code」を入れ、Sign in でサブスクを連携します。
ヒント
ゲーム案を先に Claude に話し「ルールをもっと面白く」と頼むと良い提案がもらえます。
4
ステップ3, Vite でゲームプロジェクトを作る
下で軽くて速いゲームプロジェクトを作ります。終わると次のコマンドを案内してくれます。
ターミナル
$npm create vite@latest my-game -- --template vanilla
✔ Scaffolding project in ./my-game... Done. Now run: cd my-game npm install npm run dev
こう出れば成功
「Scaffolding project in ./my-game...」と次の手順が出れば成功です。
5
ステップ4, ゲームを実行してプレビュー
フォルダに入り、インストールして実行します。下の3行を順に入力します。
「http://localhost:5173」が出たらブラウザで開きます(ウェブサイトのトラックとポート番号が違います)。初期画面が出れば準備完了。この画面は開いておきます。
ターミナル
$cd my-game$npm install$npm run dev
VITE v6.0.0 ready in 320 ms ➜ Local: http://localhost:5173/
こう出れば成功
Vite の画面が出れば開発環境が完成です。
エラーが出たら？
6
ステップ5, バイブコーディングでゲームを作る
Claude にゲームを具体的に説明します。例:「canvas で簡単なゲームを作って。下に左右キーで動くカゴ、上から果物が落ちる。受けると +1点、逃すと -1ライフ、ライフ3で0になるとゲームオーバー。点数とライフを画面に表示して。」
ブラウザで遊びながら「果物が段々速く」「金の果物は +5点」「スタート画面とリトライボタンを追加」と肉付けします。
ヒント
難易度が合わなければ「簡単/難しすぎ」と言うだけで、Claude が速さと頻度を調整します。
エラーが出たら？
7
ステップ6, 効果音と演出で完成度を上げる
ゲームは音と演出が半分です。Claude に「果物を受けた時に短い『ピン』、逃した時に『ブッ』、点が上がる時に数字が一瞬大きくなる演出を」と頼みます。
続けてスタート音楽、ゲームオーバー画面、ハイスコア保存(localStorage)まで頼めば立派なゲームになります。
ヒント
効果音ファイルが無くても OK。Claude に「コードで簡単な効果音を生成して(Web Audio)」と頼めばファイル無しで音を作ります。
8
ステップ7, ビルドして公開
完成版を作り(下)、その結果(dist フォルダ)を Vercel や Netlify に上げるとリンクができます。
公開方法が分からなければ Claude に「dist フォルダを Vercel に上げる方法を教えて」と頼めば手順を案内します。
ターミナル
$npm run build
vite v6.0.0 building for production... ✓ built in 1.2s dist/index.html 0.46 kB dist/assets/index.js 8.1 kB
こう出れば成功
「built in ...」と dist の中身が出ればビルド成功です。
エラーが出たら？
9
完成!そして次へ
おめでとうございます。リンクで自慢できるゲームを作りました。
次はステージ、ボス、ランキング、スマホのタッチ操作まで同じ方法で広げましょう。作ったゲームは Launchpad に上げてスコア競争をしましょう。
