今さらHTMLゲーム？生成AI（ChatGPT中心）で自作してブログに埋め込んでみた【ノーコード実録】

ChatGPT（生成AI）だけで、HTML5ゲームを自作しました。
コードはほぼ書かず、ノーコードで完成しています。

正直に言います。
今さらHTMLでゲームを作る理由は、特にありません。

Unityもあるし、WebGLもあるし、
生成AI時代にわざわざ <canvas> を触る意味も、
冷静に考えればあまりない。

それでも今回は、あえてやってみました。

ChatGPT（生成AI）だけでHTML5ゲームを作り、
それをそのままブログ記事に埋め込む。

コードはほぼ書いていません。
やったことは
「プロンプトを書く → 出てきたコードを貼る」だけ。

この「今さら感」ごと含めて、
生成AIだけで“ゲームとして遊べる体験”は作れるのか？
それを確かめた記録です。

👉 完成版はこちら（Version 30）／スマートフォンでプレイする場合はこちらから

まずは、完成したゲームを触ってみてください。
※スマホ対応／音が出ます。

ChatGPTとの壁打ちで、どこまで作れるのか

今回のゲーム制作は、
最初から完成形を狙っていません。

むしろスタート地点は、

「これ、ゲームって呼んでいいのか？」

というレベルでした。

Version 1：index-01.html（成立していない“最初の一歩”）

最初にできたのが index-01.html。
ChatGPTに投げたプロンプトは、今振り返るとかなり雑です。

・ゲームエンジン的な挙動（物理・当たり判定・マップ管理）
・キャラをラ○ブ的なやつ
・ChatGPTの味付けでオリジナルゲームを簡単に作りたい
・ゲームとして楽しめるもの

仕様書でもなければ、要件定義でもありません。
ただの箇条書きの壁打ちです。

それでも、ChatGPT は
「それっぽいもの」を出してきました。

• キャラが動く
• 重力がある
• 足場がある

ただし問題が一つ。

クリアできない。
ゲームとして成立していない。

ここが、今回の記事で一番重要なポイントです。

「最初から完成していない」

でも、これは失敗ではありません。
むしろ“正しいスタート”でした。

👉 初期版の実体：index-01.html

操作方法：← → / Space（ジャンプ）

「成立していない」から、壁打ちは始まる

index-01.html を触ってみて、すぐに分かったことがあります。

• ゴールが曖昧
• 遊び方が定まっていない
• クリア条件がない

そこで、次にやったことはコードを書くことではありません。

やったのは、これだけ

・クリアできるようにしたい
・ゲームとして成立させたい
・スマホでも遊びたい

すべて日本語。
設計書もUMLもありません。

するとChatGPTは、

• ゴール判定
• ステージ構成
• リスタート導線

を少しずつ足してきます。

HTMLファイルが増えていく理由

この制作で特徴的だったのが、

• index-01.html
• index-06.html
• index-11.html
• index-18.html
• index-23.html
• index-30.html

というように、HTMLファイルを分けて保存していったこと。

理由はシンプルです。

ノーコードだから、
出てきたコードを
そのままHTMLに貼るだけ。

• ちょっと直したい
• 比較したい
• 戻したくなる

そのたびに 新しいHTMLファイルが増える。

結果として、

• 実際に残ったのは 1〜30
• でも実際に生成したHTMLは 50ファイル以上
• ChatGPTとの壁打ちは 3桁超え

正直、想定以上でした。

Version 6：一気に“ゲームっぽくなった転換点”

index.html から少しずつ調整を重ねていく中で、
見た目と体験が大きく変わったのが Version 6 でした。

このあたりから、

「とりあえず動くもの」
↓
「ちゃんと遊ぶ前提のゲーム」

に意識が切り替わります。

👉 この時点の実ファイルが index-06.html

操作方法：← → / Space（ジャンプ）/ Space連打（二段ジャンプ）

追加したこと（Version 6でやったこと）

このバージョンで、壁打ちしながら一気に要素を足しています。

① タイトル画面を追加

それまでのバージョンは、
ページを開いた瞬間にゲームが始まる状態でした。

そこで、

・タイトル画面がほしい
・難易度を選びたい
・「ゲームを始める感」を出したい

と ChatGPT にそのまま要望を投げています。

結果、

• タイトルロゴ風の演出
• 難易度選択（EASY / NORMAL / HARD）
• クリック or Enter でスタート

という、それっぽい導線が一気に整いました。

② ブロックをカラフルに変更

最初は無機質なブロックだった足場も、

・見た目を派手にしたい
・ブログに埋め込んだ時に映える感じにしたい

という理由で調整。

• 色数を増やす
• ピクセル感を強める
• 背景も少し賑やかに

これだけで、
「試作品」から「作品」寄りの見た目に変わります。

③ 二段ジャンプを追加

ここは完全にノリです。

「二段ジャンプ、あった方が楽しいよね」

という、かなり雑な一言から追加。

結果として、

• ジャンプ → 空中でもう一回ジャンプ
• 難易度ごとにジャンプ感覚を微調整

操作していて 明確に楽しくなったポイントでした。

④ 効果音（SE）を追加

このバージョンで初めて「音」を入れています。

• ジャンプ音
• 敵を踏んだ音
• アイテム取得音

しかも 外部素材なし。
Web Audio API を使った簡易SEです。

音が鳴るだけで、

「あ、ちゃんとゲームだ」

という感覚が一気に出ました。

⑤ とりあえず“クリアできる”状態に

Version 1 では、

• ゴールが曖昧
• クリア条件が不明
• 終わらない

という状態でしたが、Version 6 では

• ゴールが明確
• クリア演出あり
• 次に進める

**最低限「ゲームとして成立」**するところまで到達しています。

⑥ 3つの難易度を用意

ここも壁打ちの勢いです。

・簡単すぎるとつまらない
・難しすぎると投げる
・じゃあ難易度分けよう

結果、

• EASY：すぐクリアできる
• NORMAL：標準
• HARD：制限付き・少し意地悪

同じステージでも、
遊び方が変わる構造になりました。

Version 6時点で感じたこと

この時点で、はっきり思ったのがこれです。

「あ、これ普通に楽しいな」

しかも、

• 自分はコードをほぼ書いていない
• やったのは日本語で要望を投げただけ
• 気に入らなければ次のHTMLを作るだけ

結果として、

• index-6.html ができ
• さらに次へ進みたくなる

この「調子に乗り始める感じ」が、
この後 HTMLファイルが50個を超える原因になります。

Version 11：ゲームに「会社の顔」を載せてみる

Version 6 で
「とりあえず遊べるゲーム」にはなりました。

ただ、このあたりでふと考えます。

これ、
仕事で使ってる素材を入れたらどうなるんだろう？

そこで Version 11 では、
デザイン面を一気に“実案件寄り”に振りました。

👉 この時点の実ファイルが index-11.html

操作方法：← → / Space（ジャンプ）/ Space連打（二段ジャンプ）

タイトル画面に会社ロゴを追加

まずやったのがこれです。

タイトル画面に
会社ロゴをそのまま載せたい

しかも、

• 画像ファイルは使わない
• SVGをそのままHTMLに埋め込む

という、かなり欲張りな要望。

ChatGPTにそのまま伝えたところ、

• SVGをインラインで配置
• ゲーム用に色を反転
• ドロップシャドウで“ゲーム感”を追加

という形で、
違和感なくタイトル画面に溶け込むロゴになりました。

フックの「フ」の字をメインキャラクターに

ここは、Version 11 の中でも個人的に一番デカい変更でした。

元々は、ネズミっぽい（かわいいけど正体不明な）メインキャラがいて、
ゲームとしては成立していたものの、

「これ、うちのゲームです」
って言うには、ちょっと弱い

という感覚がありました。

そこで、思い切ってこうしました。

フックのロゴから
「フ」の字を採用して主役にする

要は、キャラクターを“オリキャラ化”するんじゃなくて、
会社の記号そのものをキャラにする方向へ舵を切った感じです。

ここもノーコード：SVGを貼って、味付けはChatGPT

やったことはシンプルで、

• ロゴSVGをインラインで使いたい、と伝える
• 「フ」をキャラクターとして成立させたい、と伝える

だけ。

細かい装飾や演出は、

あとはChatGPTが味付け担当

この距離感が、今回の制作の一番楽しいところでした。

自分でドット絵を描いたり、キャラ設定を詰めたりしてないのに、
“それっぽく整ってくる” のが面白い。

実際に使った素材

ここで、実際に使ったロゴと名刺デザインを並べておきます。

普段はWebや印刷物で使っている素材が、
そのままゲームの一部になる感覚。

正直、この時点でちょっとテンションが上がりました。

名刺デザインを「背景」として使う

次にやったのが、さらに実験的な試み。

名刺デザインを
ゲームの背景に使えないか？

普通に考えると、

• 文字がうるさい
• 主張が強すぎる
• ゲームと合わない

となりそうですが、
ChatGPTと壁打ちしながら調整していくと、

• 透過
• 拡大率の調整
• カメラ追従に合わせたパララックス

を組み合わせて、
「主張しすぎない背景素材」として成立しました。

結果として、

ブログ用に作った名刺デザインが
ゲームの世界観の一部になる

という、ちょっと不思議な体験になります。

敵キャラが左右に動くようになった

見た目だけでなく、
挙動もここで一段進化しています。

Version 10 までは、

• 敵はほぼ固定
• 踏むだけの存在

でしたが、Version 11 では

• 敵が左右にパトロール
• 壁や端で反転
• タイミングを見て踏む必要あり

と、明確にゲーム性が上がりました。

ここも、細かい指示は出していません。

敵、
左右に動いた方がゲームっぽいよね

この一言から、
いわゆる「マ○オ的な敵挙動」になっています。

Version 11 で感じたこと

このバージョンで強く感じたのはこれです。

ChatGPTは「遊び」と「仕事」を分けて考えていない

• ロゴ
• 名刺
• ブランドカラー

全部、同じ素材として扱える。

だから、

• Web
• 印刷
• ゲーム

が、同じ地平でつながる。

この感覚は、
普通にコードを書いていたら、たぶん思いつきませんでした。

Version 18：欲張りすぎて、崩れ始めた

ここから、正直に言います。

一気にやりすぎました。

プロンプトに要望を詰め込みすぎた結果

Version 11 までは、

• 1回のプロンプトに
• 1〜2個の改善要望

というペースで進めていました。

ところが Version 18 あたりから、

・ここも直したい
・あれも入れたい
・ついでにこれも
・スマホももっと良くしたい

と、
一度のプロンプトに要望を詰め込み始めます。

結果どうなったかというと、

• 処理時間がどんどん伸びる
• 平均 15分待ち
• 返ってきたコードが巨大化

ここで初めて、

あ、これ
生成AIにも負荷かかってるな

という感覚を味わいました。

👉 この段階の実ファイルが index-18.html

操作方法：← → / Space（ジャンプ）/ Space連打（二段ジャンプ）
ロゴが欠けてしまってます。何度説明しても修正できなかったものの１つ。

一度に詰め込むと、後戻りしづらくなる

もう一つ問題だったのがこれです。

• 一気に仕様を足した
• 一気に構造が変わった
• でも、どこで何が変わったか分からない

つまり、

意図しない仕上がりになっても、
どこに戻せばいいか分からない

状態。

ノーコードなので、

• git も切ってない
• 差分管理もしてない

結果として、

「あれ、これ…前の方が良くなかった？」

となっても、
気軽に戻れなくなってきました。

メインキャラクター「フ」が再び迷子に

Version 11 で一度は定まった、

• フックの「フ」を主役にする
• 記号をキャラクターにする

という方針。

ですが Version 18 では、

• 表情を足す
• 動きを増やす
• 演出を盛る

を一気にやった結果、

「フ」なのか、
何か別のキャラなのか分からない存在

に戻ってしまいます。

かわいくはなった。
でも、意味が薄れた。

これは完全に、
「盛りすぎた結果」です。

地元要素を入れたくて、アイテムを変更

このバージョンで、
どうしてもやりたかったことがあります。

地元要素を入れたい

そこで、

• これまでの
  キラキラした星アイテム
• ↓
• うどん に変更

さらに、

• かけうどん
• 釜玉うどん

と、種類まで増やしました。

アイデア自体は悪くない。

でも、

• ゲームバランス
• 世界観
• 演出の統一感

を詰めきれないまま足した結果、

だんだん内容が崩れてきた

という状態に。

Version 18 で学んだこと

このバージョンは、
完成度という意味では正直あまり高くありません。

でも、学びは一番多かった。

• 生成AI相手でも
  一気に欲張ると破綻する
• 小さく投げて
  小さく直す方がうまくいく
• 「できる」と「やる」は別

そして何より、

楽しくなってきたタイミングが、
一番危ない

ということ。

この後、
一度立ち止まって「整理フェーズ」に入ることになります。

Version 23：シンプルに立ち戻る（立て直し）

Version 18 で一度、完全に迷走しました。

• 要素を詰め込みすぎた
• プロンプトが長文化した
• 処理時間は15分超え
• 意図しない挙動が増え、戻れなくなった

そこで、一度ここで立ち止まります。

この時、ChatGPTに伝えたこと（たぶんこう）

index-23.html の構造を見ると、
この段階でこちらが伝えた要望は、かなり整理されています。

おそらく、こんな感じです。

・一回、全部シンプルに戻したい
・変に凝った演出はいらない
・「遊び方」がすぐ分かるゲームにしたい
・スマホでも迷わず操作できるようにしたい
・ステージ制で、ちゃんと終わりがある構成にしたい

**「新しいことをやりたい」ではなく、
「やりすぎたものを削りたい」**というフェーズです。

実際に起きている変化（index-23.html を見ると分かる）

👉 この段階の実ファイルが index-23.html

操作方法：← → / Space（ジャンプ）/ Space連打（二段ジャンプ）

コードと挙動から読み取れるのは、以下の方針転換です。

① 見た目を「説明しなくていいUI」に戻した

• タイトル画面は1枚
• 操作説明は最小限
• HUDも最低限の情報だけ

「これは何のゲームか」を読ませない。
見れば分かる。

Version 18 までの“説明過多”から、明確に方向転換しています。

② キャラクターは「意味のある四角」に戻した

• キャラはシンプルな矩形
• 余計な表情・演出なし

ここ、かなり重要で、

キャラを立てたい気持ちより
操作感を優先する

という判断が見えます。

Version 18 で迷子になった「フ」は、
ここで一度役割に戻された感じです。

③ アイテムは「うどん」に固定、効果も単純

• かけ
• 釜玉

と増やしていた要素は整理され、

• 取る → カウントが増える

という 分かりやすい報酬構造に。

地元要素は残す
でも、意味づけはシンプルにする

という、かなり大人な判断です。

④ ステージ構成を「ゲームとして成立させる」方向へ

index-23.html では、

• 5ステージ構成
• スタート → ゴールが明確
• 落下＝やり直し

という、王道の横スクロール構造に落ち着いています。

ここで初めて、

最初から最後まで
通しでテストする前提の設計

になっています。

Version 23 は「完成直前の設計図」

このバージョンは、派手さはありません。

でも、

• 迷わない
• 壊れない
• 説明しなくても遊べる

という意味で、
ゲームとして一番“地に足がついた状態”です。

ここまで来て、初めてこう言える状態になります。

あとは、
体験を少しだけ磨くだけ

Version 23 → Version 30 の関係

Version 23 は、

• 新しい要素を足すためのバージョン ❌
• 見せるためのバージョン ❌

です。

役割はただ一つ。

完成形（Version 30）を作るための土台

• 操作
• 構成
• スマホ対応
• ステージ制

すべてがここで安定したからこそ、
Version 30 では「演出だけ」を足せた。

この順番じゃないと、
たぶん完成していません。

Version 30：完成品として、ここまで仕上げた

Version 23 で構造を整理し、
「もう壊れない」「最後まで通しで遊べる」状態ができました。

👉 完成品が index-30.html

操作方法：← → / Space（ジャンプ）/ Space連打（二段ジャンプ）

Version 30 では、
新しい仕組みを増やすのではなく、体験を磨くことに集中しています。

うどんを食べた瞬間が、気持ちいい

まず手を入れたのが、
うどんを取った瞬間のフィードバックです。

• パワーアップ演出
• 効果音（SE）
• 一瞬だけ出る残像

「取ったことが分かる」ではなく、

取って気持ちいい

状態を目指しました。

数値をいじるより、
音と一瞬の視覚効果を足すだけで、
操作の満足度が一気に上がります。

敵キャラクターは「反応」を作り込む

敵も、ただの障害物では終わらせませんでした。

• 左右に動く
• タイミングを見て踏む必要がある
• 踏まれた時に“潰れる”
• 倒した瞬間に点数が表示される

さらに、

• 倒した数
• 取ったうどんの数

によって、
クリア時の演出が微妙に変わるようにしています。

ここで初めて、

ただゴールする
↓
どうゴールしたか

が意味を持つようになりました。

最終ステージは「ご褒美」に振り切る

最後のステージでは、
あえてゲーム性を足していません。

代わりに入れたのが、

• 花火演出
• 画面全体を使った祝福感

そして、よく見ると…

ゴール部分に、
フックの名刺デザインをさりげなく配置

あからさまなロゴではなく、
気づいた人だけがニヤッとする仕込みです。

ブログに埋め込まれることを前提にした、
ちょっとした遊び心。

メインキャラクター「フ」は、最後までシンプルに

途中で何度も迷子になったメインキャラクターですが、
最終的に選んだのは 潔さ でした。

• 余計な表情はつけない
• 色数も増やさない
• 四角に近い、記号的な存在

「キャラを立てる」のではなく、

操作の象徴としての「フ」

Version 18 を経たからこそ、
ここに戻れた感覚があります。

オリジナルBGMを追加（AI生成）

最後に入れたのが、音楽です。

使用したのは
Wondera.ai
という AI 8ビット音楽ジェネレーター。

• 世界観に合わせたチップチューン
• ループ前提
• 主張しすぎない

「音楽がある」だけで、

これは
ちゃんとしたゲームだ

という印象が決定的になります。

しかもこれも、
ノーコード・生成AI。

そのほか、地味だけど効いている調整

あえて派手に書いていませんが、
Version 30 ではこんな細かい部分も詰めています。

• スマホ操作時の誤タップ防止
• ダブルタップによる拡大対策
• ヒント表示の出し方
• リスタート導線
• 全体のテンポ調整

こういう部分は目立ちませんが、
「最後まで遊んでもらえるか」を左右する要素です。

Version 30 は「足した完成」ではない

振り返ると、Version 30 は、

• 要素を一番増やしたバージョン
  ではありません。

むしろ、

削いだうえで、
必要なところだけ磨いた完成形

です。

Version 18 で壊し、
Version 23 で立て直したからこそ、
ここに辿り着けました。

まとめ：ChatGPTと作る、という体験

今回やったことを、
あらためて整理するとこうです。

• コードはほぼ書いていない
• 設計書も作っていない
• やったのは
  ChatGPTとの壁打ち

それだけで、

• HTMLファイルは50超え
• やり取りは3桁
• スマホでも遊べるゲームが完成

正直、想像以上でした。

分かったこと

• 生成AIは「一気に詰め込む」と壊れる
• 小さく投げて、小さく直す方がうまくいく
• ノーコードでも、設計は必要
• でも設計は、日本語でいい

そして何より、

頼めば、だいたい何でもやってくれるから
楽しくなってしまう

そこが一番の罠であり、
一番の魅力でした。

この記事を読んだあなたへ

完璧なゲームを作らなくていいです。

• index.html を1つ作る
• 動かしてみる
• 気になるところをChatGPTに投げる

それだけで、
自分だけの何かは、確実に形になります。

このゲームはその証拠です。

今さらHTML？
はい、今さらです。

でも、
今だからこそ、こんな作り方ができました。