ブラウザゲームの作り方｜AIに記憶力テストを作らせた実録（題材選びから検収まで）

ブランチを作ってから最初のコミットまで約11分。今回の主役は「どんな形にするか」

先に結論から。ブラウザで遊べるミニゲームの3本目として、記憶力テストをAI（Claude Code）に作らせた。
git に残った時刻では、作業用のブランチ（本番に混ぜずに作業する分かれ道）を作ったのが8時54分、ゲーム本体の最初のコミットが9時05分で、そのあいだは約11分。
追加は10ファイル・940行。検収では小さな直しを2件入れた。
スマホの幅で正誤の数字が小さく読みにくかった点（9時06分のコミット）と、不正解の直後に回数の表示が1つ先の「2回目」になっていた点（9時09分のコミット）だ。

今回は、題材を選ぶところからAIに任せている。仕様書も、私ではなく、作業を割り振るAI（PM役）が書いた。
実装と検収をしたのは、作業担当のAIだ。
この記事で題材や形を「選んだ」「決めた」と書いているところは、どれもAIがしたことになる。

1本目は35分、2本目は13分と書いてきたが、測り方が回ごとに違うので、数字を並べて「速くなった」とは言い切れない。
それに、今回いちばん書き残したいのは速さではない。
「記憶力テスト」と一口に言っても形がいくつもあり、そのどれにするかを、AIがキーワードの実測で決めたところだ。

記憶力テストで遊んでみる（無料・登録不要）

3本目に記憶力テストを選んだ理由

このサイトでは、作る題材をキーワード調査から決めている。
「記憶力テスト」は月1,900回の検索があり、SEOの難しさを示す指標は37。
2本目の題材にした「動体視力 テスト」（月3,600回・難しさ34）と同じくらいの規模だ。
そちらは公開済みで、検索結果の上位10件のうち7件が小規模なツールのページという顔ぶれだった（2026年10月1日の実測）。
似た客層のテストゲームをもう1本足して、3本を相互リンクでつなぐ。
作業を割り振るAI（PM役）が立てた今回の狙いは、これだった。

「どんな記憶力テストか」をデータで決めた

記憶力テストには、数字を覚える形、絵を覚える形、一瞬見た映像を覚える形、光った順番を覚える形などがある。
そこでAIは、ラッコキーワードで「記憶」を含む語を一覧にして、形ごとに検索数を足した（2026年10月2日に取得した値）。

数字だけ見れば、映像・瞬間記憶系がいちばん大きい。ところが検索結果の上位10件を見ると、印象が変わった。

• 「映像記憶能力 テスト」の上位は、能力そのものについての読み物、知恵袋、画像を覚えるクイズ記事が中心で、その場で遊べるゲームのページは少数だった
• 「数字記憶テスト」の上位は、10件中9件がブラウザでそのまま遊べるページで、残る1件がアプリストアだった
• 大きな語の「記憶力テスト」でも、上位には数字を覚える形式を含むテストのページが入っていた

検索している人が「いますぐ遊びたい」のか「その能力について知りたい」のか。ゲームのページで答えられるのは前者だ。
数字の記憶は合計こそ映像系の半分ほどだが、検索の目的とゲームの形がそのまま重なる。
それに、上位に並んでいるのは大手より小さなツールのページが多い。ここなら、遊べるページを1枚きちんと作れば勝負になる。
AIはそう判断して、数字の記憶を選んだ。

ちなみに調査に使ったラッコキーワードの呼び出しは、記事のキーワード選びの分も含めて5回、消費は12クレジットだった。

仕様書に書いたこと——2本分の約束を最初から入れる

PM役のAIが書いた仕様書には、1本目と2本目で決めてきた「作りの約束」が最初から並んでいた。

• ゲームは画面の中だけで完結させ、記録はどこにも送らない。端末に残すのは自己ベストだけ
• ゲームのページでは広告のスクリプトを読み込まない（連打する画面での誤クリックを防ぐため）
• ボタンは指で押しやすい大きさ（44px以上）にする
• 正解・不正解を色だけで伝えない
• 動きを減らす設定の人に配慮する
• 結果が出たら、読み上げソフトの読む位置を結果の見出しへ移す
• 実在しない平均値やデータを作らない

今回の題材で足したのは2つ。1つは、日本語入力のまま数字を打っても答えられること。
パソコンで日本語入力をオンにしていると、数字が全角になる。
全角の「１２３」でも正解になるように、判定の前に半角へそろえる作りにした。
もう1つは、数字を表示している最中に別のタブへ移ったときの扱い。
裏に回ったタブではブラウザがタイマーを間引くので、表示時間が狂う。
タブを離れたら一時停止して、戻ったら同じ桁数で新しい数字を出し直す（間違いには数えない）ようにした。

ゲームの形は、3桁から始めて正解するたびに1桁ずつ長くし、同じ桁数で2回続けて間違えたら終わり、最大20桁。表示時間は「0.7秒＋1桁あたり0.5秒」にした。

平均値は、論文の本文で確かめた分だけ載せた

記憶力テストを探している人は「ふつうは何桁覚えられるのか」も知りたいはずだ。
ただ、AIに頼むと、それらしい年代別の平均を書いてしまうことがある。
2本目のときから「実在しない統計を作らない」を仕様書の約束にしているのはそのためだ。

今回は、記憶できる量の話でよく引かれる、心理学者ジョージ・ミラーの1956年の論文の本文を、AIが確かめている。
多くの種類の材料で、すぐあとに思い出せる数はおよそ7項目。
材料によって幅があり、2進数の数字ではおよそ9、1音節の英単語ではおよそ5まで下がる。
ゲームのページには、本文で確かめたこの部分だけを出典つきで載せた。
そのうえで、ゲームは研究と同じ測り方ではないので、目安として見てほしいと書き添えている。
称号の区切り（7〜8桁なら「バランス記憶型」など）は、ゲームの中だけの自前の基準だと明記した。

結果——git に残った時刻で振り返る

作業の時刻は、推測ではなく git の記録から拾った。

git に残るのは、ブランチを作った時刻とコミットの時刻だけだ。そのあいだに何をどの順でしていたかまでは残らない。
キーワード調査がブランチを作る前に始まっていたかどうかも、git からはわからない。
直し2件のうち1件目のコミットは本体から2分足らずなので、それを見つけた検収（スマホの幅での確認など）は、本体のコミットより前に始まっていたとみられる。
表は「コミットした順」であって、「作業した順」ではない。

型チェックとビルドは、最初の実行で通った。途中で作業担当のAIが自分で気づいて直した点が1つある。
ゲームの規則（桁数や表示時間、称号の区切り）を、最初はゲーム本体のファイルの中に置いていた。
ところが、この規則はゲームの説明ページの表でも使う。
ゲーム本体は「ブラウザの中で動く部品」として作ってあり、そこから説明ページへ値を持ち出すと、正しく渡らない作りになっている。
そこで規則だけを別のファイルに分けて、両方から読むようにした。
私には書けない種類の判断だが、何をなぜ直したかは報告に残っていた。

検収——今回は自動で通しプレイできた

2本目の検収では、ブラウザを自動操作してゲームを遊ばせようとしたところ、画面が見えていない状態だったせいでゲームが止まってしまい、通しプレイを諦めた。
今回の記憶力テストは、画面の描き直しの仕組みではなくタイマーで表示を切り替えているうえ、画面が見えていることを確かめてから動かした。
結果、自動の通しプレイで次のことを確かめられた。

• 全角の数字で答えても正解になる
• 「答える」を素早く2回送っても、判定は1回だけ
• 入力欄、次へのボタン、結果の見出しへと、読む位置が順に移る
• 端末に残るのは自己ベストの1件だけ
• ゲームのページで広告のスクリプトが読み込まれていない
• 表示中にタブを離れたことにすると一時停止し、戻ると新しい数字（061から461へ）で出し直す
• スマホの幅（375px）で横にはみ出さない

直したのは2件。1件目は見た目だ。
スマホの幅で画面を撮ってみると、不正解のときに出る「正解」と「あなたの答え」の数字が小さく、どこが違ったのかを見比べにくかった。
数字を大きくして、違っていた桁には色に加えて下線と太字を付けている。
動くかどうかは自動で確かめられても、読みやすいかどうかは画面を見ないとわからない。

2件目は、同じ画面の上に出る「3桁・2回目」という状況の表示だ。
1回目を間違えた直後、まだ1回目の結果を見ている最中なのに、表示はもう「2回目」になっていた。
数え方を「正誤を見ているあいだは、いま答えた回」に合わせて直した。どちらも、ゲームが壊れる種類の不具合ではない。
それでも、遊ぶ人が一瞬「あれ？」と思う場所は、スクリーンショットを1枚撮って眺めると見つかる。

3本並べてみる

時間の行は、かっこの中のとおり測り方がそろっていない。比べるなら時間より、検収の行のほうだと思う。
回を重ねて効いてきたのは、過去の失敗と約束が仕様書に積み上がっていることだ。
1本目のバグは2本目の仕様書に入り、2本目の検収のつまずきは3本目の作り方に入った。
ブラウザゲームの作り方で私が伝えられるのは、プログラミングの手順ではなく、この「前の1本を次の仕様書にする」回し方のほうだ。

まとめ: ブラウザゲームは「形を決める」と「約束を渡す」でほぼ決まる

コードを書かなくても、ブラウザで遊べるゲームはAIに作らせられる。
3本目の記憶力テストは、ブランチを作ってから最初のコミットまで約11分だった（git の時刻）。
ただ、書き残したいのは時間より、進め方のほうだ。
どんな形のゲームにするかを検索の実測と上位ページの中身で決めたこと、過去2本で決めた約束が最初から仕様書に入っていたことが大きい。
今回は、そのどちらもAIがやっている。

出来上がったゲームはこちら。何桁まで覚えられるか、気軽に試してみてほしい。記録は端末の中にだけ残り、外には送られない。

記憶力テスト（数字）で遊ぶ（無料・スマホ対応）

1本目の顛末は反射神経テストの実録に、仕様書だけで作らせた2本目は動体視力テストの制作記録に書いた。
4本目の色の見分けテストの制作記録と、5本目の空間認識テストの制作記録も、題材選びからAIに任せた回だ。
AIだけで作って公開したものの一覧はバイブコーディングの始め方にまとめている。