ストレス源タイプ診断 StressDNA — あなたの「疲れやすいシチュエーション」を可視化

## 1. アプリの目的・ターゲットユーザー
日常のどんな場面でストレスを感じやすいかを20問の行動・反応シナリオ形式で診断し、「ストレス源タイプ」と「5軸のストレス耐性プロファイル」として可視化する心理テストアプリ。
- **ターゲット**: 20〜40代の働く社会人・学生。「なんとなく疲れる原因がわからない」「人間関係や仕事のどこに消耗しているかを知りたい」層。
- **差別化**: 既存の性格診断(MBTI系)や占い系とは異なり、「何に疲れるか」「どんな環境が消耗源か」にフォーカスしたストレス源特定型の診断。一般的なストレスチェックとも違い、シナリオ選択式でエンタメ性を持たせる。

---

## 2. 主要機能

- **シナリオ選択式20問診断**: 「会議で急に意見を求められたとき」「SNSで自分の投稿への反応が少ないとき」などの日常シナリオに対し、4択の反応パターンを選ぶ形式。単純な好き嫌いではなく「どう感じ・どう行動するか」を測定する。
- **6タイプのストレス源診断結果**: 「対人摩擦型」「評価不安型」「予測不能型」「過負荷蓄積型」「孤立感知型」「完璧主義型」の6タイプを判定。タイプごとにキャッチコピー、詳細説明、あるあるエピソード、セルフケアのヒントを表示。
- **5軸レーダーチャート**: 対人ストレス・環境変化ストレス・自己評価ストレス・時間プレッシャー・情報過多ストレスの5軸を0〜100でスコアリングしレーダーチャートで描画(Canvas)。
- **相性のよい環境 / 避けたい状況カード**: 結果画面に「あなたが活きやすい環境」と「消耗しやすい状況」をカード形式で3枚ずつ表示。実生活への具体的示唆を提供。
- **SNS共有 & 診断結果URL生成**: 結果をURL末尾のハッシュパラメータにエンコードして共有可能にする(DBなしでも共有できる設計)。OGP用の結果サマリーカードをCanvas生成しダウンロードも可能。
- **再診断 / 部分回答変更**: 診断完了後に特定の設問だけ変更して再計算できる「感度チェック機能」。

---

## 3. 画面構成

### トップページ (`index.php`)
- ヒーローエリア: アプリ名、キャッチコピー「あなたはどこで消耗している？」、「診断スタート」ボタン
- 6タイプのシルエットアイコン一覧(ティザー表示)
- 所要時間「約3分」「全20問」の明示
- 直近の診断件数カウンター(DBから取得 or LocalStorageでのべ回数)

### 診断画面 (`quiz.php` or SPA的にJS制御)
- プログレスバー(1/20〜20/20)
- シナリオ文(吹き出し風カード)
- 4択ボタン(縦並び、タップしやすいサイズ)
- 前の問いに戻るボタン
- 回答はSessionStorageに一時保持、20問完了で結果ページへ遷移

### 結果ページ (`result.php`)
- **タイプカード**: タイプ名、アイコン絵文字、一言キャッチコピー、タイプカラーのグラデーション背景
- **5軸レーダーチャート**: CanvasでSVG描画。各軸にスコアと簡易ラベル
- **タイプ詳細説明**: あるあるエピソード、消耗パターン、得意な場面
- **環境カード**: 「活きやすい環境」3枚 / 「消耗しやすい状況」3枚(アイコン付き横スクロールカード)
- **セルフケアヒント**: タイプ別に3〜5個の具体的なアクション
- **共有ボタン**: Twitter/X・LINEへの共有リンク、結果カードPNGダウンロード
- **もう一度診断する** ボタン

### 管理用統計ページ (`admin_stats.php`) ※パスワード保護
- タイプ別診断件数グラフ
- 日別診断件数推移

---

## 4. データ構造

### テーブル: `stress_results`
| カラム名 | 型 | 説明 |
|---|---|---|
| id | INT AUTO_INCREMENT PK | |
| session_id | VARCHAR(64) | ブラウザセッション識別子(匿名) |
| stress_type | VARCHAR(30) | 診断されたタイプ名 |
| score_json | TEXT | 5軸スコアをJSON文字列で保存 `{"interpersonal":72,...}` |
| created_at | DATETIME | 診断日時 |

※問答データや個人情報は一切保存しない。集計・統計目的のみ。

### 静的データ(PHPまたはJSの定数として管理)
- `questions.json`: 20問のシナリオ文、4択の選択肢、各選択肢の5軸スコア寄与値
- `types.json`: 6タイプの定義(タイプ名、説明、環境カード、セルフケアヒント、カラーコード)

---

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

- **カラーパレット**: 深みのある紺青(#1a1f4b)をベースに、タイプ別アクセントカラー6色(珊瑚・ターコイズ・ラベンダー・サフラン・ミントグリーン・スレートブルー)を使い分け
- **フォント**: 見出しはやや太めのゴシック、本文は読みやすいウェイトで。日本語特化。
- **雰囲気**: 占い的な神秘感ではなく、**心理学的・科学的な信頼感**を演出。余白多め、カード型UI、アニメーションは最小限(フェードイン程度)。
- **レスポンシブ**: モバイルファーストで設計。選択肢ボタンは最小タップ領域48px以上確保。
- **結果カード**: SNS映えするよう、タイプ名・レーダーチャート・一言コメントを1枚に収めたCanvas生成カード(OGP兼用)を生成。
- **アクセシビリティ**: 選択済みの選択肢はチェックマーク付き強調表示、色だけに頼らない判別。