声の履歴書 ボイスキャラ診断 — 話し方の「くせ」から内面と対人スタイルを分析

## 1. アプリの目的・ターゲットユーザー
日常会話や仕事の場での「話し方のくせ」に着目し、ユーザーが自分の発話パターンを選択式で入力するだけで内面の傾向・対人コミュニケーションスタイル・隠れた強みを診断するWebアプリ。既存の性格診断やストレス診断とは切り口が異なり、「声・話し方」というユニークな軸を使う点が新規性。ターゲットは20〜40代の社会人全般（自己理解を深めたい人、コミュ障を感じている人、転職・就活準備中の人）。スマホ・PC両対応。

---

## 2. 主要機能
- **20問の話し方クセ診断**: 「話の最初に『えーっと』が多い」「結論より背景から話す」「相手が話し終わる前についあいづちを打つ」など、日常リアルなシナリオの選択肢（4択または5段階スライダー）を20問出題。外部APIなし・ブラウザ完結で即時集計。
- **8タイプのボイスキャラ判定**: 診断結果を「ナビゲーター型」「リスナー型」「エンジン型」「ブリッジ型」「ストーリーテラー型」「バッファー型」「スナイパー型」「ミラー型」の8タイプに分類。各タイプにキャラクターイラスト（SVGベースのシンプルアイコン）を用意。
- **5軸レーダーチャートプロファイル**: 「伝達力・共感力・傾聴力・説得力・即興力」の5軸スコアをCanvas描画のレーダーチャートで表示。数値だけでなく「あなたは○○が突出しています」のコメント付き。
- **対人スタイルカード & 相性タイプ**: 自分のタイプと相性のよいタイプ・気をつけるべきタイプを「相性カード」として表示。全8タイプの簡易説明付き。
- **結果シェア & 保存**: 診断結果をPNG画像としてダウンロード（Canvas生成）、またはURLパラメータにスコアをエンコードして共有リンクを発行。DB不使用でもシェアが成立する設計。
- **再診断 & 履歴比較（LocalStorage）**: 過去3回分の診断結果をLocalStorageに保存し、レーダーチャートを重ねて「成長の変化」を確認できる比較ビューを提供。

---

## 3. 画面構成
### TOP画面
- キャッチコピー「あなたの話し方が、あなたを語る」
- 診断スタートボタン（大きく中央配置）
- 8タイプのアイコン一覧をチラ見せ（ホバーでタイプ名）
- 「前回の結果を見る」ボタン（LocalStorage存在時のみ表示）

### 診断画面（Q1〜Q20）
- プログレスバー（上部に進捗表示）
- 1問ずつフェードイン表示
- 設問文 + 4択ラジオボタン（またはスライダー）
- 「前の問いに戻る」ボタン
- 20問完了で自動的に結果ページへ遷移

### 結果画面
- **タイプカード**: キャラアイコン + タイプ名 + キャッチフレーズ（例:「あなたは縁の下のリスナー型」）
- **タイプ詳細テキスト**: 強み・盲点・仕事場面での傾向・日常会話での傾向の4ブロック
- **5軸レーダーチャート**（Canvas描画）
- **相性タイプカード**（相性◎・注意⚠のタイプ各1〜2種）
- **アドバイスカード**: タイプ別に3つの「話し方ヒント」を表示
- シェアボタン（PNG保存 / URL共有）
- 再診断ボタン / 履歴比較ボタン

### 比較画面（オプション）
- 直近3回のレーダーチャートを半透明で重ねて表示
- 各回の日付・タイプ名を凡例に表示

---

## 4. データ構造
DB不使用。スコア計算・タイプ判定はすべてJavaScript（クライアントサイド）で完結。

### questions.js（内製データ）
```
[
{
id: 1,
text: "話を切り出すとき、最初に結論から言う方だ",
type: "slider", // or "radio"
axis: "伝達力",
weight: { 伝達力: +2, 即興力: +1 }
},
...
]
```

### types.js（8タイプ定義）
```
[
{
id: "navigator",
name: "ナビゲーター型",
icon: "svg_path",
catch: "道を示す言葉の地図",
strengths: [...],
blind_spots: [...],
advice: [...],
compatible: ["bridge", "listener"],
caution: ["buffer"]
},
...
]
```

### LocalStorage スキーマ
```
key: "voicechar_history"
value: JSON配列（最大3件）
[
{
date: "2025-06-15",
type_id: "navigator",
scores: { 伝達力: 78, 共感力: 52, 傾聴力: 45, 説得力: 70, 即興力: 60 }
},
...
]
```

---

## 5. デザインの方向性
- **カラーパレット**: ディープネイビー（#1A2744）をベースに、タイプごとのアクセントカラー（8色：テール、コーラル、アンバー、セージ、ラベンダーなど）を使い分け
- **フォント**: 見出しは太丸ゴシック系（Google Fonts: Noto Sans JP Bold）、本文はRegular
- **キャラアイコン**: SVGで描いたシンプルな人物シルエット + タイプを象徴する小道具（マイク・耳・稲妻など）。著作権フリーでブラウザ内完結
- **アニメーション**: タイプカード登場時にスケールアップ + フェードイン。レーダーチャートは線が伸びるアニメーションで描画（requestAnimationFrame）
- **全体トーン**: 占い感を出しすぎず「自己分析ツール」として信頼感があるミニマルなデザイン。白・淡グレー・アクセントカラーで構成。スマホファーストのカード型レイアウト
- **規模感**: HTML 1ファイル + CSS 1ファイル + JS 2〜3ファイル（questions.js / types.js / app.js）で完結。DBもPHPも不要。