この記事の要点
- 九九の正解をそのまま攻撃アクションに変えることで、学習とゲーム進行を自然につなげている。
- Next.js 15 + TypeScript + Firebase Hosting + PWA 構成で、高速表示とオフライン利用を両立している。
- 手書き数字認識は外部 API を使わずクライアントサイドで完結させ、子どものデータを外に出さない設計にした。
- Claude Code と協業しながら、約6日・48コミットで教育ゲームとして遊べる形まで作り切った。
九九の暗記って、なぜあんなに退屈なんだろう。そんな疑問から生まれたのが「KUKU BATTLE MASTER」（くくバトルマスター）——九九をRPGバトルで楽しく学べる教育ゲームです。この記事では、作った経緯とその中身についてお話しします。
きっかけは「九九の壁」
小学2年生で立ちはだかる「九九の暗記」。誰もが通る道ですが、子どもにとっては大きな壁です。ドリルを渡しても5分で飽きてしまう。かといって放っておくわけにもいかない。そんなとき、ふと思いました——「ゲームなら、楽しく続けられるのでは？」と。
RPGでモンスターを倒すためには攻撃が必要。その攻撃手段が「九九の回答」だったら？正解すればダメージを与えられ、間違えると反撃を受ける。この仕組みなら、遊びながら自然と九九が身につくはず。そんな発想から「KUKU BATTLE MASTER」の開発がスタートしました。
KUKU BATTLE MASTERでできること
主な機能
- バトルモード：3段階の難易度（初級：1〜5の段、中級：6〜9の段、上級：2〜9の段）で約30体のモンスターと戦える。倒したモンスターは図鑑に登録され、コレクション要素も。
- 手書き入力：キーボード不要。タッチ操作で数字を書いて回答できる。キャリブレーション機能で認識精度を個人に最適化。
- 必殺技システム：正解を重ねてゲージを貯め、逆算・大小比較・連鎖計算の特殊問題で大ダメージ。戦略性が生まれる。
- ボス＆隠しボス：5連勝でボスが解放され、全ボスを撃破すると隠しボスが出現。隠しボス戦ではキー配置がシャッフルされるハードモードに。
- 練習モード：段別ドリル、ランダム練習、苦手克服モードを搭載。バトル前の準備にも、反復練習にも使える。
- 協力プレイ：2人で交互に回答してお城やロケットを建設。兄弟や親子で一緒に遊べる。
- デイリーチャレンジ：日替わり5問の特殊問題に挑戦。毎日遊ぶ習慣をつけるきっかけに。
技術スタック — なぜNext.jsを選んだか
KUKU BATTLE MASTERの技術構成は、Next.js 15 + TypeScript + React 19。教育ゲームにNext.jsはオーバースペックに見えるかもしれないが、SSGによる高速な初回読み込みと、App Routerによるページ構造の整理が決め手だった。UIはTailwind CSSで統一し、Firebase HostingにデプロイしてPWA化。ホーム画面に追加すればオフラインでも遊べる構成にしている。
特筆すべきは手書き数字認識をクライアントサイドで完結させている点だ。外部APIを一切使わず、テンプレートマッチングと特徴量ベースの分類器を組み合わせた独自エンジンを実装した。子どもの手書きデータを外部に送信しないというプライバシーの観点からも、この設計は重要だった。
子どもファーストの設計思想
「算数が苦手な子にこそ使ってほしい」——その思いから、アクセシビリティには徹底的にこだわりました。
- ひらがな読み付きの問題表示で、漢字が読めなくても遊べる
- 左利き対応のテンキー配置で、利き手を問わず操作しやすい
- 色覚サポートにより、色の判別が難しい子にも情報が伝わる
- 音声入力にも対応し、書くのが苦手な子でも回答できる
派手な演出やゲーム性も大事ですが、まず「誰でも使える」ことが教育ツールの大前提です。見た目の楽しさとアクセシビリティを両立させることに時間をかけました。
6日間での開発
KUKU BATTLE MASTERは、構想からリリースまでわずか約6日間で完成しました。48コミットを重ね、怒涛の勢いで機能を積み上げていきました。
この爆速開発を可能にしたのがClaude Codeとの協業です。手書き認識エンジンのロジック設計、30体以上のモンスターデータの生成、バトルシステムのバランス調整——これらをAIコーディングエージェントと二人三脚で進めることで、個人開発の限界を超えた規模のプロダクトを短期間で形にできました。
「教育 × ゲーム × AI開発」の掛け合わせが生んだこのプロジェクト、ぜひお子さんと一緒に遊んでみてください。
関連記事
- 手書き数字認識を自前実装した話 — 教育ゲームの入力体験を支える認識ロジックを詳しく解説。
- KUKU BATTLE MASTER のバトルシステム設計 — 学習とゲーム性を両立させた数値設計の裏側。
- KUKU BATTLE MASTER の開発記録 — 6日間で形にした制作プロセスを時系列で振り返る。
よくある質問
Q. KUKU BATTLE MASTER はどんな人向けの教育ゲーム？
A. 九九をドリルだけで覚えるのが苦手な小学生や、ゲーム感覚で反復練習したい家庭向けです。正解すると攻撃できる仕組みなので、勉強より遊びに近い感覚で続けやすくしています。
Q. 教育ゲームなのに Next.js を使った理由は？
A. SSG による軽い初回表示と、App Router で機能を整理しやすい構成が相性良かったからです。PWA 化もしやすく、ホーム画面追加やオフライン利用までまとめて扱えました。
Q. AI はこの個人開発でどこに使った？
A. モンスターデータの下書き、ロジック設計のたたき台、実装補助などに AI を使いました。ただし最終的な仕様判断や品質確認は人間側で行い、教育ゲームとして遊べる水準に整えています。