タイムカプセル性格診断 TimeCapsule Persona - 10年後の自分を予言する未来型心理テスト

## 1. アプリの目的・ターゲットユーザー
「今の自分の選択・価値観・行動パターン」から10年後の自分像を予言するエンタメ心理診断アプリ。単なる現在の性格診断に留まらず、「未来のあなたはどんな人になっているか」という時間軸を加えた新しい切り口が特徴。ターゲットは10〜30代の自分の将来を漠然と考えている若者、人生の転換点にいる人、SNSシェアを楽しむユーザー。

## 2. 主要機能
- **25問のシナリオ選択式診断**: 「急な休暇が取れたら？」「無人島に持っていく1冊は？」「友人からお金を借りてほしいと頼まれたら？」など、日常のリアルなシチュエーションから価値観・行動傾向を測定する
- **6軸スコアリング**: 冒険性・安定志向・創造力・社会貢献度・自己中心性・適応力の6軸をバックグラウンドで集計し、各軸のスコアから「未来タイプ」を決定
- **16種類の未来予言カード**: 「静かな革命家」「異国の地で根を張る人」「気づけばみんなの拠り所」「孤高のクリエイター」など、キャッチーなタイトルと100〜150字の予言文を表示。各タイプにイラスト風CSSアートのアイコンを添える
- **10年後のシーン予言**: 仕事・暮らし・人間関係・趣味の4シーン別に短文で未来像を描写（例：「仕事: 肩書きより仕事の中身にこだわり、気づけば専門家と呼ばれている」）
- **相性タイプ表示**: 同じ診断をした人の中で「10年後に自然と引き合うタイプ」と「10年後にぶつかりそうなタイプ」を1つずつ提示
- **SNSシェア用カード生成**: Canvas APIでタイプ名・予言一言・6軸レーダーチャートを合成したOGPライクな画像を生成しPNGダウンロード＆シェアボタンを提供
- **過去結果との比較**: LocalStorageに最大3回分の結果を保存し、「前回から変わった軸」をハイライト表示して成長・変化を可視化

## 3. 画面構成
### トップページ
- キャッチコピー「あなたの今日が、10年後を決める」と診断スタートボタン
- 直近の診断件数カウンター（PHPでDB集計）と人気上位3タイプのランキング表示

### 診断ページ（1画面完結）
- プログレスバー付き（1/25〜25/25）
- 問いのテキスト＋4択ラジオボタン（A〜D）
- 前問に戻るボタン付き
- アニメーションで次問にスライド遷移（CSS transition）

### 結果ページ
- 大きなタイプ名（例：「孤高のクリエイター」）とCSSアートアイコン
- 予言文（メインコピー）
- 10年後シーン別4ブロック（仕事・暮らし・人間関係・趣味）
- 6軸レーダーチャート（Canvas APIで描画）
- 相性タイプ2件（良い・要注意）
- SNSシェアボタン（Twitter/X・LINE）＋PNG保存ボタン
- 「もう一度診断」「友人の結果と比較」ボタン
- 過去結果との差分パネル（LocalStorage参照）

### ランキングページ
- 16タイプの診断人数ランキング（棒グラフ）
- 「今日一番多く診断されたタイプ」ピックアップ

## 4. データ構造
### questionsテーブル（静的JSONファイルで代替可）
- question_id INT PK
- question_text VARCHAR(200)
- option_a / option_b / option_c / option_d VARCHAR(100)
- score_map JSON（各選択肢が6軸に与えるスコア。例: {"adventure":2, "stability":-1, ...}）

### result_typesテーブル（静的JSONファイルで代替可）
- type_id INT PK
- type_name VARCHAR(50)
- tagline VARCHAR(100)
- prophecy_text TEXT
- scene_work / scene_life / scene_relation / scene_hobby TEXT
- affinity_type_id / clash_type_id INT
- icon_css_class VARCHAR(50)
- axis_threshold JSON（このタイプに分類する6軸の閾値定義）

### diagnosis_logsテーブル（PHP/MySQL）
- id INT AUTO_INCREMENT PK
- session_hash VARCHAR(64)（IPと日時のハッシュ、個人特定不可）
- result_type_id INT
- axis_scores JSON
- created_at DATETIME

## 5. デザインの方向性
- **テーマカラー**: ミッドナイトネイビー（#0D1B2A）を背景ベースに、ゴールド（#F4C542）とコーラル（#FF6B6B）をアクセントに使った「神秘×洗練」スタイル
- **フォント**: 見出しは游明朝系のセリフ体、本文はシステムサンセリフで読みやすさ重視
- **アニメーション**: 問題遷移は左スライド、結果表示は上からフェードインで「タイムカプセルが開封される」演出
- **レーダーチャート**: 塗りつぶし半透明ゴールドで6軸を表示、各軸にラベル
- **モバイルファースト**: 縦長1カラムレイアウト、タップエリア44px以上確保
- **CSSアートアイコン**: 外部画像非依存で16タイプ分のシンプルなCSSのみのアイコンを用意（円・三角・星形の組み合わせ）
- 全体的にミステリアスだが重くなりすぎず、占いサイト的な「怪しさ」ではなく「知的ときめき」を演出する