StakeholderMap - ステークホルダー関係図＆影響度管理ツール

## 1. アプリの目的・ターゲットユーザー
プロジェクト推進者・PM・コンサルタント・営業担当が、関係者（ステークホルダー）の影響力・関心度・立場・関係性を視覚的に整理し、コミュニケーション戦略を立案するための無料ブラウザツール。Excelの表管理では見えにくい「誰が誰に影響を与えているか」「誰を優先して巻き込むべきか」を直感的に把握できる。登録不要・LocalStorage保存でどのデバイスからでも即使用開始できる。

---

## 2. 主要機能
- **ステークホルダー登録**: 名前・役職・所属・立場（推進派/中立/抵抗派）・影響力スコア(1〜5)・関心度スコア(1〜5)・メモを入力して登録。最大30名まで対応。
- **2×2マトリクスマップ**: 横軸＝影響力、縦軸＝関心度の4象限（①巻き込む優先 ②情報共有で満足 ③意見を尊重 ④定期報告のみ）に自動プロット。バブルサイズで重要度を視覚化し、立場に応じて色分け。
- **関係線（コネクション）描画**: ステークホルダー間に「協力関係」「対立関係」「上下関係」の3種類の矢印線を引き、関係図（ネットワークマップ）を作成。Canvas+JS でドラッグ配置。
- **対応アクション管理**: 各ステークホルダーに「次のアクション」「フォロー期日」「担当者」を紐付け。期日が近いアクションをダッシュボード上部にリスト表示。
- **プロジェクト別管理**: 複数プロジェクトを切り替えて管理可能。プロジェクトの作成・削除・名前変更に対応。
- **PNG書き出し＆CSVエクスポート**: マトリクスマップと関係線図をPNGでダウンロード。ステークホルダー一覧をCSVでエクスポートしてExcel報告書に添付可能。

---

## 3. 画面構成

### ヘッダー
- アプリロゴ「StakeholderMap」
- プロジェクトドロップダウン（切り替え）＋「＋新規プロジェクト」ボタン
- 「PNGで保存」「CSVエクスポート」ボタン

### メイン（2カラムレイアウト）
**左パネル（幅35%）: ステークホルダーリスト**
- 「＋追加」ボタン → スライドインモーダル（名前・役職・所属・立場ラジオ・影響力スライダー・関心度スライダー・メモ・次アクション・期日入力）
- 登録済みリスト：立場に応じた左ボーダーカラー、編集・削除アイコン付きカード
- 期日が3日以内のアクションは黄色ハイライト

**右パネル（幅65%）: ビジュアルマップエリア**
- タブ切り替え：「マトリクスマップ」「関係線マップ」
- 「マトリクスマップ」: SVG描画。4象限のグリッド＋各ステークホルダーをバブルで表示。バブルにホバーで名前・スコア・メモをツールチップ表示。バブルはドラッグで手動再配置可能。
- 「関係線マップ」: Canvas描画。ステークホルダーをノードとして配置し、ノード間をクリック選択→関係種別選択で矢印を引く。ノードはドラッグ移動可能。

### 凡例エリア（マップ下部）
- 立場の色説明（緑：推進派 / 黄：中立 / 赤：抵抗派）
- 線種説明（青実線：協力 / 赤破線：対立 / グレー矢印：上下）

---

## 4. データ構造（LocalStorage）
```json
{
"projects": [
{
"id": "proj_001",
"name": "プロジェクトA",
"stakeholders": [
{
"id": "sh_001",
"name": "山田部長",
"role": "事業部長",
"org": "営業部",
"stance": "advocate",
"influence": 4,
"interest": 5,
"memo": "予算承認者",
"action": "月次報告MTGに招待",
"actionDue": "2025-07-31",
"owner": "鈴木",
"posX": 320,
"posY": 180
}
],
"connections": [
{
"id": "conn_001",
"from": "sh_001",
"to": "sh_002",
"type": "support"
}
]
}
]
}
```
DBは使用しない。LocalStorageのみで完結。

---

## 5. デザインの方向性
- **カラーパレット**: ダークネイビー（#0F1E36）を背景基調とし、アクセントにビジネスブルー（#3B82F6）とティール（#14B8A6）を使用。プロフェッショナルで落ち着いた印象。
- **フォント**: 日本語はNoto Sans JP、英数字はInter（Google Fonts）。
- **UIトーン**: コンサルティングツール的なクリーンなUIを意識。角丸カード、薄いボーダー、適切な余白でデータが読みやすい構成。
- **バブルデザイン**: 影響力×関心度のスコアに応じてバブルサイズを3段階に変化させ、立場（推進派/中立/抵抗派）で緑・黄・赤に色分け。
- **レスポンシブ**: スマホではリスト表示とマップ表示をタブで切り替えるシングルカラムレイアウトに変形。
- **アニメーション**: バブル追加時のフェードイン、マップ切り替え時のクロスフェードで操作のフィードバックを演出。重くならない軽量なCSS transitionのみ使用。