最近話題の「生成AI」。イラストや文章だけでなく、なんとゲームも作れてしまうってご存じでしたか？
今回は、私が実際に生成AIを使って、わずか数時間でHTMLゲームを作った方法と、おすすめポイントを紹介します！
🎮 今回作ったゲーム：シンプルな落ちものゲーム
今回作ったのは、ブラウザで遊べるシンプルな落ちものゲーム。
特別なソフトもインストール不要で、パソコンでもスマホでも遊べる軽量ゲームです👇
ここからすぐに遊べます。
２０２５年１０月１５日バージョンアップしました！！
GAME『両替しまShow』
マウスで落ちる場所を選んでクリック！（モバイルならタッチで移動、離すと落下。PCならスペースキーも使えます）
コインをつないで大きいコインに両替します。1円玉なら５枚、５円玉なら２枚をつなげよう！両替した金額がスコアに加算されるよ！
たまに『お邪魔コイン』も落ちてくる。これは隣のコインが両替されると消えて、ボーナス＋１０円入ります。
１０００円になると画面から消えます。
スコアが１０００円ごとにレベルアップ！コインの大きさがちょっとずつ大きくなるぞ！
頑張って最高得点を目指そう！
＊高得点はXでポストしよう！
わずか５時間で作成
今回使ったのは、アンソロピック (Anthropic) 社の『Claude』
ChatGPTでも、Geminiでも、だいたい同じようなことができるけど、Claudeは作成中に右画面でプレビューできるのでおススメ。
さすがに無料ではすぐに制限に到達してしまうので安くていいから有料プランは必要だね(=_=)
プログラミングはほとんど素人の私でも出来たので、ぜひチャレンジしてみて！
使用するAIが決まったら早速作ってみよう！
📝 ステップ①：ゲームのアイデアを考える
まずは「どんなゲームを作るか」をざっくり決めます。
いきなり複雑なRPGを作るのは大変なので、初心者には次のようなシンプルなものがオススメです👇
- クリックでスコアを増やすゲーム
- 障害物を避けるだけのジャンプゲーム
- マウスで動かす迷路ゲーム
私は「落ちもの」タイプのゲームを選びました！
🤖 ステップ②：生成AIにコードを作ってもらう
次に、ChatGPTなどの生成AIに、ゲームの仕様を伝えます。
例えば、こんなふうに入力👇
「HTML・CSS・JavaScriptで、上から落ちてくるものをつないで消していくゲームが作りたい。 小銭が降ってくる、1円玉は5枚で5円に、5円は2枚で10円というように変化。1000円になったら消える。」
するとAIが、数秒でHTMLファイルを作ってくれます。
あとは、そのコードをコピーして保存するだけでOK！
🧪 ステップ③：ブラウザで実行してみる
作ったHTMLファイルをダウンロードしてダブルクリックすると、すぐにブラウザでゲームが起動します！
わざわざアプリ化しなくても、ChromeやSafariでそのまま動くのがHTMLゲームの魅力です✨
Claudeなら、ダウンロードも不要。その場ですぐ確認できます。
もし動かない場合は、AIに「エラーが出たので直してください」と伝えれば、すぐ修正コードも作ってくれます。
最初のゲーム
一発目からこんな風にできました！
ただコインぽくないし、これでは面白くもなんともない(◎_◎;)
そこで、こんな風に依頼を出します。
落ちていくコインの速度もっとゆっくり、落ちていく状態もわかるように、コインは丸いデザインで
コインぽくはなったんだけど、思っていたのと違う。そこで今度は、
スイカゲームのように積みあがったコインが転がっていくような使用にできますか？
ここまで来るのにも、何回かエラーで動かなかったんだけど、そのたびにAIに改善を要求すれば、プログラミング知識なしでも修正してくれます(*´▽｀*)
ゲームを面白くなるように、バランス調整
ゲームシステムとしてはほとんど完成なのですが、いつまでたっても終わらないので、難易度を調整。ゲームっぽさも追加。
- お邪魔コインの導入
- 1000円ごとにレベルアップ！コインサイズが大きくなる
- 効果音の追加
- スコアアニメーションの追加
これも全部AI任せ(;´∀｀)
これで最初のゲームが完成したわけです。
ホントはもっとやりたいことも・・・
本当は、ランキングシステムや、リアル画像を使った表示などしたかったのですが、エラー続出！
AIの使用制限にかかってしまったためここまでで終了。
ちょっとずつ改善は進めているけど、もっと突き詰めて開発するなら、それなりにプログラミング知識が必要かも……
でも十分楽しいですよね！
ちなみに私の最高得点は『８８００円』
ぜひチャレンジしてみて、高得点が出たら『X』に #両替しまShow のタグで呟いてくださいね！
本気でチャレンジするならプログラミングスクールに参加するのがおすすめ。私は独学で挫折しました(;´∀｀)
🌟 生成AIでゲームを作るおすすめポイント
実際にやってみて感じた、AIゲーム制作の魅力はこちら👇
| おすすめポイント | 内容 |
|---|---|
| ⏱ 超スピード開発 | 数分で完成！自分でゼロからコードを書く必要なし |
| 🧒 初心者OK | HTMLを少し触ったことがあれば誰でもできる |
| 🧭 カスタマイズしやすい | AIに「ここを変えて」と伝えるだけで改良できる |
| 📱 スマホ対応 | ブラウザで動くので、友達にもすぐ共有できる |
✨ ちょっとアレンジするだけで個性が出せる！
たとえば、背景画像を自分の写真にしたり、効果音をつけるだけでもぐっと本格的になります。
生成AIは「BGMを追加して」「スコアに応じて敵を強くして」といった要望にも、すぐコードで応えてくれます！
ただ、やっぱり細かい指定はエラーの数も増えてくるから、ある程度の知識が必要だな～と感じました。
ゲーム専用ページ作成しました！
新たに2つのゲームも作ってみました！
🚀 まとめ：AIと一緒にゲーム制作を楽しもう！
昔はゲーム制作といえば専門的な知識が必要でしたが、
今はAIと一緒に考えながら、誰でも簡単にゲームを作れる時代になりました。
今回のような簡単なものならすぐに作成できます。アイデア勝負でぜひオリジナルゲーム作りチャレンジしてみてね(=ﾟωﾟ)ﾉ
最初はシンプルなものから始めて、少しずつ自分のオリジナル要素を加えていくと楽しいですよ😊
📝
