🎮 Webゲームの作り方（LLMバイブコーディング）

AI（LLM）を活用したWebゲーム作成のガイド

はじめに

TOYBOXでは、Webブラウザで動くミニゲームを投稿できます。プログラミング経験がなくても、GeminiやChatGPTなどのLLM（大規模言語モデル）を使えば、AIにコードを書いてもらうことで簡単にゲームを作成できます。

重要: ゲームは必ずindex.htmlを含むZIPファイルとしてアップロードしてください。Webブラウザで直接実行できる形式である必要があります。

おすすめのLLM（AI）ツール

Google Gemini

Googleが開発したLLM。コード生成に優れている。無料で利用可能。

ChatGPT（OpenAI）

OpenAIが開発したLLM。コード生成とデバッグに強い。有料プランあり。

Claude（Anthropic）

Anthropicが開発したLLM。長文のコード生成に優れている。

GitHub Copilot

GitHubとOpenAIが共同開発。コード補完と生成に特化。

Cursor

AI統合型コードエディタ。コード生成と編集が簡単。

Codeium

無料で使えるAIコード補完ツール。VS Code拡張機能あり。

基本的な使い方

1. お題を取得

マイページの「お題をジェネレート」機能で、ゲーム用のお題を取得します。

2. LLMにゲームの要件を伝える

取得したお題を参考に、LLMにゲームの要件を伝えます。以下のような情報を含めると良いでしょう：

  • ゲームのジャンル（アクション、パズル、RPGなど）
  • 操作方法（マウスクリック、キーボード入力など）
  • ゲームのルールや目標
  • 画面のデザインやスタイル
  • 必要な機能（スコア、タイマー、レベルなど）

3. LLMにコードを生成してもらう

LLMに「HTML、CSS、JavaScriptを使って、[ゲームの説明]のWebゲームを作成してください。index.htmlファイル1つにすべてのコードを含めてください。」と依頼します。

ヒント: 最初はシンプルなゲームから始めて、徐々に機能を追加していくのがおすすめです。「クリックゲーム」「じゃんけんゲーム」「数当てゲーム」など、簡単なものから試してみましょう。

4. 生成されたコードを確認・修正

LLMが生成したコードを確認し、動作をテストします。うまく動かない場合は、エラーメッセージや問題点をLLMに伝えて修正してもらいましょう。

5. index.htmlファイルを保存

生成されたコードをindex.htmlというファイル名で保存します。すべてのコード（HTML、CSS、JavaScript）を1つのファイルに含めるのがポイントです。

6. ZIPファイルにまとめる

画像や音声ファイルなど、追加のリソースがある場合は、それらも含めてZIPファイルにまとめます。index.htmlは必ずZIPファイルのルートディレクトリに配置してください。

7. ゲームを投稿

作成したZIPファイルをTOYBOXにアップロードして、みんなに遊んでもらいましょう。

LLMへのプロンプト例

以下は、LLMにゲームを作成してもらう際のプロンプト例です。参考にしてください。

例1: シンプルなクリックゲーム

HTML、CSS、JavaScriptを使って、シンプルなクリックゲームを作成してください。

要件:
- 画面中央にボタンがある
- ボタンをクリックするとスコアが増える
- スコアが表示される
- ダークテーマでスタイリッシュなデザイン
- index.htmlファイル1つにすべてのコードを含める

例2: じゃんけんゲーム

HTML、CSS、JavaScriptを使って、じゃんけんゲームを作成してください。

要件:
- プレイヤーは「グー」「チョキ」「パー」のボタンから選択
- CPUはランダムに選択
- 勝敗を判定して表示
- 勝率を記録・表示
- かわいいデザイン
- index.htmlファイル1つにすべてのコードを含める

例3: 数当てゲーム

HTML、CSS、JavaScriptを使って、数当てゲームを作成してください。

要件:
- 1から100までの数字をランダムに生成
- プレイヤーが数字を入力して推測
- 「もっと大きい」「もっと小さい」とヒントを表示
- 正解までの試行回数を表示
- ゲームクリア時に祝福メッセージを表示
- index.htmlファイル1つにすべてのコードを含める

LLMバイブコーディングのコツ

  • 具体的に伝える: 「ゲームを作って」ではなく、「クリックゲームを作って、スコアを表示して」のように具体的に伝えましょう。
  • 段階的に機能を追加: 最初はシンプルなゲームを作り、動作確認してから機能を追加していきましょう。
  • エラーはそのまま伝える: エラーが発生したら、エラーメッセージをそのままLLMに伝えると、修正方法を提案してくれます。
  • デザインも指定する: 「ダークテーマ」「かわいいデザイン」「シンプルなデザイン」など、デザインの希望も伝えましょう。
  • 1ファイルにまとめる: 「index.htmlファイル1つにすべてのコードを含めてください」と明示的に伝えると、管理が簡単になります。
  • 動作確認を忘れずに: 生成されたコードは必ずブラウザで動作確認しましょう。

よくある質問

Q: プログラミング経験がなくても作れますか？

A: はい、LLMにコードを生成してもらうので、プログラミング経験がなくてもゲームを作成できます。ただし、生成されたコードを確認して動作テストする必要があります。

Q: どのLLMがおすすめですか？

A: 初心者の方は無料で使えるGoogle Geminiがおすすめです。より高度な機能が必要な場合はChatGPT（有料プラン）やClaudeが良いでしょう。

Q: 生成されたコードが動かない場合はどうすればいいですか？

A: エラーメッセージや問題点をLLMに伝えて、修正してもらいましょう。ブラウザの開発者ツール（F12キー）でエラーを確認することもできます。

Q: ファイルサイズの制限はありますか？

A: TOYBOXでは最大50MBまでアップロードできます。画像や音声ファイルを多く含めるとサイズが大きくなるので注意しましょう。

Q: 外部リソース（CDNなど）を使えますか？

A: 可能ですが、オフラインでも動作するように、必要なファイルはすべてZIPに含めることをおすすめします。LLMに「外部リソースを使わず、すべてのコードを1つのファイルに含めてください」と伝えると良いでしょう。

← お題をジェネレートのヘルプに戻る ← マイページに戻る