演習：タスクを登録してみよう

ストーリー

先輩「じゃあ実際にやってみよう。架空のプロジェクトで、タスクをチケットにして登録する練習だよ」

「やってみます！」

先輩「5つのタスクをチケット化してもらうよ。タイトル、説明、優先度、期限を全部書いてね」

ミッション概要

架空のプロジェクト「社内ポータルサイトのリニューアル」で、上司から依頼された5つの作業をチケットにしてください。

前提情報

プロジェクト: 社内ポータルサイト リニューアル
期間: 2026年2月2日（月）〜 2月13日（金）の2週間
あなたの担当: フロントエンド関連のタスク
チームメンバー: あなた、先輩（バックエンド担当）、デザイナー（佐藤さん）

上司からの依頼内容

「以下の5つをお願いします」

トップページのデザインを佐藤さんからもらって、HTMLで実装する

ナビゲーションメニューを作る（全ページ共通）

お知らせ一覧ページを作る（先輩がAPIを作るので、それを使う）

スマートフォン対応（レスポンシブ化）

テストして、バグがあれば修正する

達成条件

5つのタスクすべてをチケット形式で書き出した
各チケットにタイトル・説明・担当者・期限・優先度を設定した
カンバンボードに配置した
タスク間の依存関係を考慮した

Mission 1: タスクを分析しよう

上司の依頼を読んで、以下を整理してください。

考えるポイント:

各タスクの依存関係は？（どれが先にないと困る？）
期限はどう設定する？
優先度はどうする？

依存関係の分析:

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

順番:

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

</details>

Mission 2: チケットを5枚書こう

以下のテンプレートを使って、5つのチケットを作成してください。

テンプレート

markdown

## チケット #N

**タイトル**:
**担当者**:
**優先度**: 高 / 中 / 低
**期限**:
**ステータス**: Todo

### 説明
（背景・やること・完了条件を書く）

自分で書いてから、解答例を確認してください。

チケット1: トップページの実装

markdown

## チケット #1

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

### 説明

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

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

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

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

</details>

チケット2: ナビゲーションメニュー

markdown

## チケット #2

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

### 説明

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

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

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

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

</details>

チケット3: お知らせ一覧ページ

markdown

## チケット #3

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

### 説明

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

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

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

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

</details>

チケット4: スマートフォン対応

markdown

## チケット #4

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

### 説明

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

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

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

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

</details>

チケット5: テスト・バグ修正

markdown

## チケット #5

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

### 説明

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

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

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

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

</details>

Mission 3: カンバンボードに配置しよう

5つのチケットを初期状態のカンバンボードに配置してください。優先度と依存関係を考慮して、Todo列の中での並び順も決めましょう。

┌──────────────────┐  ┌──────────────┐  ┌──────────┐
│      Todo        │  │  In Progress │  │   Done   │
├──────────────────┤  ├──────────────┤  ├──────────┤
│ #1 トップページ  │  │              │  │          │
│    [高] 2/5      │  │              │  │          │
│                  │  │              │  │          │
│ #2 ナビゲーション │  │              │  │          │
│    [高] 2/5      │  │              │  │          │
│                  │  │              │  │          │
│ #3 お知らせ一覧  │  │              │  │          │
│    [中] 2/9      │  │              │  │          │
│                  │  │              │  │          │
│ #4 レスポンシブ  │  │              │  │          │
│    [中] 2/11     │  │              │  │          │
│                  │  │              │  │          │
│ #5 テスト・修正  │  │              │  │          │
│    [高] 2/13     │  │              │  │          │
└──────────────────┘  └──────────────┘  └──────────┘

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

</details>

達成度チェック

クリア数で判定

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

スキルチェックリスト

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

まとめ

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

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

次のステップへ

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

推定所要時間: 90分