ことば温度計 - あなたの「口ぐせ」が映す心理プロファイル診断

## 1. アプリの目的・ターゲットユーザー

日常的によく使う言葉・フレーズ（口ぐせ）を選ぶだけで、無意識の思考パターン・感情傾向・対人スタイル・ストレス反応を「ことば温度」として可視化する心理プロファイル診断アプリ。

- ターゲット: 10代〜40代の自己分析に興味を持つ層、就活生、チームビルディングの場、SNSでシェアしたい人
- 既存の占い・MBTI系との差別化: 星座・血液型・選択肢ではなく「実際に使う言葉」を入力・選択するという言語心理学的アプローチが切り口

---

## 2. 主要機能

- **Step式口ぐせ選択（全5カテゴリ×4問 = 計20問）**
「嬉しいとき」「困ったとき」「誰かを褒めるとき」「断るとき」「自分を表現するとき」の5シーンで、よく使うフレーズを3〜4択から選ぶ。各選択肢にはあらかじめ「感情エネルギー値（暖〜冷）」「自己開示度」「共感力」「行動性」「内省度」の5次元スコアが紐付いている。

- **ことば温度マップ（レーダーチャート）の表示**
回答集計後に5次元スコアをレーダーチャートでリアルタイム描画。中心に「ことば温度」（0〜100℃）を大きく表示し、「熱血型」「冷静型」「温和型」「変温型」などのタイプに分類する。

- **ことばタイプカード生成**
16タイプ（5次元の高低組み合わせを代表パターン化）のうち該当タイプをカード形式で表示。カード内容: タイプ名（例「静かな炎タイプ」）・アイコン・3行説明・口ぐせの特徴・強み・注意点・相性の良いタイプ。

- **口ぐせ改善アドバイス**
診断結果に基づき、ストレス時の典型パターンとワンポイント言い換えアドバイスを3件提示。

- **SNSシェア用OGPカード生成**
Canvas API で結果カード（タイプ名・温度計グラフ・一言）をPNG化してダウンロード可能。シェア用テキストも自動生成。

- **みんなの結果ランキング（匿名集計）**
PHPでDBに集計を保存し、「最多タイプランキング TOP5」「今日の全国平均ことば温度」を公開表示。個人情報は一切保存しない。

---

## 3. 画面構成

### TOP画面
- キャッチコピー + 温度計アニメーション（水銀がゆっくり上昇するCSS演出）
- 「診断スタート」ボタン（大きく中央配置）
- 「みんなの結果を見る」ボタン
- 所要時間の目安：約3分

### 診断画面（Step 1〜5）
- 上部: プログレスバー（5段階）
- シーン説明文（例「困ったとき、あなたがよく言うフレーズは？」）
- 選択肢ボタン4個（横スクロールなし、縦並び。スマホ対応）
- 選択すると即座に次のStepへ遷移（ページ遷移なし、JS DOM切り替え）
- 「戻る」ボタン（前のStepに戻れる）

### 結果画面
- ことば温度計（大きなアニメーション演出）
- レーダーチャート（Canvas描画）
- タイプカード（タイプ名・アイコン・説明・強み・注意点・相性）
- 口ぐせ改善アドバイス3件（アコーディオン展開）
- 「PNGで保存」ボタン
- 「もう一度診断する」ボタン
- 「みんなの結果を見る」リンク

### みんなの結果ページ
- 全国平均ことば温度（今日/全期間）
- タイプ別人数棒グラフ（TOP5）
- 「あなたは上位○%の◯◯タイプです」の一言メッセージ

---

## 4. データ構造

### questions テーブル（静的JSONまたはPHP配列で管理、DBは不要）
```
[
{
"step": 1,
"scene": "嬉しいとき",
"options": [
{ "text": "やったー！", "scores": { "energy": 9, "disclosure": 8, "empathy": 5, "action": 7, "reflection": 2 } },
...
]
},
...
]
```

### results テーブル（MySQL）
```sql
CREATE TABLE kotoba_results (
id INT AUTO_INCREMENT PRIMARY KEY,
type_id TINYINT NOT NULL, -- 1〜16のタイプID
temperature TINYINT NOT NULL, -- 計算後の0〜100温度
created_at DATETIME DEFAULT NOW()
);
-- 個人を特定する情報は一切保存しない
```

### types定義（PHP配列）
- type_id (1〜16)
- name（例「静かな炎」「透明な春風」等の詩的ネーミング）
- icon（SVG絵文字または単色アイコン）
- description, strength, caution, compatible_type_id

---

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

- **カラーパレット**: 温度を表すグラデーション（寒色 #4A9EDA 〜 暖色 #FF6B4A）を基調に、背景は深みのある #1A1A2E（ダークネイビー）
- **温度計UI**: メインビジュアルとして中央に縦型の温度計SVGを配置。診断中は水銀部分がリアルタイムに変動するCSS animation
- **フォント**: 見出しに「Zen Kaku Gothic New」、本文に「Noto Sans JP」（GoogleFonts CDN）
- **カード**: 白または半透明グラスモーフィズム風、角丸12px、box-shadowで浮き上がり感
- **アニメーション**: ページ遷移はslide-in、結果表示はfade-up + 温度計の水銀上昇演出（CSS keyframes）
- **レスポンシブ**: max-width 480px のスマホ中心設計。PCでは中央寄せの1カラムレイアウト
- **全体の雰囲気**: 神秘的すぎず、科学的すぎず、「ちょっと当たってる！」を感じさせる温かみのあるUI