こんにちは、Karouです。今回は、九九をRPGバトルで楽しく学べる教育ゲーム「KUKU BATTLE MASTER」(くくバトルマスター)を作った経緯と、その中身についてお話しします。

きっかけは「九九の壁」

小学2年生で立ちはだかる「九九の暗記」。誰もが通る道ですが、子どもにとっては大きな壁です。ドリルを渡しても5分で飽きてしまう。かといって放っておくわけにもいかない。そんなとき、ふと思いました——「ゲームなら、楽しく続けられるのでは?」と。

RPGでモンスターを倒すためには攻撃が必要。その攻撃手段が「九九の回答」だったら?正解すればダメージを与えられ、間違えると反撃を受ける。この仕組みなら、遊びながら自然と九九が身につくはず。そんな発想から「KUKU BATTLE MASTER」の開発がスタートしました。

KUKU BATTLE MASTERでできること

主な機能

  • バトルモード:3段階の難易度(初級:1〜5の段、中級:6〜9の段、上級:2〜9の段)で約30体のモンスターと戦える。倒したモンスターは図鑑に登録され、コレクション要素も。
  • 手書き入力:キーボード不要。タッチ操作で数字を書いて回答できる。キャリブレーション機能で認識精度を個人に最適化。
  • 必殺技システム:正解を重ねてゲージを貯め、逆算・大小比較・連鎖計算の特殊問題で大ダメージ。戦略性が生まれる。
  • ボス&隠しボス:5連勝でボスが解放され、全ボスを撃破すると隠しボスが出現。隠しボス戦ではキー配置がシャッフルされるハードモードに。
  • 練習モード:段別ドリル、ランダム練習、苦手克服モードを搭載。バトル前の準備にも、反復練習にも使える。
  • 協力プレイ:2人で交互に回答してお城やロケットを建設。兄弟や親子で一緒に遊べる。
  • デイリーチャレンジ:日替わり5問の特殊問題に挑戦。毎日遊ぶ習慣をつけるきっかけに。

技術スタック

KUKU BATTLE MASTERは、Next.js 15 + TypeScript + React 19で構築しています。UIはTailwind CSSでスタイリングし、Firebase Hostingでデプロイ。PWA対応により、ホーム画面に追加すればオフラインでも遊べます。

特筆すべきは手書き数字認識をクライアントサイドで完結させている点です。外部APIを一切使わず、テンプレートマッチングと特徴量ベースの分類器を組み合わせた独自エンジンを実装しました。これにより、ネットワーク遅延ゼロでの即時判定を実現しています。

子どもファーストの設計思想

「算数が苦手な子にこそ使ってほしい」——その思いから、アクセシビリティには徹底的にこだわりました。

  • ひらがな読み付きの問題表示で、漢字が読めなくても遊べる
  • 左利き対応のテンキー配置で、利き手を問わず操作しやすい
  • 色覚サポートにより、色の判別が難しい子にも情報が伝わる
  • 音声入力にも対応し、書くのが苦手な子でも回答できる

派手な演出やゲーム性も大事ですが、まず「誰でも使える」ことが教育ツールの大前提です。見た目の楽しさとアクセシビリティを両立させることに時間をかけました。

6日間での開発

KUKU BATTLE MASTERは、構想からリリースまでわずか約6日間で完成しました。48コミットを重ね、怒涛の勢いで機能を積み上げていきました。

この爆速開発を可能にしたのがClaude Codeとの協業です。手書き認識エンジンのロジック設計、30体以上のモンスターデータの生成、バトルシステムのバランス調整——これらをAIコーディングエージェントと二人三脚で進めることで、個人開発の限界を超えた規模のプロダクトを短期間で形にできました。

「教育 × ゲーム × AI開発」の掛け合わせが生んだこのプロジェクト、ぜひお子さんと一緒に遊んでみてください。

→ KUKU BATTLE MASTER を遊んでみる

次の記事:手書き数字認識の技術解説一覧