🍣
AI壁打ちから半日でブラウザゲームをリリースするまで - タイピング回転寿司「量子マグロ亭」開発

2026/02/16に公開
 開発の背景と動機「今日は時間あるな。何か作ろうかな」
そんな軽い気持ちから始まった半日開発チャレンジ。普段はバックエンドエンジニアとしてRubyを書いている私が、TypeScriptもほとんど触ったことがないのにブラウザゲームを作ってリリースするまでの記録です。
最終的に完成したのは、サイバーパンク世界観の回転寿司タイピングゲーム「量子マグロ亭」。
https://quantum-maguro.vercel.app/
流れてくる寿司をローマ字入力で取っていく、同時タイピング対応のブラウザゲームです。
この記事では、AIを活用してアイデア出しから開発、リリースまでを半日で駆け抜けた開発ストーリーをお届けします。

 企画フェーズ：AI壁打ちで何を作るか決める
 天秤AIで6種類のAIに同時相談まず最初に取り組んだのは「何を作るか」の企画。ここで活用したのが「天秤AI」という複数のAIに同時に質問できるサービスです。
以下のプロンプトを、Claude 4.6 Opus、GPT-5.2、Gemini 3 Pro、DeepSeek R1、Perplexity、PLaMo 2.1 Primeの6種類のAIに同時に投げかけました。
AIへの相談プロンプト
TypeScript + Vite + Vercel でWebアプリを開発したいです。
AIコーディングエージェントを使った開発を想定しています。
どのようなアプリを作ると良いでしょうか？

条件：
- 既存サービスのコピーではなく、オリジナリティのあるもの
- 半日程度で完成できる規模
- 技術的な挑戦よりも、アイデアの面白さ重視
各AIから様々な提案が返ってきました：

Claude: 締切デスクロック、回転寿司タイピング、逃げる承認ボタンなど7案

GPT-5.2: 言い訳ジェネレーター、カタカナ語翻訳機、炎上リスク診断など6案

Gemini: AI セルフディスり、迷言ジェネレーターなど（やや大風呂敷）

Perplexity: 奇妙な習慣アドバイザー（1案を深掘り、実装手順付き）

その他: 開発者向けジョークアプリなど
天秤AIのジャッジ機能が全提案を分析してくれたのですが、その結論は：
「ビジュアルで一発ネタ」なら Claude の締切デスクロックか回転寿司タイピング

「文章ネタでサクッと」なら OpenAI の言い訳ジェネレーター
この中で私の目を引いたのが、Claudeが提案してくれた「回転寿司タイピング」でした。
Claudeからの提案内容
2. 🍣 「回転寿司タイピング」
画面を寿司が流れてきて、ネタの名前をタイピングして皿を取る。
ただし全部ギリギリ読めない創作寿司（「量子マグロ」「分散キュウリ巻」など）。
正解が存在しない理不尽さがネタになる。

バズポイント: スクショが面白い・スコア共有したくなる
技術: requestAnimationFrame + キーボードイベント
「量子マグロ」というパワーワードに惹かれました。

 「同時タイピング」というアイデアの誕生ただのタイピングゲームだと既存のゲームに埋もれてしまう。何かオリジナルの要素が欲しい。
そこで思い出したのが、以前プレイしたゾンビ系のタイピングゲーム。あれは1体ずつしか攻撃できず、「複数を同時に処理できたら面白いのに」とずっと思っていました。
そこで、こんな提案をClaudeに投げてみました：
追加のアイデア提案プロンプト
例えば大量に寿司が流れてきて、入力すると全部の寿司に対して
タイピングが有効というのはどうでしょうか？

「暗黒マグロ」を見て ankoku maguro とタイピングしたら
隣にある「黒龍イカ」に koku r まで入力済みになるという感じです。
寿司が同時に5つくらい流れてきて、どれを入力してもよいというようにします。
ミスタイピングはマイナスにしません。

既にこういったアイデアのタイピングゲームはありますか？
Claudeの反応：
これは面白い発想ですね。少し整理させてください。
この「入力が全ターゲットに同時適用される」仕組みは、タイピングゲームとしてはかなり珍しいです。
少なくとも有名タイトルでこの方式を採用したものは思い当たりません。
まじか！！！
そして、Claudeはこの仕組みの面白さを具体例で示してくれました：
同時タイピングのロジック解説
画面に5つ流れている：

  「暗黒マグロ」  ankokumaguro
  「黒龍イカ」    kokuryuuika
  「虚無ハマチ」  kyomuhamachi
  「苦悩サバ」    kunousaba
  「雲丹概念」    unigainen

プレイヤーが「k」を押した瞬間：

  「暗黒マグロ」  a̲nkokumaguro    → 不一致
  「黒龍イカ」    k̲okuryuuika     → 一致！進行
  「虚無ハマチ」  k̲yomuhamachi    → 一致！進行
  「苦悩サバ」    k̲unousaba       → 一致！進行
  「雲丹概念」    u̲nigainen       → 不一致

次に「o」を押す：

  「黒龍イカ」    ko̲kuryuuika     → 一致！さらに進行
  「虚無ハマチ」  ky̲omuhamachi    → 不一致
  「苦悩サバ」    ku̲nousaba       → 不一致
ここで生まれるのは「戦略」です。
どの寿司を狙って打ち始めるか
途中で「あ、こっちの寿司の方が進んでる」と気づく
偶然2つ同時に取れる瞬間の快感
これいけるわ！！！
従来のタイピングゲームは「1つのターゲットを選ぶ → それを打つ」という流れですが、この仕組みなら「打った文字が全ての寿司に同時マッチングされる」ため、偶発的な爽快感が生まれます。

 最初に考えた機能は全部ボツになった同時タイピングのアイデアが固まってから、さらに機能を膨らませていこうとしました。
最初に私が考えていた追加要素：
読み方が複数ある（例：「暗黒」→「あんこく」「ダークネス」どちらでもOK）
読みを表示せず、ユーザーに推測させる（例：「出納」→「すいとう」、「究極」→「アルティメット」）
我ながら面白いと思ったんですが…
この2つの要素は「同時タイピング」の爽快さを阻害してしまいます。

読み方を推測している時間は他の寿司が流れていってしまい、

ゲームのテンポが悪くなります。

半日で完成させるなら、もっとシンプルにした方が完成度が高くなります。
え？めっちゃ反対された？？？
…いや、冷静に考えたら確かにそうです。読み方を考えている間に寿司が流れていったら、同時タイピングの意味がないです。
これ、結構重要だと思っていて、多くのAIは「それ面白いですね！」と言ってくれるんですが、実際に動くものを作る上では「この要素は削った方が良い」と指摘してくれるAIとの対話が大事でした。全肯定されると、結局スコープが広がりすぎて完成しないんですよね。
Claudeはさらにゲームを面白くする要素を提案してくれました：

コンボシステム：連続で取るとスコア倍率アップ

同時取りボーナス：複数の寿司を同時に完成させると高得点

スコアランク制度：16段階のランク（「量子マグロの神」から「寿司見習い」まで）

大将のランダムコメント：ランクごとに異なるメッセージ
こうして、ゲームの基本構造が固まりました。

 サイバーパンク × 回転寿司というカオス実は「量子マグロ」「サイバーパンク」という世界観は、最初のClaude提案の時点で既に含まれていました。
ただし全部ギリギリ読めない創作寿司（「量子マグロ」「分散キュウリ巻」など）
この「量子マグロ」というパワーワードから、「量子マグロ亭」という店名が生まれ、そこからサイバーパンクな世界観に広がっていきました。
冷静に考えると意味不明ですが、この「カオス感」が逆に印象に残るのではないかと。

 開発フェーズ：TypeScript未経験でもなんとかなる
 技術選定はAIに任せた「TypeScript？書けません。でも大丈夫です」
バックエンドエンジニアの私は、普段Rubyを書いています。TypeScriptの経験はほぼゼロ。
でも、AI時代の技術選定には明確な基準があります：「学習データの多い技術を選ぶ」
AIに相談した結果、TypeScript + Vite + Vercel という構成に。理由は単純で、これらの技術は学習データが豊富で、AIが高精度なコードを生成できるから。
実際、RubyよりもTypeScriptの方が「一発で動くコード」の生成率が高いように感じました。型情報があることで、ビルドエラーだけで自律的に修正できるためだと思います。

 Google Antigravityで開発スタート開発にはGoogle Antigravityを使用しました。
最初の「とりあえず寿司が流れてきてタイピングができる」バージョンは、驚くほどあっさりと一発で生成できました。
「requestAnimationFrameで寿司を流して、キーボードイベントでマッチング判定するゲームを作って」というざっくりした指示だけで、動くプロトタイプが完成。
画面に寿司が流れてくる。キーボードで入力すると反応する。
まじで動いてる…！！！

 ローマ字入力地獄ただし、すべてが順調だったわけではありません。
一番苦労したのがローマ字入力パターンの実装です。
最初のAI生成版では：
「ちょ」→ tyo のみ受付、cho は不可
「しゃ」→ sya のみ受付、sha は不可
は？これじゃ遊べないんですけど…
「全パターンのローマ字で入力できるようにして」と指示しても、存在しないパターン（thiなど）を追加してきたり、逆に必要なパターンが抜けていたりしました。
何度指示しても、微妙にズレたパターンを生成してくるんです。
「あー、これAIに曖昧な指示出しても無理なやつだ」と気づいて、自分でローマ字変換の全パターン対応表を作成しました。
ローマ字対応表の定義メモ
しゃ: sha, sya
ちょ: cho, tyo
ん: nn, n
...
このシンプルなメモ形式のデータを渡したところ、AIが正しく実装してくれました。
曖昧な指示よりも、具体的なデータを渡した方が精度が高いです。というか、AIが知らない領域（日本語のローマ字入力の全パターン）は、人間が整理してあげないとダメですね。

 手動で書いたコードは「定数の変更」だけそれ以外は、ほぼ100% AIが生成したコードです。
手動でコードを変更したのは、ゲームバランス調整のための定数変更くらい：
gameConfig.ts
/** 次の寿司が出るまでに必要な最低距離（px） */
MIN_SPAWN_DISTANCE: 300,
/** 画面内に表示できる寿司の最大数 */
MAX_LIVE_SUSHI: 7,
/** 即時出現モードになる寿司の残り数閾値 */
IMMEDIATE_SPAWN_THRESHOLD: 3,

 200種類の寿司データを生成する
 Claude 4.6 Opusに大量データを生成させるゲームの肝となる寿司ネタのデータ。これも全てAIに生成させました。
天秤AIは裏でAPIモードで動いている（おそらく）ため、チャットAIにありがちな「長すぎるので分割します」といった制限がありません。
以下のような詳細なルールを与えて、一気に大量データを生成させました：
データ生成用プロンプト
タイピングゲームの寿司データを作成します。
画面内にある寿司を同時にタイピングできるのがこのゲームのコアです。

以下の要件に沿ってデータを可能な限り大量に作成してください：

- 「形而上トロ」など一般的に読みづらい言葉は避ける
- 回転寿司要素を必ず入れる。ガリやお茶、プリンなど寿司ネタと
  直接関係なくてもよい。ただし、飲食できないものは避ける。
- ネットミーム、割と広く通じそうなエンジニア用語、
  ちょっとボケた言い回しをふんだんに取り入れる
- ランダムとグループすべてで重複は禁止。
  部分一致（例：量子マグロ、存在しないマグロ）はOK
- 同時タイピングの強みを活かして、グループは部分的に重複する言葉を入れること

例1: 量子マグロ、量子イカ、量子タマゴ（先頭一致）
例2: トランザクションエビ、ロールバックエビ、デッドロックエビ（末尾一致）

- 同じグループ内では先頭一致か末尾一致、どちらかの方針に統一する
- 難しい漢字は避ける。ひらがなやカタカナでも自然なものは漢字を使わない
「同時タイピング」という独自システムを活かすためのデータ設計が重要です。
先頭が同じグループ：自然にタイピングするだけで複数ヒット → 爽快感
末尾が同じグループ：後半でまとめて完成 → 戦略性
結果、200種類以上の寿司ネタが生成されました：
sushiData.yml
# グループ例
- id: 'quantum'
  sushis:
    - name: '量子マグロ'
      reading: 'ryoushimaguro'
    - name: '量子イカ'
      reading: 'ryoushiika'
    - name: '量子タマゴ'
      reading: 'ryoushitamago'

- id: 'transaction'
  sushis:
    - name: 'トランザクションエビ'
      reading: 'toranzakushonebi'
    - name: 'ロールバックエビ'
      reading: 'ro-rubakkuebi'
    - name: 'デッドロックエビ'
      reading: 'deddorokkuebi'
適切なタイミングでグループ寿司が流れてくることで、「3つ同時に取れた！」という快感が生まれます。

 デザイン：AIに「サイバー感」を依頼しただけ驚いたのが、デザインの生成精度です。
Gemini 3 Proに「サイバー感あるデザインにして」と依頼しただけで、現在のほぼ最終形に近いデザインが生成されました：
ネオンブルー（#00f3ff）とネオンピンク（#ff006e）の配色
グリッチエフェクト (ノイズ、歪み、色ずれを表現する技法)
パーティクルエフェクト（正解時）
TypeScript未経験の私が、CSSアニメーションやグリッチエフェクトを手書きすることなく、ここまでのビジュアルが実現できたのは、正直言って驚きでした。

 ゲームバランス調整に2時間完成までの約6時間のうち、約2時間はテストプレイとバランス調整に費やしました。

 初期バージョンは遊べなかった「寿司が・・・寿司が速すぎて取れない・・・！」
AI生成の初期バージョンでは、寿司が流れてくるのが速すぎて1つも取れない状態でした。
また、ボーナス得点の設定も極端で：
4つ同時取りで50倍ボーナス → 1回成功すれば最高評価に
逆にボーナスが少ないと、同時取りより数を取った方が高得点に
これだと同時タイピングの意味がないんですよね。
何度もプレイして、数値を微調整しました。
目指したのは：
少し時間をかけて同時取りを狙う方が高得点になる
でも、たくさん取ることでもそれなりのスコアは出る
初心者でも楽しめるが、上級者は戦略を練れる
この「ちょうどいい難易度」を見つけるのが、一番時間がかかった部分でした。結局、コードを書く時間より、プレイして調整する時間の方が長かったです。

 実装したゲーム要素完成したゲームには、以下のような機能が実装されています。
ゲームモード
通常モード：スタンダードな難易度
特上モード：より高速で難易度の高いチャレンジモード
ゲームシステム
同時タイピング：画面上の全寿司に同時に入力可能
コンボシステム：連続で取るとスコア倍率アップ
同時取りボーナス：2つ以上同時で大幅ボーナス
スコアランク：16段階（「量子マグロの神」から「寿司見習い」まで）
大将コメント：ランクごとに異なるランダムメッセージ
データ量
200種類以上の寿司ネタ
ランダム出現とグループ出現の組み合わせ
YAMLで管理（重複チェックスクリプト付き）
UI/UX
サイバーパンクなデザイン（ネオンエフェクト、グリッチアニメーション）
モバイル対応（ソフトウェアキーボード付き）
Twitterシェア機能

 半日開発の内訳実際の開発時間：

企画・AI壁打ち：30分

実装：3時間

テストプレイ・バランス調整：2時間

寿司データ作成：30分
合計約6時間で、アイデア出しからリリースまで完了しました。





 振り返ってみて
 AIは企画段階から使える今回、複数のAIに相談したのが良かったです。天秤AIで6種類のAIに同時に投げかけることで、多様な視点が得られました。
重要だと思ったのは「半日で完成させる」という制約を明示したこと。これがないと、AIは「できたら面白い機能」をどんどん提案してきて、結局完成しないんですよね。
あと、全肯定されるより、「この要素は削った方が良い」と指摘してくれるAIとの対話が大事でした。

 人間が決めることは変わらないAIがコードを書いてくれても、結局決めるのは人間です。
「同時タイピング」というアイデアは人間が思いついたものですし、ゲームバランスは実際にプレイして調整する必要がありました。データ設計も、同時取りを活かすグループ構造は人間が考えました。
AIは「実現手段」を提供してくれますが、「何を作るか」「どうあるべきか」は人間が決める必要があります。

 「とりあえず動く」は価値じゃなくなったかもしれない開発を終えて強く感じたのは、「とりあえず動くものが作れる能力」が称賛される時代が過ぎようとしていること。
TypeScript未経験でも、半日でここまでのゲームが作れてしまいます。
これからは「何を作るか」（企画力）、「どう調整するか」（バランス感覚）、「どう魅せるか」（デザインセンス）といった、より高次の能力が問われる時代に向かっていくのかもしれませんね。

 おわりに「半日で何か作ろう」という思いつきから始まった開発でしたが、AIの力を借りることで、想像以上のものが完成しました。
タイピング回転寿司「量子マグロ亭」、ぜひ遊んでみてください！
https://quantum-maguro.vercel.app/
そして、あなたのハイスコアを #量子マグロ亭 でシェアしてください。
大将が待っていますよ。👨‍🍳🍣✨