ContactFlow - 名刺・人脈管理＆フォローアップリマインダー

## 1. アプリの目的・ターゲットユーザー
営業担当者・フリーランサー・士業・起業家など「名刺交換後に連絡が途切れがちになる」悩みを持つビジネスパーソン向け。展示会や商談で集めた名刺情報をブラウザ上で手軽に登録・整理し、「次にいつ・何のためにフォローするか」をリマインダーで管理できる無料ツール。外部APIや登録不要でLocalStorage(+サーバーサイドDB)で完結する。

## 2. 主要機能
- **名刺登録（テキスト入力）**: 氏名・会社名・役職・メール・電話・出会ったシーン（展示会/商談/紹介/その他）・メモ・タグをフォームで登録。LocalStorageにJSON保存し、DB版はMySQLへPHP経由で保存。
- **コンタクト履歴タイムライン**: 各人物に対して「電話した」「メール送信」「面会」などのアクション記録を時系列で追加。件数と最終コンタクト日を自動表示。
- **フォローアップリマインダー**: 「○日後にフォロー」「特定日にフォロー」を設定でき、期限超過・当日・3日以内のカードをトップ画面で信号機色（赤/黄/緑）に色分けして表示。
- **タグ＆ステータス絞り込み**: 業種・地域・自由タグ、および「新規/商談中/成約/休眠」のステータスでフィルター＆全文検索。
- **関係強度スコア**: コンタクト頻度・最終接触からの経過日数・メモ量を元に「温度計アイコン（HOT/WARM/COLD）」を自動算出し、放置コンタクトを視覚化。
- **CSVエクスポート/インポート**: 名刺データをCSVで一括取り込み・書き出し。既存の名刺管理ツールや名刺読取アプリからのデータ移行に対応。

## 3. 画面構成
### ① トップ（ダッシュボード）
- フォローアップ期限カード一覧（今日/今週/期限超過を3セクション分け）
- 登録件数・直近30日コンタクト件数・HOT件数のサマリーバッジ
- 「名刺を登録」FABボタン（右下固定）

### ② 名刺一覧ページ
- カード形式グリッドで表示（会社名・氏名・役職・温度計アイコン・最終コンタクト日）
- 上部：検索バー＋ステータスタブ＋タグドロップダウンフィルター
- ソート：最終コンタクト日 / 登録日 / 名前順

### ③ 名刺詳細ページ
- 基本情報（編集ボタン付き）
- コンタクト履歴タイムライン（種別アイコン＋日付＋メモ）
- 「コンタクトを記録」ボタン（モーダル：種別セレクト＋一言メモ）
- リマインダー設定パネル（日付ピッカー＋件名）
- タグ編集エリア

### ④ リマインダー一覧ページ
- 期限別カレンダービュー（月間）＋リスト切り替え
- リマインダーの完了チェック・再設定機能

### ⑤ 設定ページ
- CSV インポート/エクスポート
- タグ・ステータム一覧管理
- データリセット

## 4. データ構造
```
-- 名刺テーブル
contacts
id INT PK AUTO_INCREMENT
name VARCHAR(100) NOT NULL
company VARCHAR(100)
title VARCHAR(100)
email VARCHAR(150)
phone VARCHAR(50)
scene ENUM('exhibition','meeting','referral','other')
notes TEXT
status ENUM('new','negotiating','closed','dormant') DEFAULT 'new'
created_at DATETIME
updated_at DATETIME

-- タグ
tags
id INT PK
name VARCHAR(50)

contact_tags
contact_id INT FK
tag_id INT FK

-- コンタクト履歴
contact_logs
id INT PK
contact_id INT FK
action_type ENUM('call','email','meeting','dm','other')
memo TEXT
logged_at DATETIME

-- リマインダー
reminders
id INT PK
contact_id INT FK
due_date DATE
subject VARCHAR(200)
is_done TINYINT(1) DEFAULT 0
created_at DATETIME
```
LocalStorageのみで動作する簡易版も用意し、DBなしでも即日公開できる構成とする。

## 5. デザインの方向性
- カラー：ネイビー（#1a2e4a）をベースに、アクセントをアンバー（#f59e0b）で統一したスマートビジネス配色
- フォント：Noto Sans JP（本文）＋ Inter（数字・英字）
- カード型UIで名刺の物理的な感覚を演出（軽いシャドウ＋角丸）
- 温度計アイコン（🔥WARM/❄COLD/💬HOT）でひと目で関係度がわかる
- モバイルファースト：展示会の現場でスマホからサクッと登録できる大きめ入力フォーム
- 全ページ単一HTMLに近い構成でPageRouter不要、PHP APIエンドポイントはcontacts.php 1ファイルに集約しシンプルな実装を維持する