OKRPlanner - チーム目標設定＆進捗共有ボード

## 1. アプリの目的・ターゲットユーザー
OKR（Objectives & Key Results）フレームワークを使って、スタートアップ・中小企業・部署単位のチームが「目標（Objective）」と「主要成果（Key Results）」を設定し、進捗をリアルタイムに共有・可視化できるブラウザ完結型の無料ツール。
- ターゲット: チームリーダー・マネージャー・経営者・フリーランスチーム
- 外部ツール（Notion・Asana等）が重すぎると感じる5〜20名規模のチームに最適
- 登録不要で即使用開始。ボードIDとパスワードでチーム共有

---

## 2. 主要機能
- **OKRボード作成**: チーム名・期間（四半期/年間/カスタム）を入力してボードを作成。6桁のボードIDとオプションパスワードで共有URL発行
- **Objective登録**: 最大5つのObjective（定性目標）を登録。担当者名・カテゴリ（成長/品質/顧客/財務/組織）・優先度（高中低）を設定
- **Key Results管理**: 各Objectiveに最大4つのKRを追加。KRは「数値目標型（開始値・目標値・現在値）」または「マイルストーン型（チェックボックス）」を選択。現在値を更新するたびに達成率を自動計算
- **進捗ビジュアライズ**: Objective達成率をプログレスバー＋円グラフで表示。チーム全体の平均OKRスコア（0〜1.0）をダッシュボードに大きく表示。信号機カラー（赤0〜0.3 / 黄0.4〜0.6 / 緑0.7〜1.0）で一目判断
- **チェックインコメント**: 各KRに週次更新コメントをスタンプ付き（🚀進捗あり/⚠️ブロック中/✅完了）で投稿し、更新履歴を時系列表示
- **PDF/PNG出力**: 現在のボード状態をA4横向きレイアウトで印刷・保存（window.print()使用）

---

## 3. 画面構成

### トップページ (index.php)
- キャッチコピー「OKRを、もっとシンプルに。」
- 「新しいボードを作る」フォーム（チーム名・期間・パスワード任意）
- 「既存ボードに参加」フォーム（ボードID・パスワード入力）
- OKRとは？の簡易説明セクション（折りたたみ式）

### ボードダッシュボード (board.php?id=XXXXXX)
- ヘッダー: チーム名・期間・全体OKRスコア（数値＋色）・残り日数カウントダウン
- Objectiveカード一覧（最大5枚）: 各カードにObjective名・担当者・プログレスバー・KRリスト
- KR行: タイプに応じて数値入力スライダーまたはチェックボックスを表示、達成率%をインライン更新
- 右サイドバー: チーム全体スコアのドーナツグラフ・期間タイムライン・最新チェックインフィード
- フッター: 共有URL表示・コピーボタン・PDF出力ボタン

### チェックインモーダル
- KRカードのコメントアイコンをクリックで表示
- スタンプ選択・テキスト入力（最大200字）・更新日自動記録

---

## 4. データ構造（MySQLテーブル概要）

```sql
boards
id INT PK AUTO_INCREMENT
board_id VARCHAR(8) UNIQUE -- 6桁英数字ID
team_name VARCHAR(100)
period_type ENUM('quarter','year','custom')
start_date DATE
end_date DATE
password VARCHAR(255) NULL -- bcryptハッシュ
created_at DATETIME

objectives
id INT PK AUTO_INCREMENT
board_id VARCHAR(8)
title VARCHAR(200)
owner_name VARCHAR(50)
category ENUM('growth','quality','customer','finance','org')
priority ENUM('high','mid','low')
sort_order INT
created_at DATETIME

key_results
id INT PK AUTO_INCREMENT
objective_id INT
title VARCHAR(200)
kr_type ENUM('numeric','milestone')
start_val FLOAT NULL
target_val FLOAT NULL
current_val FLOAT NULL -- numericの場合
is_done TINYINT(1) -- milestoneの場合
unit VARCHAR(20) NULL -- 例: 件, %, 万円
sort_order INT
updated_at DATETIME

checkin_comments
id INT PK AUTO_INCREMENT
kr_id INT
stamp ENUM('rocket','warning','done')
comment VARCHAR(200)
author_name VARCHAR(50)
created_at DATETIME
```

---

## 5. デザインの方向性
- **カラーパレット**: ダークネイビー (#0F1629) を背景ベースに、アクセントカラーはサイアン (#00D4FF) とパープル (#7C3AED)。ビジネスツールらしい知的・クールな印象
- **フォント**: 見出しに「Noto Sans JP Bold」、数値に等幅フォント（monospace）を使用
- **カード型レイアウト**: Objective単位でカードを横並びまたは縦積みで整列。影付きカードでモダンSaaS風
- **プログレスバー**: グラデーション（シアン→パープル）塗りで達成率を表現。0%は赤、70%超で緑に切り替え
- **スコア表示**: ボード上部中央に大きな「0.73」のような数値と信号機カラーの丸アイコン
- **スマホ対応**: Objectiveカードは1カラム表示に切り替え。KR更新はタップしやすいスライダー実装
- **全体トーン**: Notionより視覚的、Excelより直感的。進捗が「見えている感」を強調する設計