StaffSkillMap - チームスキル可視化＆育成計画メーカー

## 1. アプリの目的・ターゲットユーザー
中小企業のチームリーダー・マネージャー・人事担当者が、メンバーのスキルレベルを一覧で可視化し、育成計画（OJT・研修・目標設定）を手軽に作成・共有できるブラウザ完結型ツール。「誰が何を得意か」「チームのどこにスキルギャップがあるか」をひと目で把握し、属人化の解消や採用計画立案にも活用できる。登録不要・無料で即使用開始できる。

---

## 2. 主要機能

- **スキルマップ作成**: チーム名・メンバー名・スキル項目（最大20項目）を自由入力し、メンバー×スキルのマトリクス表を自動生成。スキルレベルは0〜4の5段階（未習得／見習い／一人前／指導可／エキスパート）をドロップダウンまたはセルクリックで入力。
- **レーダーチャート個人カルテ**: メンバーをクリックすると個人ページに遷移し、スキルレーダーチャート・平均レベル・得意分野ランキング・苦手分野アラートを表示。
- **チームギャップヒートマップ**: スキル項目ごとにチーム平均レベルを色（赤〜緑）で表示するヒートマップビュー。どのスキルが全体的に弱いかを即座に特定できる。
- **育成計画カード作成**: ギャップのあるスキル項目に対し「担当メンバー・育成目標レベル・期限・育成方法（OJT/研修/自己学習）・担当メンター」を記入した育成計画カードを作成。カード一覧はKanbanビュー（未着手/進行中/完了）で管理。
- **プリント＆CSV出力**: スキルマップをA4縦レイアウトで印刷用に出力、またはCSV形式でエクスポート。URLシェア機能で閲覧専用リンクを生成（LocalStorageデータをBase64エンコードしてURLに付与）。
- **プリセットスキルセット**: 営業・エンジニア・接客・製造ライン・経理の5職種向けスキル項目プリセットをワンクリックで読み込み、ゼロから項目を考える手間を省略。

---

## 3. 画面構成

### ① トップ（ランディング）画面
- キャッチコピー・使い方3ステップ図解
- 「新しいチームを作成」ボタン / 「URLから読み込む」ボタン
- 職種別プリセット選択カード（5種）

### ② チーム設定画面
- チーム名・部署名入力
- メンバー追加（名前・役職）リスト入力（最大30名）
- スキル項目追加（最大20項目）/ プリセットから挿入
- 「マップを作成」ボタン

### ③ スキルマップ（マトリクス）画面 ★メイン
- 縦軸：メンバー名、横軸：スキル項目の表
- 各セルにレベル表示（数字＋色バッジ）、クリックで0〜4を循環
- ビュー切替タブ：「マトリクス」「ヒートマップ」「個人カルテ」「育成計画」
- 右上：CSV出力・印刷・URLシェアボタン

### ④ ヒートマップビュー
- スキル項目を列、チーム平均レベルを赤（低）→黄→緑（高）で色分け
- レベル平均値を数値表示
- 平均2.0未満のスキルに「⚠ 要強化」バッジ自動付与

### ⑤ 個人カルテページ
- メンバー氏名・役職ヘッダー
- レーダーチャート（Chart.jsで実装）
- 得意スキルTop3・課題スキルTop3リスト
- 紐づく育成計画カード一覧

### ⑥ 育成計画（Kanban）画面
- 未着手 / 進行中 / 完了 の3列
- 計画カード：対象メンバー・スキル項目・目標レベル・期限・育成方法・担当メンター
- カードをドラッグ&ドロップでステータス変更
- 「＋計画を追加」ボタン → モーダルで入力

---

## 4. データ構造

データはすべてLocalStorageに保存（JSON形式）。URLシェア時はLZ-StringでJSON圧縮しBase64エンコードしてクエリパラメータ `?d=` に付与し共有（読み取り専用）。DBは不要。

```
team {
id, name, department, created_at,
members: [ { id, name, role } ],
skills: [ { id, name, category } ],
scores: [ { member_id, skill_id, level(0-4) } ],
plans: [ { id, member_id, skill_id, target_level, method,
mentor, deadline, status(todo/doing/done), note } ]
}
```

---

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

- **カラー**: ネイビー（#1E3A5F）をベースに、スキルレベルは0=グレー／1=赤系／2=オレンジ／3=水色／4=エメラルドグリーンの5色グラデーション。育成計画カードは白カード＋カラーアクセント。
- **フォント**: 日本語はNoto Sans JP、数値はRobotoを使用。
- **トーン**: シンプルで清潔感のあるビジネス系SaaS風。過剰な装飾は排除し、データが主役になるレイアウト。
- **レスポンシブ**: スマホでは縦スクロールのカード型に切り替え。マトリクス表はPC推奨として横スクロール対応。
- **アニメーション**: セルのレベル変更時に軽いフラッシュ効果、チャート描画時にフェードイン（約0.4秒）。