Issue 詳細画面設計
概要
マーケットプレイス画面から選択したIssueの詳細情報を確認し、着手を決定する画面。 報酬額・要件・注意事項を十分に確認した上で着手ボタンを押す導線を設計する。
ワイヤーフレーム
+============================================================================+
| [Logo] Issue Marketplace [通知 🔔] [マイページ 👤] |
+============================================================================+
| |
| [ < マーケットプレイスに戻る ] |
| |
| ┌─ Issue ヘッダー ─────────────────────────────────────────────────────┐ |
| │ │ |
| │ プロジェクト: AIEO │ |
| │ │ |
| │ ログイン画面のレスポンシブ対応 │ |
| │ │ |
| │ ┌────────────┐ ┌────────┐ ┌──────────┐ ┌──────────────┐ │ |
| │ │ ¥30,000 │ │ Easy │ │ ⏱ 3時間 │ │ 期限:4/05 │ │ |
| │ │ (税込) │ │ (緑) │ │ 見積工数 │ │ │ │ |
| │ └────────────┘ └────────┘ └──────────┘ └──────────────┘ │ |
| │ │ |
| │ スキル: [React] [CSS] [レスポンシブ] │ |
| │ │ |
| └──────────────────────────────────────────────────────────────────────┘ |
| |
| ┌─ Issue 説明 ─────────────────────────────────────────────────────────┐ |
| │ │ |
| │ ## 背景 │ |
| │ 現在のログイン画面はデスクトップのみ対応しており、 │ |
| │ モバイル端末からのアクセス時にレイアウトが崩れている。 │ |
| │ │ |
| │ ## 要件 │ |
| │ - ブレイクポイント: 768px, 1024px │ |
| │ - モバイルファーストで実装 │ |
| │ - 既存のデザインシステムに準拠 │ |
| │ - Figmaデザイン: [リンク] │ |
| │ │ |
| │ ## 受け入れ条件 │ |
| │ - [ ] 全ブレイクポイントでレイアウト崩れなし │ |
| │ - [ ] Lighthouseモバイルスコア90以上 │ |
| │ - [ ] 既存テストが全てパス │ |
| │ │ |
| └──────────────────────────────────────────────────────────────────────┘ |
| |
| ┌─ プロジェクト情報 ───────────────────────────────────────────────────┐ |
| │ │ |
| │ プロジェクト名: AIEO │ |
| │ リポジトリ: gitlab.example.com/aieo/frontend │ |
| │ ベースブランチ: develop │ |
| │ 作業ブランチ: feature/issue-123-responsive-login │ |
| │ 関連ドキュメント: [設計書リンク] [Figmaリンク] │ |
| │ │ |
| └──────────────────────────────────────────────────────────────────────┘ |
| |
| ┌─ 関連Issue ──────────────────────────────────────────────────────────┐ |
| │ │ |
| │ ブロック中: #120 デザインシステム更新 (完了済み) │ |
| │ 関連: #125 全画面レスポンシブ対応 │ |
| │ │ |
| └──────────────────────────────────────────────────────────────────────┘ |
| |
| ┌─ 注意事項 ───────────────────────────────────────────────────────────┐ |
| │ │ |
| │ ⚠ 着手前に必ずご確認ください │ |
| │ │ |
| │ 1. MR提出時に報告資料テンプレートの記入が必須です │ |
| │ → [報告資料テンプレート] │ |
| │ │ |
| │ 2. 期限を厳守してください │ |
| │ 期限超過の場合、報酬が減額される場合があります │ |
| │ │ |
| │ 3. AI(Claude Code)を活用した開発を推奨します │ |
| │ │ |
| │ 4. 不明点はIssueコメントで質問してください │ |
| │ (Slackでの個別連絡はお控えください) │ |
| │ │ |
| │ 5. 着手後のキャンセルは原則不可です │ |
| │ やむを得ない場合は早めにご連絡ください │ |
| │ │ |
| └──────────────────────────────────────────────────────────────────────┘ |
| |
| ┌──────────────────────────────────────────────────────────────────────┐ |
| │ │ |
| │ ┌──────────────────────────────────┐ │ |
| │ │ │ │ |
| │ │ このIssueに着手する │ │ |
| │ │ │ │ |
| │ │ ¥30,000 / 3時間 │ │ |
| │ │ │ │ |
| │ └──────────────────────────────────┘ │ |
| │ │ |
| │ ※ 着手すると他のエンジニアはこのIssueに着手できなくなります │ |
| │ │ |
| └──────────────────────────────────────────────────────────────────────┘ |
| |
+============================================================================+着手済み状態
着手済みのIssueを他のエンジニアが閲覧した場合の表示:
┌──────────────────────────────────────────────────────────────────────┐
│ │
│ ┌──────────────────────────────────┐ │
│ │ │ │
│ │ このIssueは着手済みです │ │
│ │ │ │
│ │ (対応中のエンジニアあり) │ │
│ │ │ │
│ └──────────────────────────────────┘ │
│ │
│ [ マーケットプレイスで他のIssueを探す ] │
│ │
└──────────────────────────────────────────────────────────────────────┘着手確認モーダル
着手ボタン押下時に確認モーダルを表示:
┌──────────────────────────────────────────┐
│ │
│ 着手確認 │
│ │
│ 以下のIssueに着手しますか? │
│ │
│ タイトル: ログイン画面のレスポンシブ対応 │
│ 報酬額: ¥30,000 │
│ 期限: 2026-04-05 │
│ │
│ ☑ 注意事項を確認しました │
│ ☑ 期限内に完了できます │
│ │
│ [ キャンセル ] [ 着手する ] │
│ │
└──────────────────────────────────────────┘コンポーネント詳細
Issue ヘッダー
| 要素 | 表示仕様 |
|---|---|
| プロジェクト | サブテキスト表示 |
| タイトル | h1相当、太字 |
| 報酬額 | 最大サイズ、アクセントカラー、税込表記 |
| 難易度バッジ | Easy=緑, Medium=黄, Hard=赤 |
| 見積工数 | 時計アイコン付き |
| 期限 | カレンダーアイコン付き、3日以内は赤文字 |
| スキルタグ | チップ形式で全て表示 |
着手ボタン
| 状態 | 表示 |
|---|---|
| 未着手 | 大きなプライマリボタン「このIssueに着手する」 |
| 着手済み | グレーアウト「このIssueは着手済みです」 |
| 自分が着手 | 「作業中 - マイページで進捗を管理」リンク表示 |
注意事項セクション
- 黄色背景の警告ボックスで目立たせる
- 着手確認モーダルでチェックボックスの確認を必須とする