画面設計
受注者（主婦層）向けPWAの画面構成・遷移・ワイヤーフレームを定義する。
設計方針
| 方針 | 決定事項 | 理由 |
|---|---|---|
| タブ構成 | 3タブ（タスク・履歴・マイページ） | 主婦層が迷わない最小構成 |
| 通知 | プッシュ通知 + 一覧 | タスクの即時性を確保 |
| 一覧形式 | カードリスト（縦スクロール） | デザインシステムのリスト項目パターンを活用 |
| 作業中導線 | アプリ起動時に作業中画面へ直行 | 1タスク集中型。受諾済みタスクがあれば一覧をスキップ |
画面一覧
認証・オンボーディング
| # | 画面 | 種別 | 概要 |
|---|---|---|---|
| A1 | ログイン | 全画面 | 電話番号 or ソーシャルログイン |
| A2 | オンボーディング① 利用規約 | 全画面 | 利用規約の同意（ステップ 1/3） |
| A3 | オンボーディング② プロフィール | 全画面 | 名前・アイコン写真の設定（ステップ 2/3） |
| A4 | オンボーディング③ 位置情報 | 全画面 | 位置情報許可のリクエスト（ステップ 3/3） |
メイン（タブ画面）
| # | 画面 | タブ | 概要 |
|---|---|---|---|
| B1 | タスク一覧 | タスク | 受注可能なタスクのカードリスト |
| B2 | 報酬・履歴 | 履歴 | 完了タスクと報酬の一覧 |
| B3 | マイページ | マイページ | プロフィール編集・設定・ログアウト |
タスクフロー
| # | 画面 | 種別 | 概要 |
|---|---|---|---|
| C1 | タスク詳細 | スタック遷移 | タスク内容・報酬・場所・期限の詳細 |
| C2 | 受諾確認 | ボトムシート | 「このタスクを受けますか？」の確認 |
| C3 | 作業中 | 全画面 | 現在のタスクの状態表示・完了報告ボタン |
| C4 | 完了報告 | スタック遷移 | 写真アップロード・コメント入力 |
| C5 | 完了 | 全画面 | サクセス画面（報酬額の表示） |
画面遷移図
[アプリ起動] │ ├─ 未認証 ──→ [A1 ログイン] │ │ │ ├─ 初回 ──→ [A2 利用規約] → [A3 プロフィール] → [A4 位置情報] │ │ │ │ │ ▼ │ └─ 既存ユーザー ─┐ [B1 タスク一覧] │ │ ├─ 認証済み + 作業中タスクあり ──→ [C3 作業中] │ └─ 認証済み + 作業中タスクなし ──→ [B1 タスク一覧]
━━━ メイン画面（ボトムタブで切り替え） ━━━
[B1 タスク一覧] ←──タブ──→ [B2 報酬・履歴] ←──タブ──→ [B3 マイページ]
━━━ タスクフロー ━━━
[B1 タスク一覧] │ カードタップ ▼[C1 タスク詳細] │ 「受ける」ボタン ▼[C2 受諾確認] (ボトムシート) │ 「受諾する」 ▼[C3 作業中] │ 「完了報告」ボタン ▼[C4 完了報告] │ 「送信」ボタン ▼[C5 完了画面] │ 自動 or タップ ▼[B1 タスク一覧]ボトムタブ
| 位置 | ラベル | アイコン（Lucide） | 遷移先 |
|---|---|---|---|
| 左 | タスク | ClipboardList | B1 タスク一覧 |
| 中央 | 履歴 | Clock | B2 報酬・履歴 |
| 右 | マイページ | User | B3 マイページ |
作業中タスクがある場合、タスクタブのアイコンにドットバッジを表示する。
各画面の詳細
A1 ログイン
┌─────────────────────────┐│ ││ [ロゴ・アイコン] ││ ││ 「tanomu」へようこそ ││ ││ ┌─────────────────────┐││ │ 電話番号を入力 │││ └─────────────────────┘││ ││ [ SMSで認証する ] ││ ││ ─── または ─── ││ ││ [ Googleでログイン ] ││ [ LINEでログイン ] ││ │└─────────────────────────┘- 背景:
bg-white全画面 - ロゴ: 画面上部1/3に配置
- ボタン: プライマリボタンパターン
A2–A4 オンボーディング
┌─────────────────────────┐│ ← 戻る ││ ││ ● ─── ○ ─── ○ ││ 規約 プロフ 位置 ││ ││ ┌─────────────────────┐││ │ │││ │ (ステップ内容) │││ │ │││ └─────────────────────┘││ ││ [ 次へ ] ││ │└─────────────────────────┘- ステップインジケーター: デザインシステムのステップインジケーターパターン
- 各ステップの内容:
- A2: 利用規約テキスト + 同意チェックボックス
- A3: 名前入力 + アイコン写真アップロード
- A4: 位置情報の説明イラスト + 「許可する」ボタン
B1 タスク一覧
┌─────────────────────────┐│ [トップナビ] タスク │├─────────────────────────┤│ ││ ┌─────────────────────┐││ │ 🛒 スーパーで買い物 │││ │ 渋谷区 · ¥800 │││ │ 期限: 本日 18:00 >│││ └─────────────────────┘││ ┌─────────────────────┐││ │ 📷 店舗の写真撮影 │││ │ 新宿区 · ¥500 │││ │ 期限: 明日 12:00 >│││ └─────────────────────┘││ ┌─────────────────────┐││ │ 📦 商品の発送 │││ │ 品川区 · ¥600 │││ │ 期限: 明日 17:00 >│││ └─────────────────────┘││ │├─────────────────────────┤│ [タスク] [履歴] [マイ] │└─────────────────────────┘- レイアウト: デザインシステムのレイアウト基本構造
- カード: リスト項目パターン（アイコン + タイトル + 説明 + 矢印）
- 一覧が空の場合: 「近くにタスクはありません」+ イラスト
C1 タスク詳細
┌─────────────────────────┐│ ← 戻る タスク詳細 │├─────────────────────────┤│ ││ スーパーで買い物 ││ 報酬: ¥800 ││ ││ ┌─────────────────────┐││ │ 📍 場所 │││ │ 渋谷区○○ スーパー△△ │││ └─────────────────────┘││ ┌─────────────────────┐││ │ 📋 内容 │││ │ 牛乳1本、卵1パック │││ │ を購入して配達先へ │││ └─────────────────────┘││ ┌─────────────────────┐││ │ ⏰ 期限 │││ │ 本日 18:00 まで │││ └─────────────────────┘││ ││ [ このタスクを受ける ] ││ │└─────────────────────────┘- 「受ける」ボタンタップでC2ボトムシートを表示
C2 受諾確認（ボトムシート）
┌───────────────┐ │ ── (ハンドル) │ │ │ │ タスクを受けま │ │ すか？ │ │ │ │ スーパーで買い物│ │ 報酬: ¥800 │ │ │ │ [ 受諾する ] │ │ [ キャンセル ] │ └───────────────┘- デザインシステムのボトムシートパターン
- オーバーレイ:
bg-black/40
C3 作業中
┌─────────────────────────┐│ [トップナビ] 作業中 │├─────────────────────────┤│ ││ スーパーで買い物 ││ 報酬: ¥800 ││ ││ ┌─────────────────────┐││ │ ステータス │││ │ ● 受諾 → ● 作業中 │││ │ → ○ 完了報告 │││ └─────────────────────┘││ ││ ┌─────────────────────┐││ │ 📋 やること │││ │ □ 牛乳1本を購入 │││ │ □ 卵1パックを購入 │││ │ □ 配達先へ届ける │││ └─────────────────────┘││ ││ [ 完了報告をする ] ││ [ タスクを辞退する ] ││ │└─────────────────────────┘- アプリ起動時、受諾済みタスクがあればこの画面に直行
- ボトムタブは非表示（タスクに集中させる）
- 辞退ボタン: セカンダリボタン + 確認ダイアログ
C4 完了報告
┌─────────────────────────┐│ ← 戻る 完了報告 │├─────────────────────────┤│ ││ 作業の証拠写真 ││ ┌─────────────────────┐││ │ [+] 写真を追加 │││ │ │││ └─────────────────────┘││ ││ コメント（任意） ││ ┌─────────────────────┐││ │ │││ └─────────────────────┘││ ││ [ 報告を送信する ] ││ │└─────────────────────────┘C5 完了画面
┌─────────────────────────┐│ ││ bg-primary-500 全画面 ││ ││ ✓（大） ││ ││ タスク完了！ ││ ││ おつかれさまでした！ ││ ││ ┌─────────────────────┐││ │ 報酬: ¥800 │││ │ bg-white/20 │││ └─────────────────────┘││ ││ [ タスク一覧に戻る ] ││ │└─────────────────────────┘- デザインシステムの完了画面パターンを適用
B2 報酬・履歴
┌─────────────────────────┐│ [トップナビ] 履歴 │├─────────────────────────┤│ ││ 今月の報酬: ¥4,200 ││ ││ ── 2026年2月 ── ││ ┌─────────────────────┐││ │ ✓ スーパーで買い物 │││ │ 2/24 · ¥800 │││ └─────────────────────┘││ ┌─────────────────────┐││ │ ✓ 店舗の写真撮影 │││ │ 2/22 · ¥500 │││ └─────────────────────┘││ │├─────────────────────────┤│ [タスク] [履歴] [マイ] │└─────────────────────────┘B3 マイページ
┌─────────────────────────┐│ [トップナビ] マイページ │├─────────────────────────┤│ ││ [アイコン写真] ││ 田中 花子 ││ ││ ┌─────────────────────┐││ │ 📝 プロフィール編集 >│││ └─────────────────────┘││ ┌─────────────────────┐││ │ 📍 位置情報の設定 >│││ └─────────────────────┘││ ┌─────────────────────┐││ │ 🔔 通知設定 >│││ └─────────────────────┘││ ┌─────────────────────┐││ │ 📄 利用規約 >│││ └─────────────────────┘││ ┌─────────────────────┐││ │ 🚪 ログアウト >│││ └─────────────────────┘││ │├─────────────────────────┤│ [タスク] [履歴] [マイ] │└─────────────────────────┘状態遷移のルール
| 条件 | アプリ起動時の遷移先 |
|---|---|
| 未認証 | A1 ログイン |
| 認証済み・初回利用 | A2 オンボーディング① |
| 認証済み・作業中タスクあり | C3 作業中 |
| 認証済み・作業中タスクなし | B1 タスク一覧 |
プッシュ通知
| トリガー | 通知内容 | タップ時の遷移先 |
|---|---|---|
| 新しいマッチングタスク | 「近くに新しいタスクがあります」 | C1 タスク詳細 |
| タスク期限が近い | 「タスクの期限が1時間後です」 | C3 作業中 |
| 完了報告が承認された | 「報酬 ¥800 が確定しました」 | B2 報酬・履歴 |
関連ドキュメント
- 001 プロダクトビジョン — ターゲットユーザー・ブランディング方針
- 002 タスク設計 — タスクの流れ・マッチングロジック
- 003 デザインシステム — カラー・タイポ・コンポーネントパターン