CriticalPath - プロジェクト工程表＆ガントチャートメーカー

## 1. アプリの目的・ターゲットユーザー
フリーランサー・中小企業の PM・社内プロジェクトリーダーが、Excelや高額ツールを使わずにブラウザだけでガントチャートを作成・共有・印刷できるツール。「タスクを入力すれば即ガントチャートが生成される」シンプルさを最優先とし、工程管理の入門者でも5分で使いこなせることを目指す。既存の KPIコックピット・DeadlineBoard・WorkFlow Visualizer とは「タスク×期間の時系列バー表示＋クリティカルパス自動計算」という切り口で差別化する。

## 2. 主要機能
- **タスク登録＆ガントバー自動描画**：タスク名・担当者・開始日・終了日・進捗(%)を入力すると Canvas/SVG ベースのガントチャートをリアルタイム生成。行をドラッグして期間を伸縮・移動できる。
- **依存関係設定＆クリティカルパス強調**：タスク間に「先行タスク」を設定すると矢印リンクが描画され、最長経路（クリティカルパス）を赤色で自動ハイライト。遅延リスクを即座に可視化。
- **マイルストーン登録**：日付を指定してダイヤモンド型のマイルストーンアイコンを追加可能。リリース日・納品日・会議日などの節目を視覚的に強調。
- **PNG/PDF印刷出力＆URL共有**：現在のチャートを PNG でダウンロード、または印刷プレビュー(A3横)として出力。プロジェクトデータを Base64 エンコードしてURLクエリに埋め込み、リンクを共有するだけで同じチャートを再現できる（DB不要のステートレス共有）。
- **テンプレートプリセット**：Webサイト制作・システム開発・イベント企画・建設工事・新商品開発の5テンプレートをワンクリックで読み込み、サンプルタスク込みで即編集開始できる。
- **今日線とバーン率インジケーター**：チャート上に「本日」の縦線を自動表示。全タスクの進捗平均と経過期間比率を比較し、「順調 / やや遅延 / 要注意」を3段階でバナー表示。

## 3. 画面構成
### ① ホーム画面
- 中央にキャッチコピーと「新規作成」ボタン
- テンプレート5種をカード形式で並べ、クリックで即エディタへ遷移
- 「URLから再開」入力フィールド（共有リンクを貼って読み込み）

### ② エディタ画面（メイン）
- **左ペイン（タスクリスト）**：タスク行テーブル（タスク名・担当者・開始日・終了日・進捗スライダー・先行タスク選択・削除ボタン）。行末の＋ボタンでタスク追加。上部に「マイルストーン追加」ボタン。
- **右ペイン（ガントチャート）**：Canvas 描画。横軸=日付（週/月 切替）、縦軸=タスク行。バーをドラッグで日程移動・右端ドラッグで期間伸縮。クリティカルパス赤太線、今日縦線。ズームイン/アウトボタン。
- **ツールバー**：PNG保存・印刷・URL共有コピー・テンプレート読込・全クリア・ヘルプの各ボタン
- **バーン率バナー**：チャート上部に「進捗率 XX% / 経過 XX%」と信号機カラーで状態表示

### ③ 印刷プレビューモーダル
- A3横レイアウトでチャートをレンダリングしたプレビュー
- 「PDFとして印刷（ブラウザ印刷ダイアログ）」「PNG保存」「閉じる」ボタン

## 4. データ構造
DB不要。全データを JSON としてブラウザの localStorage に保存し、URL 共有時は同 JSON を gzip 圧縮→Base64 エンコードしてクエリパラメータ `?d=...` に格納。

**プロジェクト JSON 構造**
```json
{
"projectName": "string",
"createdAt": "ISO8601",
"tasks": [
{
"id": "string (UUID)",
"name": "string",
"assignee": "string",
"startDate": "YYYY-MM-DD",
"endDate": "YYYY-MM-DD",
"progress": 0-100,
"predecessors": ["task_id", ...],
"color": "#HEX",
"isMilestone": false
}
]
}
```

## 5. デザインの方向性
- **カラーパレット**：ネイビー (#1E3A5F) をベースに、アクセントカラーはシアン (#00BCD4)、クリティカルパスは赤 (#E53935)、完了バーはグリーン (#43A047)
- **フォント**：日本語は Noto Sans JP、数字・英字は Roboto
- **雰囲気**：ビジネス用途に相応しい清潔感のあるフラットデザイン。過度な装飾を排し、チャートエリアを最大化したプロフェッショナルな UI
- **レスポンシブ**：PC（1024px以上）ではサイドバイサイド表示、スマホではタスクリストとチャートをタブ切替で表示
- **アクセシビリティ**：バーのカラーに加えて進捗%の数値ラベルを必ず併記し、色覚多様性に配慮