RetentionRadar - 顧客離脱リスク早期警戒ダッシュボード

## 1. アプリの目的・ターゲットユーザー
中小企業の営業担当・カスタマーサクセス担当が、既存顧客ごとの「離脱リスクスコア」を独自ロジックで算出・可視化し、フォローアップの優先順位を即座に判断できる無料ブラウザツール。CRMや高額SaaSを導入できない小規模チームでも、顧客データを手入力するだけで活用できる。

---

## 2. 主要機能

- **顧客登録 & 離脱リスクスコア自動算出**
最終接触日・購買頻度・クレーム有無・契約更新日までの残日数・担当者コメントの感情ラベル（良好/普通/懸念）の5指標を入力すると、独自ウェイト計算（加重合計）でリスクスコア0〜100を自動算出する。外部APIは一切不要。

- **信号機型カードビュー（レッド/イエロー/グリーン）**
スコア70以上=赤(要即対応)・40〜69=黄(注意監視)・39以下=緑(安定)で色分けしたカード一覧を表示。顧客ごとにアクションメモ欄と「フォロー済みチェック」を設け、チェックするとカードが落ち着いた配色に変わる。

- **リスク要因ドリルダウン表示**
カードをクリックすると各5指標のスコア内訳をレーダーチャートで表示し、どの要因が離脱リスクを押し上げているかをひと目で確認できる。

- **フォローアップカレンダー**
契約更新日・最終接触から一定日数経過した顧客を月次カレンダーにハイライト表示し、「今月対応すべき顧客」を見落とさない仕組みを提供する。

- **CSVインポート / エクスポート**
既存の顧客リスト（会社名・担当者名・メールアドレス等）をCSVで一括登録。分析結果もCSVで出力してExcelやスプレッドシートと連携可能。

- **チームメモ & 引き継ぎログ**
顧客ごとに日付付きの活動メモを複数行記録でき、担当交代時の引き継ぎ資料としてそのまま活用できる。

---

## 3. 画面構成

### ① ダッシュボードホーム
- 上部サマリー帯：顧客総数 / 赤件数 / 黄件数 / 今月更新予定件数を4枚のサマリーカードで表示
- メインエリア：信号機色の顧客カード一覧（デフォルト：リスクスコア降順）
- フィルターバー：ステータス（赤/黄/緑）、担当者名、更新月でフィルタリング
- 右上に「＋顧客追加」ボタン

### ② 顧客詳細パネル（モーダルまたはサイドパネル）
- 基本情報（会社名・担当者・連絡先）
- リスクスコアとレーダーチャート
- 5指標の入力フォーム（スライダー＋セレクトボックス）
- アクティビティログ（日付付きメモの追加・閲覧）
- フォロー済みトグルスイッチ

### ③ フォローアップカレンダー
- 月次カレンダービュー
- 更新日到来・要フォロー顧客のドット表示と件数バッジ
- 日付クリックで該当顧客一覧をポップアップ

### ④ 設定ページ
- リスクスコアの各指標ウェイト調整スライダー（業種特性に合わせて変更可能）
- 会社名・ロゴ設定（ヘッダーに表示）
- データのJSON一括エクスポート / インポート（バックアップ用）

---

## 4. データ構造

### テーブル: customers
| カラム名 | 型 | 説明 |
|---|---|---|
| id | INT PK AUTO_INCREMENT | |
| company_name | VARCHAR(100) | 会社名 |
| contact_name | VARCHAR(100) | 担当者名 |
| email | VARCHAR(150) | メールアドレス |
| phone | VARCHAR(30) | 電話番号 |
| last_contact_date | DATE | 最終接触日 |
| purchase_frequency | TINYINT | 購買頻度（0=なし〜4=月次以上） |
| has_complaint | TINYINT | クレーム有無（0/1） |
| renewal_date | DATE | 契約更新日 |
| sentiment | TINYINT | 感情ラベル（0=懸念/1=普通/2=良好） |
| risk_score | TINYINT | 算出済みリスクスコア0〜100（キャッシュ） |
| is_followed_up | TINYINT | フォロー済みフラグ（0/1） |
| created_at | DATETIME | |
| updated_at | DATETIME | |

### テーブル: activity_logs
| カラム名 | 型 | 説明 |
|---|---|---|
| id | INT PK AUTO_INCREMENT | |
| customer_id | INT FK | |
| memo | TEXT | 活動メモ本文 |
| logged_at | DATETIME | 記録日時 |

### テーブル: settings
| カラム名 | 型 | 説明 |
|---|---|---|
| id | INT PK | |
| weight_last_contact | TINYINT | 最終接触日ウェイト（デフォルト30） |
| weight_frequency | TINYINT | 購買頻度ウェイト（デフォルト25） |
| weight_complaint | TINYINT | クレームウェイト（デフォルト20） |
| weight_renewal | TINYINT | 更新日ウェイト（デフォルト15） |
| weight_sentiment | TINYINT | 感情ウェイト（デフォルト10） |
| company_name | VARCHAR(100) | 表示社名 |

---

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

- **カラーパレット**：ダークネイビー (#0f1b35) をベースに、赤 (#e84545)・琥珀色 (#f5a623)・ティールグリーン (#2ec4b6) の信号機3色でリスクを強調。背景は白に近いオフホワイト (#f7f8fc)。
- **フォント**：見出しに Inter / Noto Sans JP、数値表示には等幅系で視認性を高める。
- **UIスタイル**：カード型レイアウト、角丸12px、ドロップシャドウ控えめ。テーブルではなくカードを主体にすることでスマホでも縦スクロールしやすい構成。
- **アイコン**：Font Awesome 6 Free（CDN）を利用。
- **レーダーチャート**：Chart.js（CDN）で描画。その他グラフも同ライブラリで統一。
- **雰囲気**：「ビジネスツールだが重くない」清潔感のあるSaaS風ダッシュボード。白地・ティール・ネイビーの組み合わせで信頼感を演出する。