MathDojo - ビジュアル数学トレーナー

## 1. アプリの目的・ターゲットユーザー
中学・高校生および数学をやり直したい社会人向けに、「公式を暗記する」のではなく「なぜそうなるのか」を視覚的アニメーションで直感的に理解させる数学トレーニングアプリ。グラフや図形がリアルタイムに動くので、紙のテキストや既存の問題集では伝わりにくい「数式と図の対応関係」を体感できる。

## 2. 主要機能
- **ビジュアル解説モード**: 二次関数・三角比・円の方程式・ベクトルなど20テーマ以上について、スライダーを動かすとグラフ・図形がリアルタイムにCanvas上で変化し、パラメータと形状の関係を体感できる
- **ステップ別問題練習モード**: 各テーマに対して「穴埋め→選択→記述（数値入力）」の3段階問題を提供。正解するとそのステップの考え方をアニメーション付きで解説する
- **苦手マップ**: テーマごとの正解率をレーダーチャートで可視化し、苦手分野を一目で把握できる（LocalStorage保存）
- **デイリーチャレンジ**: 毎日1問の「今日の数学クイズ」を表示。連続挑戦日数をカウントしストリーク表示する
- **公式ノート**: 学習済みテーマの公式・ポイントを自動でノートにまとめ、印刷またはテキストコピーできる

## 3. 画面構成
- **トップページ**: テーマ一覧をカード形式でグリッド表示（中学数学・高校数学・統計の3タブ）。各カードに習熟度バッジ（未挑戦/練習中/マスター）を表示
- **ビジュアル解説画面**: 左側にCanvas（グラフ描画エリア）、右側にパラメータスライダーと対応する数式の説明文。スライダー操作でCanvas上の図形がアニメーション変化
- **問題練習画面**: 上部に問題文、中央にCanvas（ヒント図形表示）、下部に解答入力エリア。正誤後に「解説を見る」ボタンでアニメーション解説を展開
- **苦手マップページ**: レーダーチャート（Chart.js使用）でテーマ別正解率を表示。各テーマをクリックで該当練習へジャンプ
- **デイリーチャレンジページ**: カード1枚に今日の問題を表示。解答後にカレンダー型のストリーク履歴を表示
- **公式ノートページ**: 解説済みテーマの公式を一覧表示。印刷用CSSで整形したプリントボタン付き

## 4. データ構造

### DBテーブル（MySQL）

**themes**（テーママスタ）
- id INT PK
- category ENUM('middle','high','statistics')
- name VARCHAR(100) // 例:「二次関数」
- description TEXT
- sort_order INT

**problems**（問題マスタ）
- id INT PK
- theme_id INT FK
- step TINYINT // 1=穴埋め 2=選択 3=数値入力
- question_text TEXT
- answer VARCHAR(255)
- choices JSON // 選択肢（step=2のみ）
- explanation TEXT
- animation_key VARCHAR(100) // JSアニメーション識別子

**daily_challenges**（デイリー問題）
- id INT PK
- problem_id INT FK
- challenge_date DATE UNIQUE

※ユーザー進捗・正解率・ストリークはLocalStorageで管理（ログイン不要）

## 5. デザインの方向性
- **カラー**: ネイビー(#1E2A4A)を基調に、アクセントカラーはビビッドな電気ブルー(#3D8EFF)とコーラルオレンジ(#FF6B4A)。数学らしい知的さと親しみやすさを両立
- **フォント**: 数式部分にKaTeX風のセリフ体、UIテキストはNoto Sans JP
- **Canvas描画**: 素のHTML5 CanvasAPIで実装。グラフのアニメーションはrequestAnimationFrameで滑らかに動かす
- **レイアウト**: スマホでは解説エリアを上下スクロール型に切り替え、スライダーを画面下部に固定配置
- **全体トーン**: ゲームライクなバッジ・ストリーク演出でモチベーションを維持しつつ、教育ツールとしての清潔感を損なわない「勉強アプリ×ゲーミフィケーション」バランス