プロトタイプ作成（前半）〜主要画面のモックアップ

• 日程: Day 10 / セッション 2
• 時間: 9:55-11:00
• 形式: 実習
• ゴール: 選定したモックアップツールで、画面一覧の主要画面のモックアップを時間内に作成できる
• 学習形式: ハンズオン実習（AIサポートあり）

前のセッションで、プロトタイプの目的（早く・安く認識合わせと検証）とツールを学びました。
ここからは手を動かす時間です。

このセッションのゴールはシンプルです。
画面一覧にある主要画面を、全部「形」にすること。

ここで1つ問いかけです。
「1画面を完璧に仕上げる」のと「全画面を雑にそろえる」、プロトタイプではどちらが正解でしょうか？

答えは後者です。
紙芝居に例えると、1枚目だけ油絵で2枚目以降が白紙の紙芝居は、物語を確かめられません。全ページがラフな下描きでそろっている方が、話の流れを検証できます。
プロトタイプの価値は1枚の美しさではなく、全体の流れにあります。

「見た目の作り込みは後回し。まず全画面の枠をそろえる」——これが今日の合言葉です。

おすすめの手順は「3周方式」です。

1. 1周目（枠だけ）: 画面一覧の主要画面すべてについて、画面名とおおまかな領域（ヘッダ・メニュー・本体）だけ描く
2. 2周目（部品を置く）: 画面仕様書を見ながら、入力項目・ボタン・一覧表などの部品を置く
3. 3周目（整える）: 時間が余ったら、ラベルの文言や並び順を整える

最初の1周で「全画面の枠」がそろうのがポイントです。
これなら時間切れになっても「全体の流れは検証できる」状態が残ります。
逆に1画面ずつ完成させていくと、時間切れ＝後半の画面がゼロ、になります。

「トップ画面の配色を15分悩む」は今日やることに該当しません。「予約登録画面に、画面仕様書にある入力項目が全部置いてあるか確かめる」は該当します。なぜなら、前者は実装後でも直せますが、後者の漏れは設計の欠陥であり、今日見つけるべきものだからです。

• 順番は「全画面の枠 → 部品 → 整え」。深さより広さを先に
• 各画面を描くときは必ず画面仕様書を横に置く。記憶で描くと項目が漏れる
• 画面仕様書にない項目が必要だと気づいたら、それは大発見。勝手に直さずチームに共有し、設計書を更新する（合意した内容の変更は事前に報告して調整）

ディズニーのアニメ制作には「ストーリーボード」という工程があります。本番の作画前に、ラフな絵を壁一面に貼って物語全体を確認するのです。1930年代に生まれたこの手法のルールは「最初から1枚を描き込まない」。物語の流れが固まる前に絵を磨いても、シーンごと没になるからです。90年前のアニメスタジオの知恵は、今日のみなさんの「まず全画面の枠から」とまったく同じです。

70分で主要画面をそろえるには分担が必須です。

• 画面単位で分担する（例: Aさんはログイン系、Bさんは登録系、Cさんは一覧・詳細系）
• ただし最初の5分で1画面だけ全員で作り、「枠の取り方・部品の描き方」の共通ルールを決める
• 共通部品（ヘッダ・メニュー）は1人が作って全員が流用する

最初の1画面をそろえずに分担すると、後で「Aさんの画面はスマホ縦、Bさんはパソコン横」のような悲劇が起きます。Day 5の状態遷移図演習で「1つをみんなで作ってから分担」したのと同じ進め方です。

• 分担前に「見本となる1画面」を全員で作る
• 画面サイズ（スマホ縦か、PC横か）はペルソナの利用シーンで決め、全員で統一する
• 10分ごとに進み具合を見せ合う。最後にまとめて合体、は危険

複数人で描いた画面の「トーンがバラバラ問題」は、プロの現場でも頻発します。これを防ぐためにプロが作るのが「デザインシステム」——色・部品・余白のルール集です。有名なものにGoogleのMaterial Designがあり、無料で公開されています。「ボタンの角は丸める？四角？」のような議論を毎回しなくて済むようにルール化する。みなさんの「最初の1画面を見本にする」は、ミニ・デザインシステムを作っているのと同じことです。

作業中、AIをデザインアシスタントとして使いましょう：

• 「予約一覧画面に置くべきUI部品を、この画面仕様書から提案して」
• 「Figmaで画面同士をリンクさせる手順を教えて」
• 「入力フォームの項目の並び順、一般的なセオリーはある？」
• 「この画面、ペルソナ（60代・スマホ操作が苦手）にとって分かりにくい点はある？」

選定したモックアップツールで、自チームの主要画面のモックアップを作成してください。

1. ツール最終決定と見本画面（10分）

   • モックアップツールを決定する（迷ったら紙かFigma。5分以内に決める）
   • 全員で1画面だけ作り、画面サイズ・枠の取り方・部品の描き方をそろえる
2. 主要画面の選定と分担（5分）

   • 画面一覧から主要画面を選ぶ（ペルソナの体験の本筋。目安5〜10画面）
   • 画面単位で担当を割り振る
3. モックアップ作成（35分）

   • 1周目: 全画面の枠（画面名＋大きな領域）
   • 2周目: 画面仕様書の項目・ボタンを配置
   • 10分ごとに互いの画面をチラ見してトーンのずれを早期発見
4. 画面仕様書との突き合わせ（5分）

   • 担当を交換し、他人の画面を画面仕様書と照合する
   • 項目漏れ・仕様書側の不備をメモする（設計書の更新はチーム合意のうえで）

• 主要画面のモックアップ一式（5〜10画面程度）

  • 全画面で画面サイズ・トーンが統一されている
  • 画面仕様書の入力項目・ボタンが反映されている
  • 画面仕様書との照合メモ（漏れ・気づき）

このモックアップは次のセッションで遷移をつなぎ、「動くプロトタイプ」に進化します。

• ツールの操作が分からないときは、AIに「Figmaでボタンを作るには？」のように操作レベルで質問すると速いです
• 紙を選んだチームは、1画面1枚で描き、画面名を右上に書いておくと次セッションの遷移つなぎが楽になります
• 凝りはじめた自分に気づくサイン: 「色を選んでいる」「フォントを変えている」「影をつけている」。気づいたら次の画面へ
• 描く項目に迷ったら画面仕様書が正。仕様書が間違っていそうなら、直す前にチームに報告
• 時間が半分過ぎた時点で枠がそろっていなければ、主要画面の数を減らす判断をしてください。減らす基準は「ペルソナの体験の本筋に必要か」
• エラーや操作で詰まったら、状況をそのままAIに伝えましょう。「Figmaでフレームが選択できなくなった」のように具体的に

今回学んだことを一言でまとめると、**「プロトタイプは広く浅く。全画面の枠をそろえてから深める」**です。

• 3周方式: 枠 → 部品 → 整え
• 分担の前に見本の1画面を全員で作る
• 画面仕様書と突き合わせて項目漏れを発見するのが、今日の「検証」

休憩のあと、次のセッションではこの画面たちを画面遷移図の通りにつなぎ、他チームに操作してもらう相互レビューを行います。あなたの画面は、初めて「他人の指」で試されます。

以下の問いに答えられるか確認してみましょう：

• 「1画面を完璧に」より「全画面を浅く」が先なのはなぜですか？
• 分担の前に全員で1画面を作る目的は何ですか？
• モックアップを描くとき、何を横に置いて照合しますか？
• 画面仕様書の不備に気づいたとき、やってはいけないことは何ですか？

答えに自信がない場合は、該当部分を読み返すか、AIに質問してみてください。

• 参考リンク: Figmaの公式チュートリアル「最初のデザインを作成する」、Material Design（Googleのデザインシステム）の概要ページ
• 発展課題: 自分が毎日使うアプリの画面を1つ、紙に描き写してみましょう。「部品の種類は意外と少ない」ことに気づくはずです

このセクションは、受講者が理解を深めることをサポートする参考情報です。