シューティングゲームをHTMLで自作していると、「もっとカッコよくしたい」「演出が地味すぎる」という壁に必ずぶつかりますよね。ぼくもずっとGeminiと二人三脚で開発を続けてきたんですが、ビジュアル面の強化だけはどうしても限界を感じていました。そこで今回、シューティングゲームの自作にClaudeを初めて投入してみたところ、ゲームの見た目と演出が劇的に変わりました！この記事では、完成したゲームをブログ上で実際に遊べる形で公開しながら、GeminiとClaudeをどう使い分けたのか、どんなバグに詰まってどう解決したのかを丸ごと記録していきます。
シューティングゲームをHTMLで自作するとどうなる？Claudeを使った結果
結論から言います。Claudeにビジュアル強化を任せたら、同じゲームとは思えないほど変わりました。ゲームの仕組みはGeminiが作り上げたものをそのまま活かしつつ、見た目・演出・ストーリー・バランスをClaudeが一気にブラッシュアップしてくれました。その結果が今回公開する「SHOOTING DEFENDER Ver1.01 – Claude Edition」です！
タイトル画面には「宇宙艦隊が地球に迫る。君が最後の希望だ。」というストーリーナレーションが加わり、ステージ開始時には「未知の艦隊が接近中——全機、迎撃態勢に入れ」というテキストが流れます。星は輝きアニメーション付きの120個に増え、自機にはエンジントレイルが光ります。敵を撃墜するたびにカラフルなパーティクルが爆発します。ゲームオーバー画面には「地球は闇に沈んだ…」という一文も。以前のゲームと比べると、明らかに「別のゲーム」になりましたよ！
まずは実際に遊んでみてください。PC・スマホ・タブレットすべてに対応しています。
ゲームの遊び方（PC・スマホ共通）
操作はシンプルです。PCでは矢印キーで自機を移動、Zキーまたはスペースキーで弾を発射します。スマホ・タブレットでは画面下部の「MOVE」ボタンをスライドして移動、「Shot」ボタンで射撃です。さらにShotボタンをすばやく3回タップするとミサイルが発動するので、ボス戦でぜひ試してみてください！
ステージは全3面＋ボス3体構成です。パワーアップアイテムを取るほど弾が強化され、最大レベルになるとシールド代わりにもなります。パワーレベルは画面右側の「POWER」欄に表示されるので、なるべくアイテムを取り続けることが攻略の基本ですよ。
ボムは画面右側の「BOMB」欄に3個ストックされています。スマホならShotボタンを3連タップ、PCならZキーを素早く3回押すと発動します。ボム発動中は周囲の敵弾をすべて消しながら強力なミサイルを連射するので、ピンチのときの切り札として取っておくといいですよ。ゲームオーバー後の「TRY AGAIN」ボタンですぐリトライできます！
GeminiとClaudeの使い分け——それぞれの「得意」が違います
今回初めてGeminiとClaudeを明確に役割分担して使ってみました。結果として、この二つのAIは「得意なこと」がはっきり違うということがわかりましたよ。
Geminiはゲームの「骨格」を作るのが得意
Geminiは「こういうゲームを作りたい」という曖昧な要求を、動くコードに落とし込む能力がとても高いです。Ver1.0からVer3.23まで、ゲームの基本システム——敵の出現パターン、ボス戦の仕組み、スマホのタッチ操作、Web Audio APIによるBGMと効果音、ランキングAPIとの連携——これらはすべてGeminiとのやりとりで完成させました。
ぼくがGeminiに感じる強みは「動くものをとにかく速く出してくれる」点です。「スマホでトリプルタップしたらミサイルが出るようにして」「DeltaTimeでフレームレートを安定させて」という要求を、比較的短いやりとりで実装してくれます。過去の開発記録はこちらの記事に詳しく書いています。
Claudeはゲームの「表情」を作るのが得意
一方でClaudeに頼んだのは、ゲームの見た目と演出の強化です。具体的には「星をもっとリアルにして」「弾をレーザービームっぽくして」「ボス撃破時の演出を派手にして」という要求を出しました。
Claudeが返してきたコードは、ぼくの予想をはるかに超えていました！星には輝きアニメーションと色バリエーション（青い巨星・赤色矮星・白色矮星）が加わり、自機の後方にはシアン色のエンジントレイルが光ります。敵を倒すとカラフルなパーティクルが200個単位で爆発します。さらにステージごとに背景の星雲の色が変わる（Stage1:青緑、Stage2:紫橙、Stage3:赤紫）という演出まで追加されていました。
加えてClaudeが自分から「ストーリーを入れましょう」と提案してきたのが印象的でした。各ステージ開始時のナレーション、ゲームオーバー時の「地球は闇に沈んだ…」、クリア時の「敵艦隊を殲滅した。地球は救われた。」——これらはClaudeが自発的に追加した演出です。
ぼくがClaudeに感じる特徴は、コードを書くだけでなく「体験として何が足りないか」を考えてくれる点です。Geminiに同じ依頼をすると「機能を実装する」という方向で返ってくることが多いんですが、Claudeは「この場面でプレイヤーはどう感じるか」という視点からも提案をしてくれます。ゲーム開発において、この差は大きいですよ。
ちなみにClaudeの特徴や他AIとの比較はこちらの記事で詳しく書いています。
Geminiで育てたゲームの歴史——Ver1からVer3.23まで
今回のClaude版（Ver1.01）を理解するには、これまでの開発の積み重ねを知ってもらう必要があります。ゲームはVer1.0から数えると、約1年半かけてGeminiと一緒に育ててきました。
Ver1.0——すべての始まり
最初のシューティングゲームは、本当にシンプルなものでした。自機が動いて弾が出て敵が落ちてくる。それだけ。でもブログ上でHTMLファイルひとつで動くゲームが作れると知ったとき、ぼくは純粋に興奮しました。プログラミングの知識がなくてもAIと対話するだけでゲームが作れる——その可能性を信じてVer1.0を公開したんです。
Ver2.93——スマホ対応という難題
Ver1.0からVer2.93への道のりで最大の壁になったのが、マルチデバイス対応でした。PCブラウザでは快適に動くのに、スマホで開くと操作がまったく別物になるんです。スワイプが長押し判定になる、タッチイベントが誤作動する、画面サイズが違うのでUIが崩れる——こうした問題を一つずつGeminiと潰していった記録がVer2.93の記事です。Web Audio APIの高速化、ランキング機能の実装もこのバージョンで完成しました。
特に苦労したのは「スマホのタッチ操作とPCのキーボード操作を同時に成立させる」設計でした。タッチイベントとキーボードイベントを別々に処理するのではなく、「入力状態オブジェクト」をひとつ用意して両方の入力がそこに集約される構造にすることで、最終的にきれいに解決できました。この設計はClaude版にも引き継がれています。
Ver3.14——トリプルタップミサイルとASUS PC問題
Ver3.14ではスマホのトリプルタップでミサイルを発動するシステムを実装しました。そしてこのバージョンで遭遇した「ASUS PCだけゲームが2倍速で動く」という謎のバグも印象深いです。DeltaTimeという概念を導入してフレームレートを制御することで解決しましたが、これはGeminiとの長い議論の末にたどり着いた答えでした。
DeltaTimeとは、前フレームからの経過時間に基づいてゲームオブジェクトの移動量を計算する手法です。これを使わないと、ゲームの動作速度がデバイスの処理速度に依存してしまいます。高性能なPCでは60fpsで動き、スペックの低いスマホでは30fpsになるとゲームの進行速度が2倍変わってしまうんです。ぼくのASUS PCだけ2倍速になっていたのはこれが原因でした。Ver3.14でこの問題を解決してからは、どのデバイスでも同じ速度でゲームが動くようになりました！
Claudeに頼んだら何が変わったか——具体的な改善内容
ここからは、ClaudeがVer3.23のコードに加えた改善を具体的に紹介します。ビジュアル・演出・バランス調整の3つに分けて整理しました。
ビジュアル強化——「宇宙っぽさ」が一気に上がりました
まず背景の星が80個から120個に増え、それぞれに輝きアニメーションが付きました。色も4種類（青い巨星・黄色・赤色矮星・白）に分かれ、約10%の確率で十字型に輝く「ブライトスター」が出現します。これだけで背景の奥行きが全然違いますよ。
自機の弾は単純な白い四角から、グロー付きレーザービーム風に変わりました。白いコアの周りにシアン色のグローがかかり、先端にフレアが光ります。敵の弾も輝く赤いオーブになりました。そして自機の後方にはエンジントレイルとして、パワーレベルに応じて脈打つオーラが追加されています。
敵を撃墜したときのパーティクル爆発は、新しく実装されたParticleクラスが200個のプールを管理してカラフルに爆発します。ボス撃破時は爆発が10回から15回に増え、画面全体が白くフラッシュする演出まで加わりました。
ストーリー演出——ゲームに「世界観」が生まれました
Claudeが自発的に追加したのがステージナレーションです。
- Stage1開始：「未知の艦隊が接近中——全機、迎撃態勢に入れ」
- Stage2開始：「敵の本隊が姿を現した——総力戦だ」
- Stage3開始：「最後の決戦——地球の命運がかかっている」
- ゲームオーバー：「地球は闇に沈んだ…」
- ゲームクリア：「敵艦隊を殲滅した。地球は救われた。」
このナレーションが入るだけで、ゲームへの没入感がまったく違います。操作キャラクターが「地球を守る最後の戦士」であるという文脈が生まれるからです。ぼくはこの変化が一番驚きでした。Claudeが機能追加だけでなく「体験設計」まで考えてくれたと感じた瞬間でしたね。
バランス調整——序盤が遊びやすくなりました
ビジュアルだけでなく、ゲームバランスも見直してもらいました。Stage1の敵出現ペースが少し緩やかになり、初見でも序盤をある程度楽しめるようになっています。またパワーアップアイテムの出現率がStage1だけ少し高めに設定されたため、序盤からパワーアップの気持ちよさを体験できます。
もとのVer3.23は、正直なところ序盤から敵の出現ペースが速めで「やられた→即リトライ」のサイクルになりがちでした。ゲームに慣れているぼくでも最初の数プレイは序盤で詰まることが多かったんです。Claudeにバランスを見直してもらったことで、「序盤で少しずつ上達を感じながらStage1をクリアできる」ような設計になったと思います。
開発中に詰まったバグと解決策
完成までの道のりは順調ではありませんでした。Claude版の開発でも複数のバグに遭遇しました。実際に詰まったポイントと解決策を記録しておきます。
矢印キーを押すとページがスクロールしてしまう問題
PCブラウザで最初にテストしたとき、矢印キーを押すたびにブログページ全体がスクロールしてしまうという問題が発生しました。ゲームのiframeに操作フォーカスがあたっているのに、ブラウザがキーイベントをページスクロールとして処理してしまうんです。
解決策は、keydownイベントの先頭で矢印キーとスペースキーにe.preventDefault()を呼ぶことでした。これでゲーム操作中はページスクロールを完全に防げるようになります。コードにするとこんな感じです。
document.addEventListener('keydown', e => {
if (['ArrowLeft','ArrowRight','ArrowUp','ArrowDown',' '].includes(e.key)) {
e.preventDefault(); // ページスクロール防止
}
// 以下、ゲーム操作の処理
});スマホで広告がゲームUIに被る問題
スマホのChromeで確認すると、ページ下部に表示される忍者Admaxの広告がゲームの操作ボタン（MOVEとShot）に被ってしまうという問題が起きました。もともとのコードはスマホ時にposition: fixedとoverflow: hiddenでボディを固定していたため、広告が出現するスペースが確保されていなかったんです。
解決策はposition: fixedをやめて、代わりにpadding-bottom: 120pxで下部に余白を確保することでした。これで広告とブラウザのナビゲーションバーがUIに被らなくなりました。スマホ対応のゲームをWordPressに埋め込む場合、広告との共存を最初から意識した設計が必要だと痛感しましたね。
SCORE/RANKINGボタンが画面から見切れる問題
スマホの横幅に対して、SCORE・STAGE・HP・POWER・BOMB・RANKINGの6要素が1行に収まらず、右端が見切れてしまう問題もありました。こちらはCSSで各ステータス項目をwidth: 33.3%の2行×3列グリッドに変更し、RANKINGボタンは「🏆 RANK」と短縮して2行表示にすることで解決しました。
スマホの画面は狭いですよね。UIを設計するときは「最小の横幅（320px前後）でも崩れないか」を常に意識する必要があります。
HTMLシューティングゲームを自作するときのポイント
ここまでの経験を踏まえて、HTMLでシューティングゲームを自作したい方へのポイントをまとめておきます。
AIはGeminiとClaudeを使い分けると効率がいいです
ぼくの実感として、AIを使ったゲーム開発は「一つのAIだけで完結させようとしない」ほうがうまくいきます。Geminiはゲームの動く仕組み（ロジック・物理演算・デバイス対応）を作るのが得意で、Claudeはゲームの見た目・演出・体験設計を磨くのが得意でした。
具体的な使い方のコツとしては、まずGeminiで「動くプロトタイプ」を作り、そのコードをまるごとClaudeに渡して「ビジュアルと演出を強化して」と伝えるのが効率的です。ClaudeはコードをきちんとレビューしてからPR（プルリクエスト）的に差分を返してくれる感覚があります。コード全体の文脈を理解した上で手を入れてくれるので、既存の機能を壊しにくいという安心感もありますよ。
ただし、HTMLゲームのコードは機能が増えると2,000行を超えることもあります。長大なコードを一度に渡すとAIのコンテキスト上限に引っかかることもあるので、「この部分だけ直して」と範囲を絞って依頼するのも重要なテクニックです。
WordPressへの埋め込みはiframe方式がシンプルです
HTMLゲームをWordPressブログに埋め込む方法として、ぼくはiframe方式を採用しています。ゲームのHTMLファイルをWordPressのメディアライブラリにアップロードし、そのURLをiframeのsrcに指定するだけです。カスタムHTMLブロックに以下のコードを貼れば完成しますよ。
<div style="width:100%; max-width:860px; margin:0 auto;">
<iframe
src="https://tokodomo.xyz/wp-content/uploads/2026/03/shootinggame_claude_ver1_01.html"
style="width:100%; height:640px; border:none;"
scrolling="no">
</iframe>
</div>注意点として、WordPressのデフォルト設定ではHTMLファイルのアップロードが弾かれることがあります。その場合はFTPで直接アップロードするか、functions.phpにMIMEタイプを追加するか、プラグインで対応するかのいずれかで解決できます。
スマホ対応は「最初から」設計に組み込みましょう
ぼくがVer2.93の開発で一番苦労したのはスマホ対応でした。PCで完成させてからスマホに対応しようとすると、タッチイベントの処理・UIレイアウト・広告との共存・ブラウザUIとの干渉など、あとから直すべき問題が山積みになります。
PCとスマホを最初から両方想定してコードを書くほうが、長期的には圧倒的に楽です。またスマホのブラウザに広告が表示されるブログに埋め込む場合は、padding-bottomで広告スペースを確保しておくのも忘れずに。ゲームUIに広告が被ると、遊んでいる人にとって致命的なUXになってしまいますからね。
最後に、HTMLゲームをブログに埋め込む場合はゲームとブログの「境界」を意識することも大切です。ゲームの単体テストでは問題なくても、ブログに埋め込んだ瞬間に初めて発覚するバグは多いです。必ず「ブログ上で遊ぶ」という状況でテストするようにしましょう。
まとめ
今回、GeminiとClaudeという2つのAIを使い分けてシューティングゲームを自作した経験は、ぼくにとって大きな発見でした。シューティングゲームをHTMLで自作するなら、骨格づくりはGemini、仕上げはClaudeという使い分けが今のところベストだと感じています。
Geminiがコツコツと積み上げてきたゲームの仕組みに、Claudeが「宇宙っぽさ」と「物語」を吹き込んだ結果、「SHOOTING DEFENDER Ver1.01 – Claude Edition」という一作が完成しました。
ゲームはまだ進化する予定です。ランキング機能の本格実装、新ステージの追加、さらなるビジュアル強化——やりたいことはたくさんあります。次のバージョンも、AIと一緒に作っていきますよ！
自分でもHTMLシューティングゲームを作ってみたいという方は、まずVer1.0の記事から読んでみてください。プログラミング未経験でも、AIとの対話を続ければゲームは必ず作れます。大事なのは「動いたら次の機能」「バグが出たら原因を一緒に考える」という小さな積み重ねですよ。
コメント