PersonaCompass - 商談相手タイプ診断＆接客アプローチガイド

【目的・ターゲット】営業・接客・カスタマーサポート担当者が、商談前後に相手の言動を観察して入力するだけで、最適なコミュニケーション戦略を得られる実務ツール。個人情報は送信せず端末内保存のみでプライバシーに配慮。
【主要機能】1) 15問の他己観察チェックリストでDiSC風4タイプ(主導型・社交型・安定型・慎重型)を診断 2) レーダーチャート+キャラクターカードで結果を演出付き表示、タイプ別の刺さるトーク・NGワード・メール文例・資料の見せ方を提示 3) 顧客カルテ機能で氏名・会社・業種・診断結果・メモをLocalStorageに保存し検索可能 4) 自分のタイプ×相手タイプの相性マトリクスで注意点とコツを表示 5) 4タイプ詳細図鑑(価値観・意思決定パターン・ストレス反応) 6) 結果PNGカード出力・印刷・共有テキストコピー。
【画面構成】ホーム(診断開始/カルテ一覧/図鑑への導線とヒーロービジュアル)、診断ウィザード(15問・進捗バー)、結果画面(タイプ登場アニメーション+レーダーチャート+タブ切替ガイド)、顧客カルテ一覧・詳細編集、相性チェック画面、タイプ図鑑ギャラリー。
【データ構造】DB不使用、LocalStorageのみ。customers[](id,name,company,industry,type,scores,memo,createdAt)、selfType、診断履歴配列。
【デザイン】フラット+ソフトグラデーション、DiSC配色(赤/黄/緑/青)をタイプカラーとして統一、丸み帯びたカードUI、太さ統一の線画キャラクター。
【BGM仕様】Web Audio API使用、AudioContext.currentTime基準で先読みスケジューリング、BGM/SE個別音量・ミュート・画面遷移時のノード停止/disconnect実装。診断完了ファンファーレ:BPM120・4/4、C→G→Am→Fのベル音色三和音アルペジオ+ティンパニ風アクセント、1.5秒。タイプ別BGM(各8-16小節ループ、BPM90-100・4/4、ベース+和声パッド+メロディ+4小節毎のフィル、休符でメリハリ):主導型=力強いブラスパッド+8ビートドラム、社交型=明るいマリンバ+シェイカー、安定型=アコギ風アルペジオ+ソフトパーカッション、慎重型=ピアノ+ストリングスパッド。

## BGM品質要件
- アプリの雰囲気に合うジャンル・BPM・拍子を定め、ドラム、ベース、和声、メロディの4層で構成する
- 最低8小節またはA/Bの2展開を作り、休符、アクセント、フィル、フレーズ変化を入れる
- Web Audio APIはAudioContext.currentTime基準で先読みし、BGM/SE別音量・ミュート・停止処理を実装する
- 単一オシレーターの持続音や1〜3音だけの反復はBGMとして不可

## ビジュアル品質要件
- 生成済み素材を仕様内の用途・表示場所で実際に使用し、未使用素材を残さない
- 画風・配色・キャラクター比率を全画面で統一し、文字はHTML/CSSで重ねる
- PC・スマホで画像の欠け、引き伸ばし、文字との重なりがないことを開発完了前に確認する