プロトタイプ作成（前半）〜主要画面のモックアップ
概要
- 日程: Day 10 / セッション 2
- 時間: 09:55-11:00（65分）
- 形式: 実習（ハンズオン実習、AIサポートあり）
- ゴール:
- 行動: 選定したモックアップツールで、画面一覧の主要画面のモックアップを作成できる
- 条件: 画面仕様書（Day6）と突き合わせながら、AIにレイアウト案を相談しつつ
- 基準: 65分以内に、主要画面（最低5画面）のモックアップが作成され、画面仕様書の入力項目・ボタンが反映されている
- 学習形式: AI協働型（ハンズオン実習）
導入（5分）
前のセッションでツールを選びました。いよいよプロトタイプの枠組みを作ります。
ここでよくある失敗は、いきなり1画面目を100%完成させようとすること。色を選び、フォントを選び、アイコンを選ぶ。気がつくと60分経って、まだ1画面しかありません。
これを避ける合言葉。
「全画面の枠を先に揃える、中身は後で埋める」
料理にたとえれば、メインディッシュだけ豪華に作って前菜とデザートが間に合わない、という事態を防ぐイメージです。65分という時間の中で、全画面の骨組みを最低限見せることを優先しましょう。
本編（10分）
1. ローファイとハイファイ
プロトタイプの完成度には2段階あります。
| 段階 | 特徴 | この時間で目指すべきか |
|---|---|---|
| ローファイ | 白黒、四角と線、文字だけ。素早く作れて捨てやすい | このセッションのターゲット |
| ハイファイ | 色・画像・実データ。本物に近い | Day10では不要、必要なら実装スプリント中に |
ここがポイント
本セッションの目的は遷移と画面構成の検証。ハイファイは目的を超えています。色や画像で悩み始めたら一旦止める。検証目的を思い出しましょう。
2. 作成の順序〜枠→配置→中身
各画面は以下の順で作ります。
全画面を①まで進めてから、②に進む。これが鉄則です。1画面ずつ完成させると、見落としが出ます。
3. 画面仕様書との突き合わせ
各画面は、Day6で作った画面仕様書と1対1で対応します。次のチェックリストで突き合わせましょう。
| チェック項目 | 確認の観点 |
|---|---|
| 画面名が画面仕様書と一致しているか | タイトル文字を比較 |
| 入力項目がすべて配置されているか | 仕様書の入力項目数と画面の入力欄数を比較 |
| ボタンがすべて配置されているか | 仕様書のボタン一覧と画面のボタンを比較 |
| 表示項目がすべて配置されているか | 仕様書の表示項目を画面で確認 |
| 遷移先（ボタン押下後の画面）が決まっているか | 仕様書の遷移先と画面遷移図を確認 |
コラム
設計書と実装がずれる現象をドキュメントドリフトと呼びます。最も多い原因は「実装中に思いついた変更を、設計書に書き戻さない」こと。プロトタイプ段階でも同じ現象が起こります。本研修のルール「合意した内容に変更が生じる場合には事前に報告して調整する」を、ここでも徹底しましょう。プロトタイプの段階で気付いた設計の不備は、外部設計書まで遡って直すのが鉄則です。
4. 役割分担とトーン統一
5人チームなら、画面を分担して並行作業します。
並行作業した後、**最後の5分で「トーン揃え」**をします。
- フォントサイズの統一
- 余白の統一
- ボタンの形・色の統一
これをしないと、いざ繋いだ時に「画面ごとに別のアプリに見える」という残念な結果になります。
ここがポイント
「共通部品」担当を1人置くと、ヘッダ・フッタ・ボタンの統一が一気に進みます。これがあるとないとで、見た目の品質が大きく変わります。
5. AIの上手な使い方
AIにモックアップを「作らせる」のではなく、「相談する」のがコツです。
| ダメな使い方 | 良い使い方 |
|---|---|
| 「予約画面のデザインを作って」 | 「予約画面に必要なUI要素を10個挙げてください」 |
| 「figmaのコードを書いて」 | 「ログイン画面の典型的なレイアウトを言葉で説明してください」 |
| 「いい感じにして」 | 「入力欄が5つある画面で、ユーザが迷わない配置の原則を教えてください」 |
AIは観点を提供する道具として使い、判断と実作業はチームで行います。
実習・演習（45分）
課題
選定したモックアップツールで、画面一覧の主要画面（最低5画面）のモックアップを作成する。
進め方の目安タイムテーブル
| 時間 | やること |
|---|---|
| 0-5分 | 画面一覧から「今日作る画面」を選ぶ（主要5〜8画面） |
| 5-15分 | 全画面の「枠＋画面名」だけを先に作る |
| 15-30分 | 大まかな配置（ヘッダ・本体・フッタ）を入れる |
| 30-40分 | UI要素（ボタン・入力欄・表示エリア）を配置 |
| 40-45分 | 画面仕様書と突き合わせ、漏れチェック |
成果物
- 最低5画面のモックアップ（ローファイで可）
- 各画面が画面仕様書の入力項目・ボタンを反映している
- 共通要素（ヘッダ・フッタ等）が全画面で揃っている
- 進捗ボードに「完成した画面」が見える化されている
ヒント
- 作り込まない。色は白黒、画像はグレーの四角でOK
- 共通部品から作ると、後の作業が速い
- **画面ID（S001, S002…）**をモックアップにも書いておくと、画面遷移図と対応がつく
- 「作る画面が多すぎる」場合は、主要画面（CJM上で最重要）を優先する
- 役割分担した後、15分ごとに進捗を共有する（ミニ朝会）
AIへの問いかけ例
- 「ECサイトの『カート画面』に必要なUI要素を、漏れなく列挙してください」
- 「ローファイプロトタイプで、ボタンの大きさはどのくらいが目安ですか？」
- 「私たちの画面仕様書を見せます。この画面の典型的なレイアウトパターンを3つ提案してください」
- 「複数画面を並行作業するときに、トーンを揃えるコツは何ですか？」
進捗の見える化
物理的な壁またはオンラインボードに、画面の進捗を貼り出します。
まとめ（5分）
このセッションでは、選定したツールで主要画面のモックアップを作りました。
- 全画面の枠を先に揃える
- 作り込まずローファイで
- 共通部品担当を1人置く
- 画面仕様書と突き合わせて漏れチェック
- AIには相談する（作らせない）
次のセッション（後半）では、これらの画面を画面遷移図の通りに繋ぎ、他チームに見せてレビューをもらいます。遷移が繋がる瞬間こそが、プロトタイプの醍醐味です。
🔄 振り返りチェック
以下の問いに答えられるか確認してみましょう。
- ローファイとハイファイの違いは何ですか？このセッションで目指したのはどちらですか？
- 全画面の枠を先に作る理由は何ですか？
- 並行作業した画面のトーンを揃えるには、誰が・何をすれば良いですか？
答えに自信がない場合は、該当部分を読み返すか、AIに質問してみてください。
補足資料
- 関連用語: UIキット、デザインシステム、コンポーネント
- 発展課題: 共通部品（ボタン・入力欄・ヘッダ）を「コンポーネント」として再利用可能な形に分けてみる
- 参考: 次セッションで画面遷移を繋ぎ、相互レビューを実施します
学習ガイド
想定される質問と回答例
| 質問 | ヒント |
|---|---|
| デザイン経験がないメンバーが多くて不安です | ローファイならデザインスキルは不要です。「四角と線と文字」だけで作れます。むしろ凝ったデザインは禁物 |
| 1画面に時間がかかりすぎて他が進みません | タイマーをかける。1画面15分以内と決めて、超えたら次に進む。完璧主義は時間を奪います |
| 画面仕様書の項目が画面に入りきりません | 設計の見直しサイン。本当に全項目が1画面に必要か？タブやアコーディオンで分割できないか？画面仕様書を更新します |
| AIに「いい感じのレイアウト」を聞いても抽象的な答えしか返ってきません | 抽象的な質問には抽象的な答えが返ります。「入力欄5つ＋ボタン2つの画面の配置原則を、4パターン具体例で教えて」のように、具体度を上げる |
| 共通部品担当の人が他の画面を作れません | それで良いです。共通部品は全画面に効く投資。1人がそこに集中してくれることで、他全員の品質が上がります |
つまずきやすいポイント
| つまずきポイント | ヒント |
|---|---|
| 1画面目を完璧に作ろうとして時間切れ | タイマーをかけて強制的に次へ進む。完成度より枚数を優先 |
| ツールの操作に時間を取られる | 最低限の操作だけ覚えて始める。詳しい機能は必要になったら調べる |
| 画面遷移図にない画面を勝手に追加 | 設計から外れている。チームに相談して、必要なら遷移図を更新してから追加 |
| 色やフォントで迷う | このセッションでは白黒固定でOK。デザインの作り込みは後回し |
| 作ったモックアップを共有しない | 完成のたびに共有ボードに貼る。「他人の進捗が見える」とチームが動く |