ロジックラボ - 論理パズルで鍛える思考力トレーニング

## 1. アプリの目的・ターゲットユーザー
論理的思考・推論力・数的センスを「パズルを解く体験」を通じて楽しく鍛えるWebアプリ。既存の単純なクイズ型アプリや語学フラッシュカードとは異なり、「正解を知識として覚える」のではなく「プロセスを自分で考えて導き出す」思考力の育成に特化する。
- **ターゲット**: 中学生〜社会人（就職試験・SPI対策にも）、論理パズル好き、思考力トレーニングをしたい人

---

## 2. 主要機能

- **5カテゴリの論理パズル出題**
1. **命題推論**（「AはBより背が高い、BはCより...→誰が一番？」系の順序推論）
2. **ウソつき問題**（複数人の発言のうち1人が嘘をついている、誰か？）
3. **集合パズル**（ベン図的な「〇〇のうち△△である人は何人？」系）
4. **数列・規則発見**（次の数を当てる、図形パターンの穴埋め）
5. **暗号解読**（簡単な換字式暗号・文字シフト・数字⇔文字対応）

- **3段階の難易度（かんたん／ふつう／むずかしい）**: 各カテゴリ×3難易度で合計15区分、それぞれ10問内製問題を格納（合計150問）

- **ステップ解説モード**: 解答後に「考え方のステップ」をアコーディオン形式で表示。正解/不正解どちらでも「なぜそうなるか」を可視化する

- **スコア＆成長記録（ローカルストレージ）**: カテゴリ別の正答率・解答数・連続正解ストリークをブラウザに保存。レーダーチャートで5カテゴリの得意/苦手を可視化

- **デイリーチャレンジ**: 毎日1問、全カテゴリからランダムに出題される「今日の1問」。連続挑戦日数をカウントし達成バッジを付与

---

## 3. 画面構成

### ① トップ / ホーム画面
- アプリロゴ・キャッチコピー
- 「デイリーチャレンジ」カード（今日の問題へのCTAボタン）
- カテゴリ選択グリッド（5カテゴリ×アイコン付きカード）
- 自分の成長レーダーチャート（LocalStorageから描画）

### ② カテゴリ選択 & 難易度選択画面
- 選択したカテゴリの説明文・例題プレビュー
- かんたん／ふつう／むずかしい の3ボタン
- 過去の正答率バッジ表示（例：「ふつう: 70%」）

### ③ 問題画面
- 問題番号・カテゴリバッジ・残り問題数プログレスバー
- 問題文（テキスト中心、一部はシンプルなHTMLテーブルや箇条書きで補助）
- 選択肢ボタン（4択）または短答入力（数列・暗号系）
- タイマー表示（任意。制限時間なしでも使えるが秒数を記録してスコア加算に活用）

### ④ 解説画面
- 正解 or 不正解の大きな表示（アニメーション付き）
- 「考え方ステップ」アコーディオン（STEP1〜STEP3程度のテキスト解説）
- 「次の問題へ」ボタン

### ⑤ 結果画面（セッション終了後）
- 正答数・正答率・合計タイム・最速正解タイム
- カテゴリ別累計レーダーチャート（更新後）
- SNSシェアボタン（テキスト生成）・もう一度・別カテゴリへ

### ⑥ バッジ / 実績一覧画面
- 取得済み・未取得バッジの一覧（例：「命題推論10問クリア」「デイリー7日連続」など15種）

---

## 4. データ構造

**サーバーサイド（PHP + MySQL）は最小限。問題DBと公開ランキングのみ。**

### テーブル: `puzzles`
| カラム | 型 | 内容 |
|---|---|---|
| id | INT PK | |
| category | VARCHAR(20) | 'inference' / 'liar' / 'set' / 'sequence' / 'cipher' |
| difficulty | TINYINT | 1=easy / 2=normal / 3=hard |
| question | TEXT | 問題文（HTML可）|
| options | JSON | 4択選択肢の配列（短答の場合はnull）|
| answer | VARCHAR(255) | 正解（選択肢index or 文字列）|
| explanation | TEXT | ステップ解説（JSON配列: [{step:1, text:"..."}, ...]）|
| daily_date | DATE NULL | デイリーチャレンジ日付（NULLは通常問題）|

### テーブル: `daily_scores`（公開ランキング用・任意）
| カラム | 型 | 内容 |
|---|---|---|
| id | INT PK | |
| nickname | VARCHAR(30) | |
| score | INT | |
| date | DATE | |
| created_at | DATETIME | |

**ユーザー個人の記録はLocalStorageに保存**（登録不要で即利用）

LocalStorage キー例:
- `lr_stats`: `{inference:{correct:5,total:8}, liar:{...}, ...}`
- `lr_streak`: `{lastDate:"2025-01-15", count:3}`
- `lr_badges`: `["badge_inference_10", "badge_daily_7"]`

---

## 5. デザインの方向性

- **カラーパレット**: ダークネイビー（#1a1f36）をベースに、カテゴリごとに異なるアクセントカラー（命題=紫、ウソつき=赤、集合=青、数列=緑、暗号=オレンジ）
- **フォント**: 本文は游ゴシック系、見出しはやや太めのサンセリフ。数式・記号は等幅フォント
- **雰囲気**: 「研究室・ラボ」をモチーフにした知的で落ち着いた雰囲気。過度なゲームっぽさは避け、大学入試・資格試験の勉強にも使えると感じさせる清潔感
- **アニメーション**: 正解時は緑のリップル＋小さなパーティクル、不正解時は赤シェイク。ページ遷移はフェードイン。過度な演出は省きサクサク感を優先
- **レスポンシブ**: スマホ縦持ちでも問題文と4択が一画面に収まるよう、問題文エリアにスクロール制限を設ける。タブレット・PCでは中央カード型レイアウト（最大幅700px）