依存関係の分析:

デザインを受け取る(1) → HTMLで実装(1)
                       → ナビゲーション作成(2)
先輩のAPI完成待ち    → お知らせ一覧(3)
HTML実装完了(1,2,3) → レスポンシブ化(4)
すべて完了          → テスト・バグ修正(5)

順番:

1. トップページ実装 → 2. ナビゲーション → 3. お知らせ一覧 → 4. レスポンシブ化 → 5. テスト

## チケット #1

**タイトル**: トップページのデザインをHTMLで実装する **担当者**: 自分
**優先度**: 高 **期限**: 2026-02-05（木） **ステータス**: Todo

### 説明

## 背景

社内ポータルサイトリニューアルのメイン画面。デザイナー佐藤さんからデザインデータを受け取って実装する。

## やること

1. 佐藤さんからデザインデータ（Figma）を受け取る
2. HTML/CSSでトップページを実装する
3. デザインと実装の差異がないか佐藤さんに確認してもらう

## 完了条件

- [ ] デザインデータ通りにHTML/CSSが実装されている
- [ ] 佐藤さんのレビューが完了している
- [ ] ブラウザ（Chrome, Firefox）で表示確認済み

## 備考

- デザインデータは2/2（月）に佐藤さんから共有予定
- 関連: #2（ナビゲーション）と並行可能

## チケット #2

**タイトル**: 全ページ共通のナビゲーションメニューを作成する **担当者**: 自分
**優先度**: 高 **期限**: 2026-02-05（木） **ステータス**: Todo

### 説明

## 背景

すべてのページで使う共通のナビゲーションメニュー。ヘッダーに配置し、各ページへのリンクを含む。

## やること

1. ナビゲーションのHTML構造を作成する
2. CSSでスタイリングする
3. 全ページに適用できるよう共通コンポーネント化する

## 完了条件

- [ ] ナビゲーションメニューが表示される
- [ ] 各ページへのリンクが正常に動作する
- [ ] 全ページで同じナビゲーションが表示される

## 備考

- ナビゲーション項目: トップ、お知らせ、社員検索、設定
- #1と並行して進めてOK

## チケット #3

**タイトル**: お知らせ一覧ページを作成する **担当者**: 自分 **優先度**: 中
**期限**: 2026-02-09（月） **ステータス**: Todo

### 説明

## 背景

先輩が作成するAPIからお知らせデータを取得して表示するページ。APIの完成を待ってから実装する必要がある。

## やること

1. お知らせ一覧ページのHTMLを作成する
2. 先輩のAPIからデータを取得する処理を実装する
3. 取得したデータを一覧で表示する
4. 日付順に並べて表示する

## 完了条件

- [ ] APIからお知らせデータを取得できる
- [ ] 一覧が日付の新しい順に表示される
- [ ] タイトル、日付、概要が表示される

## 備考

- 先輩のAPI完成予定: 2/5（木）
- APIが遅れる場合、ダミーデータで画面だけ先に作る
- 関連: 先輩のAPIチケット（依存）

## チケット #4

**タイトル**: 全ページのレスポンシブ対応を実施する **担当者**: 自分
**優先度**: 中 **期限**: 2026-02-11（水） **ステータス**: Todo

### 説明

## 背景

社員がスマートフォンからもポータルサイトを閲覧する。全ページをスマートフォン・タブレットでも見やすくする。

## やること

1. トップページをレスポンシブ対応する
2. ナビゲーションをハンバーガーメニューに変更する
3. お知らせ一覧ページをレスポンシブ対応する
4. 各デバイスサイズで表示確認する

## 完了条件

- [ ] スマートフォン（375px）で全ページが正常表示される
- [ ] タブレット（768px）で全ページが正常表示される
- [ ] ナビゲーションがハンバーガーメニューになる

## 備考

- #1, #2, #3 の完了後に着手する
- Chrome DevTools のレスポンシブモードで確認

## チケット #5

**タイトル**: 全ページのテストを実施しバグを修正する **担当者**: 自分
**優先度**: 高 **期限**: 2026-02-13（金） **ステータス**: Todo

### 説明

## 背景

リリース前の最終確認。全ページが正常に動作することを確認し、バグがあれば修正する。

## やること

1. テスト項目リストを作成する
2. Chrome, Firefox でテストを実施する
3. 発見したバグを記録する
4. バグを修正する
5. 修正後に再テストする

## 完了条件

- [ ] テスト項目リストが作成されている
- [ ] 全テスト項目がパスしている
- [ ] 発見されたバグがすべて修正済みである
- [ ] 再テストに合格している

## 備考

- #1〜#4 がすべて完了してから着手する
- 重大なバグが見つかった場合は先輩に相談する

graph LR
    subgraph Todo["Todo"]
        T1["#1 トップページ [高] 2/5"]
        T2["#2 ナビゲーション [高] 2/5"]
        T3["#3 お知らせ一覧 [中] 2/9"]
        T4["#4 レスポンシブ [中] 2/11"]
        T5["#5 テスト・修正 [高] 2/13"]
    end
    subgraph InProgress["In Progress"]
        IP["（まだなし）"]
    end
    subgraph Done["Done"]
        D["（まだなし）"]
    end
    Todo --> InProgress --> Done
    style Todo fill:#fee2e2,stroke:#dc2626,stroke-width:2px,color:#991b1b
    style InProgress fill:#fef3c7,stroke:#d97706,stroke-width:2px,color:#92400e
    style Done fill:#d1fae5,stroke:#059669,stroke-width:2px,color:#065f46
    style T1 fill:#fee2e2,stroke:#dc2626,color:#991b1b
    style T2 fill:#fee2e2,stroke:#dc2626,color:#991b1b
    style T3 fill:#fef3c7,stroke:#d97706,color:#92400e
    style T4 fill:#fef3c7,stroke:#d97706,color:#92400e
    style T5 fill:#fee2e2,stroke:#dc2626,color:#991b1b
    style IP fill:#f3f4f6,stroke:#9ca3af,color:#6b7280
    style D fill:#f3f4f6,stroke:#9ca3af,color:#6b7280

並び順の理由:

• #1, #2 は依存関係がなく並行着手可能 → 最初に取り組む
• #3 はAPIの完成待ち → #1, #2 の後
• #4 は #1〜#3 の完了が前提
• #5 は最後（全ページ完成後）

</details>

---

## 達成度チェック

### クリア数で判定

| クリア数 | 判定 |
|----------|------|
| Mission 1〜3 すべて | 完璧！チケット管理マスター |
| Mission 1〜2 | 合格！カンバン配置も練習しよう |
| Mission 1 のみ | もう少し！チケットの書き方を復習しよう |

### スキルチェックリスト

- [ ] タスクの依存関係を分析できた
- [ ] チケットにタイトル・説明・期限・優先度を設定できた
- [ ] 完了条件を具体的に書けた
- [ ] カンバンボードに優先順位を考慮して配置できた
- [ ] WIP制限を意識した計画が立てられた

---

## まとめ

この演習で実践したこと：

| 操作 | 内容 |
|------|------|
| タスク分析 | 依存関係と順序の整理 |
| チケット作成 | タイトル、説明、完了条件の記述 |
| 優先度設定 | 高・中・低の判断 |
| カンバン配置 | 優先順位を考慮した初期配置 |

---

## 次のステップへ

チケットの作成とカンバンボードへの配置を実践できました。次のセクションでは、Step 1で学んだ内容の理解度をチェックするクイズに挑戦しましょう。

---

*推定所要時間: 90分*