はじめに
中学生になる子どもが勉強を少しでも楽しんでもらおうと
ゲーム感覚で習熟度の管理ができたら面白いかなと思いClaudeに相談してつくってみたところおもったよりも良いものができました。
それであれば高校生の子ども向けにも使えるようにしてみたら面白くなるかもしれないと思い、少し汎用性を聞かせたものができました。
インフラエンジニアなので普段はサーバやクラウドばかりで、フロントエンドはほぼ素人ですが、
今回はClaudeに相談しながら楽しく作ることができたのでそのときの思い出を記念に残しておきます。
作ったもの
「共通テスト80%突破への冒険マップ」
Github: https://github.com/watyanabe164/kyotsu-study-map/tree/main
- ブラウザで動くHTML+JavaScriptの単一ファイルアプリ
- 科目・単元ごとに習熟度を管理
- 4択クイズ形式でスコアを記録
- 子ども受けを狙ってアチーブメント、レベルアップ要素の演出を用意
設計のポイント：問題をアプリに持たせない
これが今回一番こだわった点です。
普通に考えると「問題データもHTMLに埋め込む」か「サーバから取得する」かになります。でも前者は問題の追加・更新が大変、後者はサーバが必要で管理コストがかかる。
なにより、問題を作りこんでしまうと自分がずっとメンテナンスしないといけない。
そこで、子どもでも作問できるような仕組みにしたいと思いました。
そこで考えたのが 「ツールは問題作成を支援するプロンプトを出力するだけにする」 という設計です。
アプリ内の「Gemini用プロンプトをコピー」をクリックして作問プロンプトをクリップボードへコピー
↓
そのままGeminiやClaudeに貼り付け
↓
AIが現在のツールが読みこめる形式に合わせた問題データをJSON生成
↓
生成されたJSONをアプリに貼り付け
↓
「アドオンを適用する（データをマージ）」をクリック
↓
ポップアップウィンドウが現れたらマージ成功、画面がリフレッシュされ単元ごとの問題が画面に表示される
この設計にすることで：
- アプリ本体が軽量：問題データを一切持たない
- 問題が無限に増やせる：AIに依頼するだけ
- 科目・単元のカスタマイズが自由：JSONの構造さえ守れば何でも追加可能
- 実行環境ゼロ：HTMLファイルをダブルクリックするだけ
プロンプトの中には「現在の単元ID一覧」を動的に埋め込んでいるので、AIが既存構造を理解した上で重複なく問題を追加してくれます。
問題データの構造
AIが生成するJSONはこのような形式です：
[
{
"subj": "数学Ⅰ・A",
"sid": "m1a",
"icon": "📐",
"units": [
{
"id": "m1a-1",
"name": "数と式・論理と集合",
"qs": [
{
"q": "問題文",
"h": "ヒント（視点のヒント）",
"cs": ["選択肢0", "選択肢1", "選択肢2", "選択肢3"],
"a": 0,
"e": "解説文"
}
]
}
]
}
]
科目（subj）→ 単元（units）→ 問題（qs）の3階層。シンプルですが、この構造があればアプリ側でマージ・重複排除まで自動でやってくれます。
解説文に「次の質問プロンプト」を埋め込む工夫
作問プロンプト側の工夫ですが、
問題を解いた後の解説文の末尾に、追加プロンプトを入れるように指示しています：
💡【Gemini質問プロンプト例】
▼この問題を掘り下げたい！
「...（問題に対応した具体的な質問）...」
▼この単元がよくわからない…
「...（単元全体の理解を深める質問）...」
子どもが「わからなかったら次はこれをAIに聞け」という導線を作りました。
これによりツールは学習のハブに徹して、問題の進捗管理のみに集中することができるようにしました。
データの永続化
LocalStorageを使っています。
-
kyotsu80_state_v2：レベル・EXP・スコア履歴 -
kyotsu80_addons_v2：追加した問題データ（アドオン）
HTMLをダブルクリックで開くだけで、前回の続きから使えます。サーバ不要、アカウント不要。
使い方
-
index.htmlをダウンロードしてブラウザで開く - 「Gemini用プロンプトをコピー」で作問プロンプトをクリップボードへコピー
- GeminiやClaudeに貼り付けて、追加したい科目・単元を指定
- 生成されたJSONをパネルに貼り付けて「アドオンを適用する（データをマージ）」クリック
- 攻略マップに新しい単元が即時反映される
おわりに
インフラエンジニアがフロント素人なりにClaudeと協力しながら作ったツールです。
「問題生成はAIに任せる」という設計にしたことで、ツール本体のコードを最小限に保ちながら、実用的な学習管理ができるものになりました。子どもが実際に使ってくれるかどうかはまた別の話ですが…。
コードはGitHubに公開しています。科目・単元の構成を変えれば共通テスト以外にも使えるはずなので、同じような悩みを持つ方の参考になれば。