はじめに
小学1年生の娘の「足し算のゲームがあったらやりたい」という一言をきっかけに小学生向け学習Webアプリを作った。
Next.js + Vercel + Neonで構築し、実際に娘に使ってもらいながら開発を続けている。この記事から数回に分けて、作りながら考えたこと・工夫したことなどをまとめていく。
子供駆動開発について
テスト駆動開発、ドメイン駆動開発のように、一般に定義された開発手法ではないが、子供のFBや意見をもとに開発を進めているため「子供駆動開発」と呼ぶことにしている。
機能を作っては娘に触ってもらい、反応を見て直す、を繰り返す。それだけだが、大人の目線では気づけないことを娘がよく拾ってくれる。
例えば認証画面のPIN入力を最初は「ひみつのことば」と呼んでいたが、数字の並びを見て「ことば？」と首をかしげられたので「ひみつのばんごう」に変更した。PINを合言葉の延長で名付けてしまっていたが、6歳児にとって数字の並びは「ことば」ではないらしい。こういう感覚のズレは、実際に触らせてみないと気づけない。
こうした具体例は、次回以降の記事でも随時紹介していく。
実装した機能
2026年8月時点で動いている機能は以下の通り。
- 会員登録・ログイン（ID + 6桁PIN）
- 練習モード（たしざん、難易度自動昇降）
- 正解に応じたポイント付与・着せ替えアイテムの解放
- 着せ替え（アイテム所持・交換・装備）
- タイムアタックモード・ランキング
対象は小学1年生のたし算・ひき算からで、将来的には小学1〜6年生の算数全般や漢字のよみまで広げる想定。
PWAにも対応している。
技術スタック
ざっくり下記のような感じ。
| 領域 | 採用技術 |
|---|---|
| フロントエンド/フルスタック | Next.js 16 (App Router) + TypeScript |
| スタイリング | Tailwind CSS |
| アニメーション | Framer Motion |
| ホスティング | Vercel |
| DB | Neon (Postgres) |
| ORM | Drizzle |
| 認証 | NextAuth (Auth.js) Credentials Provider |
無料で収まる範囲での構築且つ、自分のスキルアップも兼ねた構成にしている。
これから書いていくこと
以下のようなテーマで続けていく予定。
- 技術スタック選定理由
- 子供のための認証設計
- 子供が飽きないゲームデザイン（報酬設計・昇級と降級の非対称な扱いなど）
- 子供の目線でのUI/UX改善（ボタンの大きさ・色・アニメーションなど）
さいごに
娘から毎日「算数のゲームやりたい」と言われたり、楽しそうに取り組んでいる姿を見ると、作ってよかったなと思う。
コードはすべて公開している。