KPIコックピット - 目標進捗ダッシュボードメーカー

## 1. アプリの目的・ターゲットユーザー
個人事業主・スタートアップ・中小企業の営業担当・チームリーダーが、売上目標・訪問件数・成約率などのKPIを登録し、実績を入力するだけで進捗率・達成見込み・ペース判定をリアルタイムに可視化できる「KPI進捗ダッシュボード」。Excelや高額BIツール不要で、ブラウザだけで完結する。登録不要で即利用でき、LocalStorageにデータを保存する。

## 2. 主要機能
- **KPI登録・管理**: 指標名・目標値・単位（円・件・%・個など）・計測期間（週次/月次/四半期/年次）・責任者名を設定。最大20件まで登録可能。
- **実績入力**: 各KPIに対して日付と実績値を追加入力（累積型 or 最新値上書き型を選択）。入力フォームはモーダルで素早く入力できる。
- **進捗ゲージ＆ペース判定**: 達成率を円形ゲージで表示。「期間の経過割合 vs 実績割合」を比較し、🟢順調 / 🟡やや遅れ / 🔴要注意 の3段階でペースを自動判定。
- **折れ線グラフで推移表示**: Canvas APIを用いた純正JSグラフで実績推移と目標ラインを重ねて表示。達成見込み日を線形補間で自動算出・表示。
- **ダッシュボードURL共有**: 全KPIデータをBase64エンコードしてURLパラメータに埋め込み、共有リンクを生成。閲覧者はURLを開くだけで最新状態を確認できる（編集不可の閲覧専用モード）。
- **CSVエクスポート**: 全KPIの実績データをCSV形式でダウンロード。

## 3. 画面構成
### トップ / ダッシュボード画面
- ヘッダー: アプリロゴ「KPIコックピット」、「+ KPIを追加」ボタン、「共有URLを生成」ボタン、「CSV出力」ボタン
- KPIカードグリッド（2列レイアウト / スマホは1列）
- 各カード: 指標名・責任者・計測期間・達成率ゲージ・ペース判定バッジ・目標値 vs 実績値・推移ミニグラフ・「実績を入力」ボタン・「詳細」ボタン・「削除」アイコン
- 空状態: コックピット風のイラストと「最初のKPIを登録しましょう」の誘導テキスト

### KPI登録・編集モーダル
- 入力フィールド: 指標名・目標値・単位・計測期間（セレクト）・開始日・終了日・責任者名・累積型/最新値型の切替トグル
- 保存・キャンセルボタン

### 実績入力モーダル
- 日付（date picker）・実績値（数値input）・メモ（任意）
- 入力履歴の一覧と削除ボタン

### KPI詳細モーダル
- 大きな折れ線グラフ（目標ライン＋実績ライン＋達成見込みライン）
- 実績入力履歴テーブル（日付・値・メモ）
- 達成見込み日の表示

## 4. データ構造（LocalStorage）
```json
{
"kpis": [
{
"id": "uuid",
"name": "月間売上",
"unit": "万円",
"target": 500,
"period": "monthly",
"startDate": "2025-01-01",
"endDate": "2025-01-31",
"owner": "田中",
"type": "cumulative",
"records": [
{ "date": "2025-01-10", "value": 120, "memo": "" }
]
}
]
}
```
共有URL生成時はこのJSONをBase64エンコードしてクエリパラメータに付与し、URLパラメータが存在する場合は閲覧専用モード（編集ボタン非表示）で表示する。

## 5. デザインの方向性
- **テーマ**: ダークネイビー（#0F172A）ベースのコックピット・ビジネスダッシュボード風。アクセントカラーは電気ブルー（#38BDF8）
- **カード**: 角丸・グラスモーフィズム風の半透明カード（背景#1E293B）に白文字
- **ゲージ**: SVGの円形プログレスバーで達成率を表示。100%超は金色にグロー
- **ペースバッジ**: 緑/黄/赤のピル型バッジ
- **フォント**: 数値部分は等幅フォント（monospace）で視認性重視
- スマホ対応: カード1列・モーダルは画面下から出るボトムシート風
- アニメーション: ゲージのカウントアップ、カード表示のフェードインを軽量CSSで実装