【ShinのAI活動ログ】生成AI用語を楽しく学べる「AIダイスオブクイズ」を作ってみた

残り3秒。あと1ペアでステージクリアなのに、めくったカードが外れてコンボが切れる。
タイマーバーが赤く点滅して、頭が一瞬真っ白になる

——「AIダイスオブクイズ」を遊ぶと、今はこんな緊張感のあるゲームになっています。

用語カードと説明カードのペアを当てる神経衰弱です。今回はここに至るまでの実装過程を振り返ってみます。

きっかけ

生成AI用語を楽しく学べるゲームを作りたいな、と思ったのがきっかけです。
用語集のページはあるものの、読むだけだとどうしても流し見になってしまいます。

神経衰弱なら仕組みがシンプルで、AI用語と説明のペアを当てるだけでクイズ要素も自然に乗ります。

キャラクターはジェナとAOI。普段はジェナのモードで、ゲームに挑戦すると「アバターに切り替えるけど、いい？」と聞かれて、AOIに変身します。

ジェナのほんわかした雰囲気から、AOIの「見せてもらうよ」という挑戦的な物言いに切り替わる、その温度差をちょっとした演出として仕込みました。

最初の形から仕様変更へ

最初の版は初級・中級・上級から難易度を選ぶ形でした。
これだと、得意な人は上級だけ遊んで終わってしまいますし、初級だけで満足してしまう人もいます。

途中で「初級から上級までを廃止して一本化、全5ステージで時間制限を徐々に短くする」方向に変更しました。
選んで終わりじゃなく、最後まで通しで挑戦する一本道のゲームにしたかったんです。

スコアの設計では、正確さだけを評価する作りにはしたくありませんでした。じっくり考えて全部当てる人と、勢いでどんどんめくっていく人、どちらにもちゃんと点が伸びる手応えを用意したい。
そこで

• ペアが揃うごとに基本点
• 連続でペアを当てるとコンボ加点（ミスでリセット）
• ステージクリア時、残り時間に応じたタイムボーナス
• 5ステージ終了後、合計スコアでS〜Dランクを表示

コンボは「勢いに乗れているか」、タイムボーナスは「思い切って攻めたか」を点数に変える仕組みです。慎重に1ペアずつ当てるだけでは伸びない作りにしています。

時間切れは即ゲームオーバーにしました。猶予を作らず、その場でランク画面に飛びます。
生ぬるくしないほうが、クリアした時の手応えが残ると判断しました。

合成音（Web Audio API）でカードのクリック音、マッチ成功時の音、ミス時の低い音、ステージクリア音、ランクに応じたフィナーレを追加しました。

コンボが伸びるほどマッチ音の音程が少し上がる仕掛けも入れています。
耳で「今、勢いに乗っている」とわかるようにしたかったんです。

背景もシンプルすぎたので、薄い斜線パターンと浮遊するダイスのアイコンを全画面共通で敷きました。
テーマカラー（ジェナのイエロー／AOIのブルー）に合わせて模様の色も切り替わります。

トップページへの導線

ゲームを作っても、見つけてもらえないと意味がありません。トップページの記事一覧とゲームコーナーの間に、既存の「生成AI〇×ダンジョン」バナーと並べる形でリンクバナーを設置しました。

サイズ感を揃えるところで一手間かかりました。最初は見た目だけ近づけようとしてズレが出てしまいます。
最終的には既存バナーの実コードから数値（最大幅、余白、フォントサイズ）をそのまま引いて合わせました。
推測で近づけるより、答え合わせができるものがあるならそれを見るのが早いです。

おわりに

残り3秒でカードを外してコンボが切れる、その悔しさにもう一回挑みたくなる。
そういう短い緊張と回復のループを作りたくて、ここまで仕様を組み直してきました。

トップページからどうぞ。何ステージまで行けるか、ぜひ試してみてください。