画面ワイヤーフレームと画面遷移図（Month 2 Week 6）

Week 5 で洗い出したユーザーストーリーを、Week 6 では 画面の絵 に落とします。いきなり React コードを書き始めるのではなく、紙 or Figma で画面ワイヤーを描くフェーズです。

ワイヤーフレームとは

「画面に何を載せるか」「何をどこに置くか」を低解像度で表現したものです。色・フォント・画像・アニメーションは考えません。

忠実度	例	使うタイミング
Low-Fi（ワイヤー）	ノートに手書き・四角形と線だけ	Week 6（本カリキュラムのここ）
Mid-Fi（モックアップ）	Figma で配置・色の下地のみ	実装後のデザイン調整
High-Fi（プロトタイプ）	Figma でインタラクション付き	本番公開前の UX 検証

Week 6 では Low-Fi で十分 です。目的はコードを書き始める前に「画面数」「画面遷移」「必要な入力フィールド」を確定させることで、後から戻り手戻りを減らすためです。

手書きから始める

Figma を開く前に、A4 用紙 1 枚に 1 画面 を鉛筆で書きます。10 分で 5 画面書けます。

書く内容

画面タイトル（例: 「投稿一覧」）
主要な要素（見出し・リスト・ボタン・入力欄）の位置
ボタンを押したときの遷移先（矢印で隣の紙へ）

書かない内容

色・フォント
完璧なレイアウト
ヘッダー・フッターの細かい内容（テンプレ化するので省略）

Why: 手書きは 30 秒で書き直せます。Figma で書くと「綺麗に作ろう」という引力で時間を吸われます。

Figma への転記（任意）

手書きで画面が固まったら、共有用に Figma に転記します。Figma は無料プランで十分使えます。

基本の使い方

https://www.figma.com/ でアカウント作成
「Untitled」ファイルを開く
左上の Frame (F キー) で画面枠を作成（1440 × 900 がデフォ）
Rectangle (R キー) で四角、Text (T キー) で文字を置く
画面を複製（Cmd/Ctrl + D）して次画面のベースにする

画面遷移図

各画面をフレームで並べ、Prototype タブでボタンから次画面へ矢印を引きます。本カリキュラムではここまで作りこまなくて OK です。

画面遷移図（Mermaid で書く）

Figma を使わず、コードで画面遷移を表現する方法もあります。Markdown に貼れるので PR レビューしやすい利点があります。

```mermaid
flowchart LR
  Login[ログイン画面] -->|成功| Feed[投稿一覧]
  Feed --> Detail[投稿詳細]
  Feed --> New[投稿作成]
  New -->|投稿| Feed
  Detail --> Profile[ユーザープロフィール]
```

GitHub の Markdown プレビューは Mermaid を自動レンダリングします。

画面 1 枚を設計するときに考えること

各画面について、以下 5 点を紙に書きます。

目的: この画面でユーザーが達成したいことを 1 文で
入口: どの画面からこの画面に来るか（1 つ以上）
出口: この画面から行ける画面（0 個以上）
必要なデータ: API からどのレスポンスを受ける必要があるか
エラー時の挙動: API が 4xx/5xx を返したら何を見せるか

5 番を忘れると、実装後に必ず詰まります。Week 6 で言語化しておくと Month 3 の実装が速くなります。

よくある画面テンプレート

SNS clone や木下さんの自前アプリで頻出する画面パターンです。

一覧画面（フィード型）

┌────────────────────┐
│ [ヘッダー]           │
├────────────────────┤
│ ┌──────────────┐  │
│ │ 投稿カード 1  │  │
│ └──────────────┘  │
│ ┌──────────────┐  │
│ │ 投稿カード 2  │  │
│ └──────────────┘  │
│ ...                │
│ [もっと見る]         │
└────────────────────┘

詳細画面

┌────────────────────┐
│ [← 戻る]  [編集]    │
├────────────────────┤
│ 投稿タイトル/本文    │
│                    │
│ 投稿者・日時         │
├────────────────────┤
│ コメント 1           │
│ コメント 2           │
│ [コメント入力欄]      │
└────────────────────┘

フォーム画面

┌────────────────────┐
│ 新規投稿             │
├────────────────────┤
│ タイトル: [        ] │
│ 本文: ┌──────────┐ │
│       │          │ │
│       └──────────┘ │
│                    │
│      [キャンセル] [保存] │
└────────────────────┘

Week 6 のアウトプット

☐ 手書きワイヤーが MVP の全画面分ある（通常 3〜6 枚）
☐ 画面遷移図が 1 枚にまとまっている（Mermaid or Figma）
☐ 各画面について「目的・入口・出口・必要データ・エラー時挙動」が書けている
☐ デザイナ不在のプロジェクトでもレビュー可能な粒度（手書きレベルで OK）

よくある失敗

細部に時間をかけすぎる: Week 6 の目的は「どんな画面が必要か」を確定させること。色・フォント・完璧な配置は Week 9 以降の実装で整えます
画面数が多すぎる: MVP に 10 画面以上あるなら、Week 5 の MoSCoW に戻って削ります
一覧と検索を混ぜる: 検索は専用画面ではなく、一覧画面の上部に検索バーを置く方がシンプル。Nice-to-have にする検討も

参考

Figma 公式: https://www.figma.com/ja/
Mermaid 公式（GitHub が対応）: https://mermaid.js.org/
Balsamiq（Low-Fi ワイヤー専用ツール・有料）: https://balsamiq.com/
前のステップ: b05-requirements-elicitation（要求ヒアリング）
次のステップ: b07-er-diagram（ER 図）→ b07b-api-spec（API 仕様）

生きているコード

本ドキュメントで扱ったパターンの完全な動作コードは、メンター側リポジトリの参照ブランチで確認できます。

対応 Week: W6
参照ブランチ:
W6: reference/week-6
対応 checklist 項目: （直接対応なし）

ブランチの作り方・見方は b00-curriculum-map を参照してください。