Issue マーケットプレイス画面設計
概要
業務委託エンジニアがIssueを探して着手するためのメイン画面。 フィルタ・ソート機能でIssueを絞り込み、カード形式で一覧表示する。
ワイヤーフレーム
+============================================================================+
| [Logo] Issue Marketplace [通知 🔔] [マイページ 👤] |
+============================================================================+
| |
| ┌─ フィルタバー ────────────────────────────────────────────────────────┐ |
| │ │ |
| │ 技術スタック 難易度 報酬レンジ プロジェクト │ |
| │ ┌──────────────┐ ┌─────────────┐ ┌─────────────┐ ┌───────────┐ │ |
| │ │ React ▼ │ │ すべて ▼ │ │ ¥0〜 ▼ │ │ すべて ▼ │ │ |
| │ └──────────────┘ └─────────────┘ └─────────────┘ └───────────┘ │ |
| │ │ |
| │ 選択中: [React ×] [Python ×] [Medium ×] [フィルタクリア] │ |
| └──────────────────────────────────────────────────────────────────────┘ |
| |
| ┌─ ソート・表示 ───────────────────────────────────────────────────────┐ |
| │ 並び順: (●)報酬額順 ( )新着順 ( )期限順 12件ヒット │ |
| └──────────────────────────────────────────────────────────────────────┘ |
| |
| ┌─ Issue カードグリッド ───────────────────────────────────────────────┐ |
| │ │ |
| │ ┌──────────────────────┐ ┌──────────────────────┐ │ |
| │ │ プロジェクト: AIEO │ │ プロジェクト: AIEO │ │ |
| │ │ │ │ │ │ |
| │ │ ログイン画面の │ │ API認証機能の │ │ |
| │ │ レスポンシブ対応 │ │ リファクタリング │ │ |
| │ │ │ │ │ │ |
| │ │ ¥30,000 │ │ ¥80,000 │ │ |
| │ │ │ │ │ │ |
| │ │ [Easy] ⏱ 3h │ │ [Hard] ⏱ 8h │ │ |
| │ │ │ │ │ │ |
| │ │ [React] [CSS] │ │ [Python] [FastAPI] │ │ |
| │ │ │ │ │ │ |
| │ │ 期限: 2026-04-05 │ │ 期限: 2026-04-10 │ │ |
| │ │ │ │ │ │ |
| │ │ [ 詳細を見る ] │ │ [ 詳細を見る ] │ │ |
| │ └──────────────────────┘ └──────────────────────┘ │ |
| │ │ |
| │ ┌──────────────────────┐ ┌──────────────────────┐ │ |
| │ │ プロジェクト: Portal │ │ プロジェクト: CMS │ │ |
| │ │ │ │ │ │ |
| │ │ ダッシュボード │ │ 記事検索機能の │ │ |
| │ │ グラフ表示改善 │ │ パフォーマンス改善 │ │ |
| │ │ │ │ │ │ |
| │ │ ¥50,000 │ │ ¥45,000 │ │ |
| │ │ │ │ │ │ |
| │ │ [Medium] ⏱ 5h │ │ [Medium] ⏱ 4h │ │ |
| │ │ │ │ │ │ |
| │ │ [Vue.js] [Chart.js] │ │ [TypeScript] [SQL] │ │ |
| │ │ │ │ │ │ |
| │ │ 期限: 2026-04-08 │ │ 期限: 2026-04-12 │ │ |
| │ │ │ │ │ │ |
| │ │ [ 詳細を見る ] │ │ [ 詳細を見る ] │ │ |
| │ └──────────────────────┘ └──────────────────────┘ │ |
| │ │ |
| └──────────────────────────────────────────────────────────────────────┘ |
| |
| ┌─ ページネーション ───────────────────────────────────────────────────┐ |
| │ [ < ] 1 2 3 ... 5 [ > ] │ |
| └──────────────────────────────────────────────────────────────────────┘ |
+============================================================================+空状態
+============================================================================+
| [Logo] Issue Marketplace [通知 🔔] [マイページ 👤] |
+============================================================================+
| |
| ┌─ フィルタバー ────────────────────────────────────────────────────────┐ |
| │ 技術スタック 難易度 報酬レンジ プロジェクト │ |
| │ ┌──────────────┐ ┌─────────────┐ ┌─────────────┐ ┌───────────┐ │ |
| │ │ Rust ▼ │ │ Hard ▼ │ │ ¥100,000〜▼ │ │ すべて ▼ │ │ |
| │ └──────────────┘ └─────────────┘ └─────────────┘ └───────────┘ │ |
| │ │ |
| │ 選択中: [Rust ×] [Hard ×] [¥100,000〜 ×] [フィルタクリア] │ |
| └──────────────────────────────────────────────────────────────────────┘ |
| |
| ┌──────────────────────────────────────────────┐ |
| │ │ |
| │ (検索アイコン) │ |
| │ │ |
| │ 条件に合うIssueがありません │ |
| │ │ |
| │ フィルタ条件を変更するか、 │ |
| │ 時間をおいて再度ご確認ください。 │ |
| │ │ |
| │ [ フィルタをクリア ] │ |
| │ │ |
| └──────────────────────────────────────────────┘ |
| |
+============================================================================+コンポーネント詳細
フィルタバー
| フィルタ項目 | 入力形式 | 選択肢例 |
|---|---|---|
| 技術スタック | マルチセレクト | React, Vue.js, Python, TypeScript, Go, Rust, etc. |
| 難易度 | 単一セレクト | すべて / Easy / Medium / Hard |
| 報酬レンジ | レンジ選択 | すべて / ~¥30,000 / ¥30,001~¥60,000 / ¥60,001~ |
| プロジェクト | 単一セレクト | すべて / AIEO / Portal / CMS / ... |
- 選択中のフィルタはチップ(タグ)形式で表示し、個別に解除可能
- 「フィルタクリア」ボタンで全条件をリセット
ソート
| ソート項目 | 説明 |
|---|---|
| 報酬額順 | 報酬額の高い順(デフォルト) |
| 新着順 | 作成日時の新しい順 |
| 期限順 | 期限の近い順 |
Issue カード
| 要素 | 表示仕様 |
|---|---|
| プロジェクト名 | カード上部にサブテキストで表示 |
| タイトル | 太字、最大2行で省略 |
| 報酬額 | 大きめフォント、アクセントカラーで強調表示 |
| 難易度バッジ | Easy=緑, Medium=黄, Hard=赤 のカラーバッジ |
| 見積工数 | 時計アイコン + 時間表示 |
| スキルタグ | 小さなチップ形式、最大3つ表示(超過時は+N) |
| 期限 | 期限が3日以内の場合は赤文字で警告表示 |
| 詳細ボタン | カード下部に配置、クリックでIssue詳細画面へ遷移 |
ページネーション
- 1ページあたり12件表示
- 前後ページ移動ボタン + ページ番号リンク
レスポンシブ対応
| 画面幅 | カード列数 | 備考 |
|---|---|---|
| 1200px以上 | 3列 | デスクトップ |
| 768px〜1199px | 2列 | タブレット |
| 〜767px | 1列 | モバイル、フィルタは折りたたみ |