Skip to content

ユーザーフロー図

概要

業務委託エンジニアがIssueマーケットプレイスを利用する際の基本フローを定義する。 ログインからIssue発見、着手、開発、納品、報酬確定までの一連の流れを示す。


メインフロー

mermaid
flowchart TD
    A[ログイン] --> B[マーケットプレイス画面]
    B --> C{Issue検索・フィルタ}
    C --> |条件変更| C
    C --> |Issueを選択| D[Issue詳細画面]
    D --> E{着手する?}
    E --> |いいえ| B
    E --> |はい| F[着手確認モーダル]
    F --> G{確認チェック完了?}
    G --> |いいえ| F
    G --> |はい| H[Issue着手確定]
    H --> I[AI開発開始<br/>Claude Code活用]
    I --> J[MR作成・提出]
    J --> K[レビュー待ち]
    K --> L{レビュー結果}
    L --> |承認| N[報酬確定]
    L --> |FB(修正依頼)| M[FB対応・修正]
    M --> J
    N --> O[マイページで<br/>報酬確認]
    O --> B

詳細フロー: ログイン

mermaid
flowchart TD
    A[トップページアクセス] --> B{ログイン済み?}
    B --> |はい| C[マーケットプレイス画面]
    B --> |いいえ| D[ログイン画面]
    D --> E[GitLabアカウントで<br/>OAuth認証]
    E --> F{認証成功?}
    F --> |はい| G{初回ログイン?}
    F --> |いいえ| H[エラー表示]
    H --> D
    G --> |はい| I[プロフィール初期設定<br/>スキル登録]
    G --> |いいえ| C
    I --> C

詳細フロー: Issue着手〜開発

mermaid
flowchart TD
    A[Issue着手確定] --> B[GitLabでIssueアサイン<br/>ステータス: 開発中]
    B --> C[作業ブランチ確認<br/>リポジトリクローン]
    C --> D[Claude Codeで<br/>AI開発開始]
    D --> E{開発完了?}
    E --> |不明点あり| F[Issueコメントで<br/>質問]
    F --> G[回答待ち]
    G --> D
    E --> |完了| H[ローカルテスト実施]
    H --> I{テスト合格?}
    I --> |いいえ| D
    I --> |はい| J[MR作成]
    J --> K[報告資料テンプレート記入]
    K --> L[MR提出<br/>ステータス: MR提出]

詳細フロー: レビュー〜報酬確定

mermaid
flowchart TD
    A[MR提出] --> B[レビュアーによる<br/>コードレビュー]
    B --> C{レビュー結果}
    C --> |承認| D[MRマージ]
    C --> |修正依頼| E[FBコメント確認<br/>ステータス: FB対応]
    E --> F[修正作業]
    F --> G[修正コミット・プッシュ]
    G --> H[再レビュー依頼]
    H --> B
    D --> I[Issue完了<br/>ステータス: 完了]
    I --> J[報酬確定<br/>マイページに反映]
    J --> K[月末締め<br/>請求処理]

状態遷移図

mermaid
stateDiagram-v2
    [*] --> 未着手: Issue作成
    未着手 --> 開発中: エンジニアが着手
    開発中 --> MR提出: MR作成
    MR提出 --> FB対応: 修正依頼
    MR提出 --> 完了: 承認・マージ
    FB対応 --> MR提出: 修正完了・再提出
    開発中 --> 未着手: 着手キャンセル(例外)
    完了 --> [*]: 報酬確定

画面遷移図

mermaid
flowchart LR
    Login[ログイン画面] --> MP[マーケットプレイス]
    MP --> Detail[Issue詳細]
    MP --> MyPage[マイページ]
    Detail --> MP
    Detail --> |着手後| MyPage
    MyPage --> MP
    MyPage --> Detail
    MyPage --> Profile[プロフィール編集]
    Profile --> MyPage

ユーザーアクション一覧

#画面アクション遷移先/結果
1ログインGitLab OAuth認証マーケットプレイス画面
2マーケットプレイスフィルタ変更一覧の絞り込み更新
3マーケットプレイスソート変更一覧の並び順更新
4マーケットプレイス「詳細を見る」押下Issue詳細画面
5Issue詳細「戻る」押下マーケットプレイス画面
6Issue詳細「着手する」押下着手確認モーダル表示
7着手確認モーダルチェック + 着手確定Issue着手、マイページへ遷移
8マイページ担当Issue「詳細」Issue詳細画面(作業状態)
9マイページプロフィール編集プロフィール編集画面
10マイページ「もっと見る」完了済み履歴の全件表示