ScienceLab VR風 - ブラウザで体験する仮想理科実験室

## 1. アプリの目的・ターゲットユーザー
中学・高校レベルの理科実験を「実際には危険・高価・学校でしかできない」ためにやったことがない人や、授業の予習・復習をしたい学生向けに、ブラウザ上でインタラクティブな仮想実験を体験できるWebアプリ。物理・化学・生物・地学の4分野をカバーし、実験操作を自分の手で行いながら原理を学べることで「見て覚える」ではなく「やって覚える」体験を提供する。

---

## 2. 主要機能

- **仮想実験モジュール（計16実験）**: 物理4・化学4・生物4・地学4の実験をCanvas/SVGアニメで再現。例：「塩酸と亜鉛の反応（水素発生）」「振り子の等時性」「葉の光合成・デンプン検出」「火山の噴火モデル」など
- **インタラクティブ操作**: スライダーや入力フォームで「温度・濃度・角度・重さ」などのパラメータを変更し、結果がリアルタイムにアニメーションで変化する。正しい手順を踏まないと実験が失敗する演出あり
- **実験ノート自動生成**: 実験完了後に「目的・仮説・操作・結果・考察」の穴埋めテンプレートが表示され、学習内容をその場で記録できる（LocalStorage保存）
- **理解度チェッククイズ**: 各実験後に3問のクイズ（原理・計算・発展問題）が出題され、正解率が記録される
- **実験アーカイブ＆スタンプカード**: 完了した実験にスタンプが押され、全16実験コンプリートで称号が解放される。進捗はLocalStorageで保持
- **失敗エンディング演出**: 手順ミスや無謀なパラメータ設定をすると「実験失敗」アニメーション（泡が溢れる・振り子が暴走など）が表示され、正しい手順の解説が読める

---

## 3. 画面構成

### トップ画面
- 実験室の俯瞰イラスト（SVG）。4つの実験台が物理・化学・生物・地学ゾーンに分かれており、クリックで各分野へ遷移
- 右上にスタンプカード（16個の実験進捗バッジ）

### 分野選択画面
- 分野ごとに4実験のカードリストを表示。各カードに「実験名・難易度(★1〜3)・所要時間・完了バッジ」

### 実験画面（メインコンテンツ）
- **上部**: 実験名・ナビゲーションステップインジケーター（ステップ1〜4など）
- **中央（キャンバスエリア）**: Canvas2D or SVGアニメーションで実験台・器具・物質を描画。ビーカー・試験管・電池回路・顕微鏡など器具をリアルに描く
- **右パネル**: パラメータスライダー群、操作ボタン（「加熱する」「混ぜる」「記録する」など）、結果数値の表示
- **下部**: ステップごとの解説テキスト（中学理科レベルで丁寧に説明）
- **完了後**: 実験ノートテンプレートのモーダル表示 → クイズへ遷移

### クイズ画面
- 4択クイズ3問。正解時にポップアップ解説。終了後スコアを表示しアーカイブに記録

### マイ実験ノート画面
- LocalStorageに保存されたすべての実験ノートを一覧表示。印刷用CSSで実験ノートPDFとして出力可能

---

## 4. データ構造

### DBは使用しない（完全LocalStorageベース）

**experiments_master（JS定数オブジェクト）**
```
[
{
id: "chem_01",
title: "塩酸と亜鉛の反応",
category: "化学",
difficulty: 2,
steps: [ {instruction, animState, params} ... ],
quiz: [ {question, choices, answer, explanation} ... ],
failConditions: [ {param, operator, threshold, message} ... ]
}, ...
]
```

**LocalStorage キー**
- `sl_progress`: `{ "chem_01": { completed: true, quizScore: 3, timestamp }, ... }`
- `sl_notes`: `{ "chem_01": { purpose, hypothesis, result, consideration }, ... }`

---

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

- **テーマ**: 白衣×黒板×蛍光色アクセントの「リアル実験室 + ポップ」ハイブリッド
- **カラーパレット**: 背景 #1a1a2e（深紺）、実験台 #f5f0e8（白木）、アクセント #00e5ff（シアン）・#ff6b35（オレンジ）・#a8ff3e（イエローグリーン）
- **フォント**: 見出しに理系ゴシック系（Noto Sans JP Bold）、解説に読みやすい中字
- **アニメーション**: CSS transition + Canvas2D。泡・煙・発光など実験の「動き」をリッチに表現。重くなりすぎないよう1実験あたりのCanvas描画は60fps以内に収める
- **レスポンシブ**: スマホでは上下2段レイアウト（キャンバス上・操作パネル下）に切替。スライダーはタップしやすい大きめサイズ
- **実装規模**: 16実験×平均4ステップ = 64アニメーション状態。1実験あたりのJSコードを500行程度に収め、共通animationエンジンで流用する設計にする