プロジェクト一覧ビュー設計
概要
マネージャーが全プロジェクトの予算・進捗・支払い状況を一画面で把握するためのダッシュボード。 予算超過・進捗遅延を即座に検知し、迅速な意思決定を支援する。
画面レイアウト（ASCII Wireframe）
+================================================================================+
| HEADER |
| [Logo] Issue Outsource Platform 🔔(3) 👤 田中マネージャー ▼ |
+================================================================================+
| |
| +------------------+ +------------------+ +------------------+ +----------+|
| | 📁 プロジェクト | | 💰 総予算 | | 📊 総消化額 | | 👥 委託者||
| | 総数 | | | | | | アクティブ|
| | | | | | | | ||
| | 12 | | ¥4,800,000 | | ¥2,156,000 | | 8 ||
| | (+2 今月) | | | | (44.9%) | | ||
| +------------------+ +------------------+ +------------------+ +----------+|
| |
| +--------------------------------------------------------------------------+ |
| | フィルタ & ソート | |
| | [ステータス ▼] [予算リスク順 ▼] [進捗遅延順 ▼] 🔍 プロジェクト検索 | |
| +--------------------------------------------------------------------------+ |
| |
| +--------------------------------------------------------------------------+ |
| | プロジェクト一覧 | |
| +----------+--------+-------------------+------------+----------+----------+ |
| | プロジェ | ステー | 予算状況 | Issue進捗 | 支払確定 | 乖離 | |
| | クト名 | タス | | | 金額 | 判定 | |
| +----------+--------+-------------------+------------+----------+----------+ |
| | | | 総予算 / 消化額 | 完了/総数 | | | |
| | | | [=====> ] xx% | (消化率%) | | | |
| | | | 残予算: ¥xxx | | | | |
| +----------+--------+-------------------+------------+----------+----------+ |
| | ECサイト | 🟢 | ¥1,200,000 | 18/25 | ¥680,000 | | |
| | リニュー |正常 | [========> ] 60% | (72.0%) | | 正常 | |
| | アル | | 残: ¥480,000 | | | | |
| +----------+--------+-------------------+------------+----------+----------+ |
| | 社内ツー | 🟡 | ¥800,000 | 5/20 | ¥420,000 | | |
| | ル開発 |注意 | [=========> ] 65% | (25.0%) | | ⚠ 乖離 | |
| | | | 残: ¥280,000 | | | +40% | |
| +----------+--------+-------------------+------------+----------+----------+ |
| | API基盤 | 🔴 | ¥600,000 | 3/15 | ¥510,000 | | |
| | 構築 |警告 | [==========] 92% | (20.0%) | | 🚨 超過 | |
| | | | 残: ¥48,000 | | | +72% | |
| +----------+--------+-------------------+------------+----------+----------+ |
| | モバイル | 🟢 | ¥2,200,000 | 30/40 | ¥546,000 | | |
| | アプリ |正常 | [====> ] 30% | (75.0%) | | 正常 | |
| | | | 残: ¥1,540,000 | | | | |
| +----------+--------+-------------------+------------+----------+----------+ |
| | | |
| | < 1 2 3 > 表示: 10件/ページ ▼ | |
| +--------------------------------------------------------------------------+ |
| |
+================================================================================+コンポーネント詳細
1. ヘッダー
| 要素 | 説明 |
|---|---|
| ロゴ | プラットフォームロゴ（クリックでダッシュボードトップへ） |
| 通知アイコン | 未読通知数バッジ付き。予算警告・レビュー完了等を表示 |
| ユーザーメニュー | ログインユーザー名、プロフィール、ログアウト |
2. サマリーカード
4つのKPIカードを横並びで配置。リアルタイム更新（30秒ポーリング or WebSocket）。
| カード | 表示内容 | 補足 |
|---|---|---|
| 総プロジェクト数 | アクティブプロジェクト件数 | 今月新規追加数をサブテキストで表示 |
| 総予算 | 全プロジェクトの予算合計 | - |
| 総消化額 | 全プロジェクトの消化額合計 | 消化率%をサブテキストで表示 |
| アクティブ委託者数 | 現在稼働中の委託者数 | - |
3. フィルタ・ソート
| フィルタ | 選択肢 |
|---|---|
| ステータス | すべて / 正常 / 注意 / 警告 |
| 予算リスク順 | 乖離率降順（予算超過が上位に） |
| 進捗遅延順 | 遅延度降順（遅延プロジェクトが上位に） |
| テキスト検索 | プロジェクト名のインクリメンタルサーチ |
ソート: 各カラムヘッダークリックで昇順/降順トグル。
4. プロジェクト一覧テーブル
カラム定義
| カラム | 型 | 説明 |
|---|---|---|
| プロジェクト名 | string | クリックでカンバンビューへ遷移 |
| ステータスアイコン | enum | 🟢正常 / 🟡注意 / 🔴警告 |
| 総予算 | number | プロジェクトに割り当てた総予算額（円） |
| 消化額 | number | 支払い済み + 支払い確定済みの合計額 |
| 残予算 | number | 総予算 - 消化額 |
| 予算消化率 | percentage | プログレスバー + パーセント表示 |
| Issue完了数/総数 | string | "18/25" 形式 |
| Issue消化率 | percentage | 完了Issue数 / 総Issue数 |
| 支払確定金額 | number | ステータスが「完了（支払確定）」のIssue報酬合計 |
| 乖離判定 | enum | 予算消化率とIssue消化率の差分で判定 |
ステータス判定ロジック
if 予算消化率 > Issue消化率 + 30%:
ステータス = 🔴 警告
elif 予算消化率 > Issue消化率 + 20%:
ステータス = 🟡 注意
else:
ステータス = 🟢 正常乖離表示ルール
| 条件 | 表示 | 色 |
|---|---|---|
| 乖離 <= 10% | 「正常」 | グレー |
| 10% < 乖離 <= 20% | 「⚠ 乖離 +XX%」 | イエロー |
| 乖離 > 20% | 「🚨 超過 +XX%」 | レッド |
※ 乖離 = 予算消化率 - Issue消化率
行クリック時の動作
プロジェクト行をクリックすると、当該プロジェクトのカンバンビュー（kanban-view.md）へ遷移する。
レスポンシブ対応
| ブレークポイント | レイアウト変更 |
|---|---|
| >= 1280px | フル表示（上記ワイヤーフレーム通り） |
| 768px - 1279px | サマリーカード2x2グリッド、テーブル横スクロール |
| < 768px | サマリーカード縦積み、テーブルはカード表示に切り替え |
API連携
| エンドポイント | メソッド | 説明 |
|---|---|---|
GET /api/v1/dashboard/summary | GET | サマリーカード用集計データ |
GET /api/v1/projects | GET | プロジェクト一覧（ページネーション対応） |
GET /api/v1/projects?status=warning&sort=budget_gap_desc | GET | フィルタ・ソート付き |
レスポンス例: GET /api/v1/dashboard/summary
json
{
"total_projects": 12,
"new_projects_this_month": 2,
"total_budget": 4800000,
"total_consumed": 2156000,
"consumption_rate": 44.9,
"active_contractors": 8
}レスポンス例: GET /api/v1/projects
json
{
"items": [
{
"id": 1,
"name": "ECサイトリニューアル",
"status": "normal",
"budget": {
"total": 1200000,
"consumed": 720000,
"remaining": 480000,
"consumption_rate": 60.0
},
"issues": {
"total": 25,
"completed": 18,
"completion_rate": 72.0
},
"confirmed_payment": 680000,
"budget_gap": -12.0
}
],
"total": 12,
"page": 1,
"per_page": 10
}更新頻度
| データ | 更新方式 |
|---|---|
| サマリーカード | 30秒ポーリング |
| プロジェクト一覧 | ページ遷移時 + 手動リフレッシュボタン |
| ステータス判定 | サーバーサイドで算出（リクエスト時） |