SuccessPath - 顧客オンボーディング＆ヘルススコア管理

BtoB SaaS企業・代理店・コンサル会社のカスタマーサクセス(CS)担当者向けに、契約後の顧客を「宇宙船で惑星を巡る旅」に見立てて可視化する、オンボーディング進捗＆解約防止ダッシュボード。CS専任者がいない小規模企業でも、顧客の状態をひと目で把握し、解約リスクを早期発見できることが目的。

主要機能:
1. 顧客ごとに契約→キックオフ→初期設定→トレーニング→本稼働→定着の6ステージをカンバン形式で管理し、ドラッグで移動
2. 利用頻度・サポート問い合わせ数・更新日までの残日数・担当者の手動評価からヘルススコア(0-100)を自動算出し、信号色(青/黄/赤)で表示
3. 顧客詳細ページで、宇宙船アイコンが惑星(=ステージ)を進む旅路アニメーションと、ヘルススコア推移の折れ線グラフを表示
4. 電話・メール・会議・チケット対応などのタッチポイントをタイムラインに記録
5. リスクアラート一覧(スコア急落・活動停滞・更新間近で要注意の顧客を自動抽出)とCSV出力
6. チーム共有は6桁コードで参加する簡易方式。担当者・ステージ名・アラート閾値は設定画面でカスタマイズ可能
7. ダッシュボード表示中はアンビエントBGMを再生(ミュート可)し、落ち着いた作業環境を演出

画面構成: ①チーム参加/作成画面 ②ダッシュボード(全体サマリー・カンバン・アラート・BGM操作) ③顧客一覧テーブル(検索/フィルタ/ソート) ④顧客詳細(旅路アニメーション・スコア推移・活動タイムライン・記録フォーム) ⑤設定画面(担当者・ステージ・閾値管理)

データ構造(MySQL): teams(id, name, share_code), staff(id, team_id, name, email), customers(id, team_id, name, company, staff_id, stage, health_score, contract_start, renewal_date, mrr, notes), activities(id, customer_id, type, description, staff_id, created_at), health_score_log(id, customer_id, score, logged_at), stage_history(id, customer_id, stage, changed_at)

デザイン: 濃紺〜紫のグラデーション宇宙空間を背景に、ネオンブルー/パープル/ゴールドをアクセントとしたフラットベクター調。丸みを帯びたミニマルなアイコンと柔らかいグロー効果で統一。

BGM仕様: アンビエントジャズ寄りシンセパッド、BPM70、4/4拍子。コード進行はCmaj7→Am7→Fmaj7→G7を8小節ループ、ソフトなシンセベースが2分音符単位で支え、パッドは全音符主体、4小節目末に軽いシンセアルペジオのフィルを挿入し変化をつける。Web Audio APIでAudioContext.currentTime基準のルックアヘッドスケジューリングを行い、BGMとSE(通知音・カード遷移音)の音量を個別制御、ミュートボタンとページ離脱時のノードdisconnect処理を実装。

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