Claudeでブラウザゲームを作るときの進め方と確認点
遊びをつくる執筆にClaudeを使用しています。
「ClaudeにHTMLゲームを作らせたい」と思ったとき、最初の壁は"何をどう頼めばよいか"です。ゲームは仕様の塊であり、あいまいな指示では動くコードが返ってきても、意図した遊び心地にはなりません。逆に、整理された指示を段階的に渡すと、短時間でプレイ可能なブラウザゲームが出来上がります。 この記事では、Claudeへの指示設計・コードの受け取り方・動作確認の手順・よく起きるズレの直し方を、実際に使える判断基準とともに解説します。「作ってみた話」ではなく、誰が取り組んでも再現しやすい進め方をまとめています。
この記事の目次
ゲームの「仕様」を先に言語化する
Claudeにコードを書かせる前に、自分の頭の中にある「遊び」を文章に落とし込む作業が必要です。ここをスキップすると、出てきたコードを見て「なんか違う」と感じる修正ループが長引きます。
最低限、次の4点を決めておくと指示がぶれません。
- ゲームの目的：プレイヤーは何をすると「勝ち」か「クリア」か
- 操作方法：キーボード・マウス・タッチのどれを使うか
- 画面の構成：スコア・残り時間・障害物など、表示する要素は何か
- 終了条件：ゲームオーバーや得点上限など、セッションが終わる条件
たとえば「落ちてくるブロックをよけるゲーム」という一文では、Claudeは適当に補完して実装します。「プレイヤーは左右キーで動く。ブロックは上から毎秒1個、ランダムなX位置に出現する。接触でゲームオーバー、スコアは回避した秒数を表示する」まで書けば、返ってくるコードのぶれが大幅に減ります。
Claudeへの指示を3段階に分ける
一度に全機能を依頼するより、段階を分けた方がコードの品質と把握しやすさが上がります。
第1段階：骨格だけ動かす
まず「〇〇ゲームをシングルHTMLで、見た目は最低限でいいので動くコードを作ってください」と頼みます。スタイルやエフェクトは後回しにして、ゲームロジックが正しく動くかだけを確かめます。
第2段階：機能を一つずつ追加する
スコア表示・難易度上昇・サウンドなど、追加したい要素を1リクエスト1機能で依頼します。「前回のコードに〇〇を追加してください」と伝えるとき、変更点が一つに絞られているので、バグが出ても原因を特定しやすくなります。
第3段階：見た目を整える
ゲームロジックが固まったら、フォント・背景色・アニメーションなどのCSSを依頼します。この順序を守ると、デザイン変更がロジックのバグを引き起こす事故を避けられます。
各段階で「今のコードを全文返してください」と指定するのが実用的な慣習です。差分だけ返してもらうと、どこに貼るかの判断でミスが生まれます。
コードを受け取ったあとの確認手順
Claudeが返したHTMLをそのままブラウザで開いても、すぐには問題を見つけにくいことがあります。次の順序で確認すると漏れが減ります。
- ローカルで開いて基本動作を確かめる：ファイルをブラウザにドラッグ＆ドロップするだけで動作します。Chrome・Firefoxなど複数で試しておくと、環境差異を早めに発見できます。
- ブラウザの開発者ツールでエラーを確認する：F12キーで開くコンソールにエラーや警告が出ていないかを見ます。JavaScriptのエラーはここに表示されます。エラー文をコピーしてClaudeに貼り付けると、原因と修正コードをすぐに返してくれます。
- スマートフォンの表示を確かめる：ブラウザゲームはPCだけでなくスマートフォンからもプレイされます。開発者ツールのデバイスシミュレーターで、タッチ操作や画面幅の崩れがないかを確認します。
- ゲームを最後まで通してプレイする：スコア・クリア画面・ゲームオーバー後の再スタートなど、一連の流れをすべてたどります。途中で止まる状態（フリーズ・無限ループ）は操作しないと見つかりません。
よくあるズレとその直し方
Claudeが作ったコードで起きやすい問題と、それをどう指示して直すかをまとめます。
「動くが意図と違う」
仕様の伝え方に原因があることがほとんどです。「〇〇のつもりで頼んだのですが、現在の動作は△△になっています。〇〇の動作に直してください」と、現状と期待の両方を伝えます。「なんか変」だけでは修正が迷走します。
「前の機能が壊れた」
追加依頼のたびにコード全文を貼り直し、「このコードに〇〇を追加してください。既存の動作は変えないでください」と明示します。コードが長くなると、Claudeが意図せず以前の実装を書き替えることがあります。
「スマホで操作できない」
キーボード操作前提で作った場合に起きます。「スマートフォンでもプレイできるよう、画面上にタッチ用の左右ボタンを追加してください」と依頼します。既存のキーボード操作を残したまま追加するよう指定すると、両対応になります。
「コードが長すぎてClaude側で途中で切れる」
応答が途中で止まった場合は「続きを書いてください」と一言送ると続きが返ってきます。最終的なコードを受け取ったら「今のコードを全文表示してください」で完全版を確認します。
完成したゲームをアソバースに投稿するときの判断基準
ゲームが手元で動いたら、外部に公開するかどうかを判断します。アソバースはHTMLファイルとZIPファイルの直接投稿、および公開済みURLの登録に対応しています。
単一HTMLで完結しているゲームは、HTMLファイルをそのまま投稿できます。画像・音声・フォントなどの外部ファイルを参照している場合は、それらをまとめたZIPで投稿するか、ファイルをBase64などでHTML内に埋め込む方法があります。Claudeに「外部ファイルなしの単一HTMLにまとめてください」と依頼すると、依存ファイルをインライン化したコードを返してくれます。
著作権の観点では、フォント・音源・画像を外部から読み込む場合はライセンスの確認が必要です。Claudeが生成したコード自体の扱いについては、利用しているサービスの利用規約と、必要に応じて専門家の確認をおすすめします。
次の行動
手元にあるアイデアを、仕様の4点（目的・操作・画面構成・終了条件）に書き出してみてください。それをClaudeに渡す最初のプロンプトにして、まず「骨格だけ動く」状態を作るところから始めるのが最短ルートです。できあがったHTMLはアソバースに投稿して、実際にブラウザでプレイされる環境で動作を確かめてみてください。
参考資料
- Claude 利用規約（Anthropic 公式）
- MDN Web Docs — Canvas API・Web Audio API（Mozilla）
- アソバース ヘルプ・投稿ガイド（アソバース公式）
