カンバンビュー設計
概要
プロジェクト詳細画面。Issueをカンバン形式で可視化し、進行状況・アサイン状況・ETA予測を一画面で把握する。 サイドパネルにプロジェクトサマリーとボトルネック検知を配置。
画面レイアウト（ASCII Wireframe）
+================================================================================+
| HEADER |
| [Logo] Issue Outsource Platform 🔔(3) 👤 田中マネージャー ▼ |
+================================================================================+
| ← ダッシュボードに戻る 📁 ECサイトリニューアル |
+================================================================================+
| |
| +------------------------------------------+ +-------------------------------+ |
| | カンバンボード | | サイドパネル | |
| +------------------------------------------+ +-------------------------------+ |
| | | | | |
| | 未着手 着手可能 進行中 レビュー | | 📊 プロジェクト情報 | |
| | (3) (2) (4) 待ち(2) | | +-----------+ | |
| | | | | 予算状況 | | |
| | +------+ +------+ +------+ +------+ | | | 総予算: ¥1,200,000 | |
| | |#101 | |#105 | |#103 | |#108 | | | | 消化額: ¥720,000 | |
| | |認証基| |商品検| |カート| |決済画| | | | [========> ] 60% | |
| | |盤実装| |索API | |機能 | |面UI | | | | 残予算: ¥480,000 | |
| | | | | | | | | | | | +-----------+ | |
| | |¥80K | |¥40K | |¥60K | |¥50K | | | | |
| | | | | | |👤佐藤| |👤鈴木| | | 👥 アサイン状況 | |
| | |⭐⭐⭐ | |⭐⭐ | |⭐⭐⭐ | |⭐⭐ | | | +---------------------------+ | |
| | |期限 | |期限 | |期限 | |⚠期限 | | | | 佐藤: ████░░ 4件 | | |
| | |4/15 | |4/10 | |4/12 | |3/28 | | | | 鈴木: ██░░░░ 2件 | | |
| | +------+ +------+ +------+ +------+ | | | 田中: ███░░░ 3件 | | |
| | | | | 未割当: 2件 | | |
| | +------+ +------+ | | +---------------------------+ | |
| | |#102 | |#106 | FB対応 完了 | | | |
| | |ユーザ| |在庫管| (1) (11) | | 📅 ETA予測 | |
| | |ー管理| |理 | | | +---------------------------+ | |
| | | | | | +------+ | | | 残Issue: 14件 | | |
| | |¥60K | |¥45K | |#110 | | | | 週間完了ペース: 3.5件/週 | | |
| | | | |👤田中| |API設 | | | | 完了予測: 4週間後 | | |
| | |⭐⭐ | |⭐⭐⭐ | |計レビ| | | | 予測日: 2026-04-25 | | |
| | |期限 | |期限 | |ュー | | | +---------------------------+ | |
| | |4/20 | |4/08 | | | | | | |
| | +------+ +------+ |¥30K | | | ⚠ ボトルネック検知 | |
| | |👤佐藤| | | +---------------------------+ | |
| | +------+ |⭐ | | | | 🔴 #108 決済画面UI | | |
| | |#104 | |期限 | | | | レビュー待ち 5日経過 | | |
| | |メール| |4/05 | | | | 🟡 #106 在庫管理 | | |
| | |通知 | +------+ | | | レビュー待ち 3日経過 | | |
| | | | | | +---------------------------+ | |
| | |¥30K | 完了(11件は折りたたみ) | | | |
| | | | [+11件 表示 ▼] | | | |
| | |⭐ | | | | |
| | |期限 | | | | |
| | |4/25 | | | | |
| | +------+ | | | |
| | | | | |
| +------------------------------------------+ +-------------------------------+ |
| |
+================================================================================+カンバンカラム定義
| カラム | 説明 | Issue遷移条件 |
|---|---|---|
| 未着手 | まだ誰もアサインされていないIssue | 初期状態 |
| 着手可能 | アサイン済み、作業開始待ち | 委託者がアサインを受諾 |
| 進行中 | 委託者が作業中 | 委託者がブランチを作成 or 最初のコミット |
| レビュー待ち | MR提出済み、レビュアー対応待ち | MR作成時に自動遷移 |
| FB対応中 | レビューでフィードバックあり、修正中 | レビュアーが変更要求 |
| 完了 | マージ済み、支払い確定 | MRマージ時に自動遷移 |
Issueカード詳細
カード構成
+----------------------------+
| #101 認証基盤実装 |
| |
| ¥80,000 ⭐⭐⭐ |
| 👤 佐藤太郎 |
| 📅 期限: 2026-04-15 |
| (残り18日) |
+----------------------------+カード表示要素
| 要素 | 説明 | 表示ルール |
|---|---|---|
| Issue番号 + タイトル | GitLab Issue ID とタイトル | 長い場合は2行で折り返し |
| 報酬額 | Issue に設定された報酬金額 | ¥XX,XXX 形式 |
| 難易度バッジ | ⭐(Easy) / ⭐⭐(Medium) / ⭐⭐⭐(Hard) | ラベルから自動判定 |
| 担当者アバター | 委託者のアバター画像 + 名前 | 未アサインは空欄 |
| 残り期限 | 期日と残日数 | 3日以内は赤字、期限超過は赤背景 |
カード色分けルール
| 条件 | カード装飾 |
|---|---|
| 期限超過 | 左ボーダー赤 + 赤背景（薄） |
| 期限3日以内 | 左ボーダーオレンジ |
| レビュー待ち3日以上滞留 | 左ボーダー赤 + 警告アイコン |
| 通常 | 左ボーダーなし |
カードクリック時
Issueの詳細モーダルを表示:
- Issue全文（Markdown）
- MRリンク
- アクティビティログ（コメント履歴）
- 見積工数 vs 実績工数
サイドパネル
予算状況
| 表示項目 | 説明 |
|---|---|
| 総予算 | プロジェクトの総予算額 |
| 消化額 | 支払い済み + 確定済みの合計 |
| プログレスバー | 消化率を視覚表示（70%超でオレンジ、90%超で赤） |
| 残予算 | 総予算 - 消化額 |
アサイン状況
委託者ごとの担当Issue件数を棒グラフで表示。
| 表示項目 | 説明 |
|---|---|
| 委託者名 | 担当者名 |
| 担当件数バー | 担当Issue数を横棒グラフで表示 |
| 未割当 | アサインされていないIssue数 |
ETA予測
完了予測日を算出して表示する。
算出ロジック
残Issue数 = 総Issue数 - 完了Issue数
週間完了ペース = 直近4週間の完了Issue数 / 4
完了予測週数 = 残Issue数 / 週間完了ペース
完了予測日 = 現在日 + (完了予測週数 × 7日)| 表示項目 | 説明 |
|---|---|
| 残Issue数 | 未完了のIssue件数 |
| 週間完了ペース | 直近4週間の平均完了件数/週 |
| 完了予測 | 「X週間後」形式 |
| 予測日 | YYYY-MM-DD 形式の完了予定日 |
ETA表示の色分け
| 条件 | 色 |
|---|---|
| 予測日がプロジェクト期限内 | 緑 |
| 予測日がプロジェクト期限の2週間以内 | オレンジ |
| 予測日がプロジェクト期限を超過 | 赤 |
ボトルネック検知
| 検知条件 | 表示 | 重要度 |
|---|---|---|
| レビュー待ち滞留 > 5日 | 🔴 Issue番号 + タイトル + 経過日数 | 高 |
| レビュー待ち滞留 > 3日 | 🟡 Issue番号 + タイトル + 経過日数 | 中 |
| FB対応中で3日以上更新なし | 🟡 Issue番号 + タイトル + 最終更新日 | 中 |
ドラッグ&ドロップ
マネージャーはカード操作不可（閲覧専用）。 カラム間のIssue移動はGitLab上のステータス変更に連動して自動反映される。
API連携
| エンドポイント | メソッド | 説明 |
|---|---|---|
GET /api/v1/projects/:id/kanban | GET | カンバンビュー用データ |
GET /api/v1/projects/:id/summary | GET | サイドパネル用集計データ |
GET /api/v1/projects/:id/eta | GET | ETA予測データ |
GET /api/v1/projects/:id/bottlenecks | GET | ボトルネック検知結果 |
レスポンス例: GET /api/v1/projects/:id/kanban
json
{
"project": {
"id": 1,
"name": "ECサイトリニューアル"
},
"columns": [
{
"key": "todo",
"label": "未着手",
"issues": [
{
"id": 101,
"title": "認証基盤実装",
"reward": 80000,
"difficulty": "hard",
"assignee": null,
"due_date": "2026-04-15",
"days_remaining": 18,
"is_overdue": false
}
]
},
{
"key": "in_review",
"label": "レビュー待ち",
"issues": [
{
"id": 108,
"title": "決済画面UI",
"reward": 50000,
"difficulty": "medium",
"assignee": {
"name": "鈴木一郎",
"avatar_url": "/avatars/suzuki.png"
},
"due_date": "2026-03-28",
"days_remaining": 0,
"is_overdue": true,
"days_in_column": 5
}
]
}
]
}レスポンス例: GET /api/v1/projects/:id/eta
json
{
"remaining_issues": 14,
"weekly_completion_rate": 3.5,
"estimated_weeks": 4.0,
"estimated_completion_date": "2026-04-25",
"project_deadline": "2026-05-15",
"is_on_track": true
}