ブレインストーミング可視化ツール MindBloom - マインドマップ＆アイデア整理

## 1. アプリの目的・ターゲットユーザー
ブラウザ上でマインドマップを作成・保存・共有できる無料ツール。学生の授業ノート整理、社会人の企画立案・会議メモ、個人の目標設定や読書メモなど幅広い用途に対応。インストール不要・登録不要でブラウザだけで即使用開始できることが最大の特長。ローカルストレージで保存するため、サーバー側のユーザー管理が不要なシンプル構成。

## 2. 主要機能
- **ノード追加・編集・削除**: 中央ノード（テーマ）から子ノード・孫ノードをクリック＋キーで追加。ダブルクリックでテキスト編集。Deleteキーまたはボタンで削除。
- **ドラッグ移動**: 各ノードをドラッグして自由にレイアウト調整。ノード間のコネクションラインは自動追従。
- **カラーラベル＆アイコン**: ノードごとに8色のカラーを設定。💡🔥⭐📌🎯❓✅🚀の8種アイコンを付与可能。
- **テンプレート10種収録**: 「ビジネス企画」「読書メモ」「旅行計画」「授業ノート」「問題解決」「自己紹介」「プロジェクト管理」「日記」「ブレスト」「夢マップ」のプリセットをワンクリックで呼び出し。
- **PNG書き出し・URLシェア**: canvas.toBlob()でPNG保存。マップのJSONをBase64エンコードしてURLパラメーターに埋め込みシェア機能（外部サーバー不要）。
- **複数マップ管理**: localStorageに最大20件のマップを保存・切り替え。マップ一覧画面でサムネイル表示。

## 3. 画面構成
### ① ホーム画面（マップ一覧）
- 上部: ロゴ＋「新しいマップを作成」ボタン＋「テンプレートから作成」ボタン
- 中段: 保存済みマップのカードグリッド（タイトル・最終更新日・ノード数・サムネイル画像）
- カードには「開く」「削除」「PNG書き出し」「URLコピー」の4ボタン

### ② エディタ画面
- **ツールバー（上部固定）**: マップ名入力欄 / 「ノード追加」「カラー選択」「アイコン選択」「元に戻す(Ctrl+Z)」「ズームイン/アウト」「全体表示」「保存」「書き出し」「URLシェア」ボタン
- **キャンバスエリア（中央・全画面）**: SVG＋HTML overlayでノードとラインを描画。ピンチ/ホイールでズーム、スペース+ドラッグでパン。
- **右クリックコンテキストメニュー**: 選択ノードに「子ノード追加」「色変更」「アイコン変更」「削除」
- **ノードパネル（右サイドバー）**: 選択中ノードのテキスト・色・アイコン・メモ（最大200文字）の編集フォーム

### ③ テンプレート選択モーダル
- 10種のテンプレートをカード形式で表示。クリックでプレビュー → 「このテンプレートで作成」

## 4. データ構造
### localStorage保存形式（JSON）
```
maps: [
{
id: "uuid",
title: "マップタイトル",
updatedAt: "2025-01-01T00:00:00Z",
nodes: [
{
id: "node-1",
text: "中央テーマ",
x: 400, y: 300,
color: "#FF6B6B",
icon: "🎯",
note: "補足メモ",
parentId: null
},
{
id: "node-2",
text: "子ノード",
x: 600, y: 200,
color: "#4ECDC4",
icon: "",
note: "",
parentId: "node-1"
}
]
}
]
```
### DB（MySQL）- オプション（URLシェア用）
```
shared_maps テーブル:
id INT AUTO_INCREMENT PK
share_token VARCHAR(12) UNIQUE -- 短縮ハッシュ
map_json MEDIUMTEXT -- JSONデータ
created_at DATETIME
view_count INT DEFAULT 0
```
URLシェアはBase64 URLパラメーター方式を基本とし、PHPサーバー保存は「短縮URLモード」として追加機能として実装。

## 5. デザインの方向性
- **テーマカラー**: 清潔感のあるホワイト背景 + アクセントカラーのグリーン(#22C55E)とインディゴ(#6366F1)を基調
- **キャンバス背景**: うっすらとドットグリッド（`radial-gradient` で実現）を表示しノードの整列感を演出
- **ノード形状**: 中央ノードは角丸矩形（大）、子ノードは角丸矩形（中）、孫ノードはピル型（小）と階層で形状を変化
- **コネクションライン**: 有機的な曲線（cubic-bezier SVG path）でつなぎ、親ノードのカラーを反映した半透明ライン
- **アニメーション**: ノード追加時はscaleでポップイン、削除時はfadeoutの軽快なトランジション
- **フォント**: Noto Sans JP使用。ノードテキストは中央揃えで自動折り返し
- **全体トーン**: Notion・Figmaライクなミニマルで落ち着いたデザイン。難しそうに見えずすぐ使い始められる親しみやすさを重視