CompetitorWatch - 競合比較・ポジショニングマップメーカー

## 1. アプリの目的・ターゲットユーザー
新規事業立案・マーケティング担当者・スタートアップ創業者・フリーランスコンサルタントが、競合他社を整理し「自社の立ち位置」を視覚化できるブラウザ完結型の競合分析ツール。Excelや高額ツールに頼らず、登録不要・無料で使える。

---

## 2. 主要機能

- **競合登録カード**: 社名・URL・ロゴ絵文字・強み/弱み・ターゲット層・価格帯・特徴タグ（最大5つ）を入力し、カード形式で管理（最大20社）
- **ポジショニングマップ**: X軸・Y軸のラベルを自由に設定し（例：「価格 低↔高」「機能 シンプル↔高機能」）、各社をドラッグ&ドロップで2次元マップ上に配置。自社ポジションを強調表示
- **比較テーブル**: 選択した2〜5社を横並びにして、設定した評価項目（最大8項目）を⭐1〜5で採点。レーダーチャートで同時に可視化
- **SWOT自動ドラフト**: 競合カードの強み・弱みデータを元に、自社視点のSWOT分析（内製テンプレート文）を自動生成し、編集してコピーできる
- **PDF/PNG書き出し**: ポジショニングマップ・比較テーブル・SWOTをまとめて1枚のA4レポートイメージとして印刷/PNG保存
- **LocalStorage保存**: ブラウザ内にデータを保存し、次回訪問時も作業を継続可能。JSONエクスポート/インポートでバックアップ対応

---

## 3. 画面構成

### ① ホーム（プロジェクト選択）
- 「新規プロジェクト作成」ボタン＋プロジェクト名入力
- 既存プロジェクト一覧カード（最大10件）
- 各カードに「開く」「削除」「JSONエクスポート」ボタン

### ② 競合カード管理画面
- 上部：プロジェクト名・自社情報入力欄（社名・URL・一言コンセプト）
- カード一覧グリッド（3列）：社名、絵文字ロゴ、価格帯バッジ、タグ、強み/弱み要約
- 「＋競合を追加」ボタン → モーダルフォームで各項目入力
- 右上タブナビ：「カード管理」「ポジショニングマップ」「比較テーブル」「SWOTドラフト」「レポート書き出し」

### ③ ポジショニングマップ画面
- X軸・Y軸ラベルテキスト入力（左右・上下の端ラベル4か所）
- 600×500pxのキャンバス：企業名の丸バッジをドラッグで配置。自社は星アイコン＋ゴールド枠
- 右サイドパネル：表示する企業の表示/非表示チェックボックス
- 「PNG保存」ボタン

### ④ 比較テーブル画面
- 評価項目管理（＋追加・削除・並び替え）
- 企業選択チェックボックス（2〜5社）
- テーブル：行=評価項目、列=企業。セルをクリックして⭐1〜5入力
- 右下にレーダーチャート（Canvas描画）

### ⑤ SWOTドラフト画面
- S/W/O/Tの4象限テキストエリア（各最大6行）
- 「自動ドラフト生成」ボタン：登録競合データから内製テンプレート文を挿入
- 「全文コピー」ボタン

### ⑥ レポート書き出し画面
- プレビューエリア：A4縦レイアウトで①プロジェクト名+日付、②ポジショニングマップ、③比較テーブル、④SWOTを配置
- 「印刷 / PDF保存」ボタン（window.print）
- 「PNG書き出し」ボタン（html2canvas相当のCanvas描画）

---

## 4. データ構造（LocalStorage）

```json
{
"projects": [
{
"id": "uuid",
"name": "プロジェクト名",
"createdAt": "ISO日時",
"ownCompany": {
"name": "", "url": "", "concept": ""
},
"competitors": [
{
"id": "uuid",
"name": "",
"emoji": "🏢",
"url": "",
"priceRange": "低/中/高/不明",
"target": "",
"tags": [],
"strengths": "",
"weaknesses": "",
"mapX": 0.5,
"mapY": 0.5
}
],
"mapAxes": {
"xLeft": "低価格", "xRight": "高価格",
"yTop": "高機能", "yBottom": "シンプル"
},
"evalItems": [
{ "id": "uuid", "label": "機能の豊富さ" }
],
"scores": {
"competitorId": { "evalItemId": 3 }
},
"swot": {
"strength": "", "weakness": "",
"opportunity": "", "threat": ""
}
}
]
}
```

DBは不要。すべてLocalStorage + JSONエクスポート/インポートで完結。

---

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

- **カラー**: ネイビー (#1e2d4a) をベースに、アクセントカラーはコーポレートブルー (#3b82f6) とオレンジ (#f59e0b)。自社は常にゴールド強調
- **フォント**: 本文 `Noto Sans JP`、見出し セミボールド。数値・ラベルはモノスペースを部分採用
- **スタイル**: ダッシュボード系のクリーンなビジネスデザイン。カードに薄いドロップシャドウ、ホバーで枠線アクセント
- **レスポンシブ**: PC幅1200px基準の2カラムレイアウト。768px以下は1カラムに折り畳み。ポジショニングマップはスマホでピンチ操作対応
- **規模感**: 単一PHPファイル（データ保存はLocalStorage）＋CSS/JSファイル3〜4本で完結。サーバーサイド処理は不要