（演習）モックアップツールで試作品作成

• 日程: Day 2 / セッション9
• 時間: 15:20-16:30
• 形式: 演習
• ゴール: プレゼンテーション一覧をもとに、モックアップツールで画面遷移が分かる試作品を1つ作成できる
• 学習形式: ハンズオン実習（AIサポートあり）

🗣️ 要約

• 頭の中の画面イメージは、言葉より実際に画面を並べたほうが一瞬で伝わる
• セッション4で抽出した「プレゼンテーション一覧」を、実際に触れる試作品（モックアップ）に変える
• 「情報モデル→状態遷移→プレゼンテーション抽出」の流れを、最後に「画面」という具体的な形に落とし込む

いよいよDay2最後の大きな演習です。ここまでで「良いUIとは何か」を議論し、保守期間という視点も手に入れました。ところで、頭の中にある画面のイメージを、他の人にそのまま伝えるのは意外と難しいと思いませんか？言葉で「一覧画面があって、そこから詳細画面に飛べて…」と説明するより、実際に画面を並べて見せたほうが、一瞬で伝わります。

このセッションでは、セッション4で抽出した「プレゼンテーション一覧」を、実際に目で見て触れる試作品（モックアップ）に変えていきます。これは今日1日の集大成です。「情報モデル→状態遷移→プレゼンテーション抽出」という流れを、最後に「画面」という具体的な形に落とし込みます。

🗣️ 要約

• モックアップは機能を実装する前の「見た目の試作品」で、プロトタイプ（動く試作品）とは異なる
• プレゼンテーション一覧の各画面を描き、矢印でつなぐと状態遷移図が触れる試作品になる

🗣️ 要約

• モックアップは機能実装前の「見た目の試作品」（料理の盛り付け完成イメージ写真にあたる）
• 手描き＋撮影やFigmaの画面遷移は該当するが、実際にDBに接続して動くシステムは「プロトタイプ」であり該当しない
• 画面だけで初見の人がどこまで理解できるかが、モックアップの質を測る基準になる

モックアップとは、実際に動くシステムを作る前に、画面のレイアウトや遷移だけを再現した「見た目の試作品」です。料理に例えるなら、実際に調理する前に作る「盛り付けの完成イメージ写真」のようなものです。中身（機能）はまだ空でも、見た目と流れが分かれば、お客様やチームメンバーとの認識合わせができます。

• 該当する例：紙に手描きした画面をスマホで撮影してつなげたもの、Figmaで作った画面遷移
• 該当しない例：実際にデータベースに接続して動くシステム。それはモックアップではなく「プロトタイプ（動く試作品）」や「本実装」です

ここで少し考えてみてください。もし今、開発テーマのシステムを一言も説明せずに画面だけ見せたら、初めて見る人はどこまで理解できるでしょうか？

🗣️ 要約

• プレゼンテーション一覧（新規入力・一覧・詳細・更新・削除など）を1枚ずつ画面として描く
• 画面同士を矢印でつなぐと、状態遷移図が「触れる試作品」に変わる

セッション4で作った「プレゼンテーション一覧」には、新規入力・一覧表示・詳細表示・更新・削除といった画面の候補が並んでいるはずです。これを1枚ずつ画面として描き、画面同士を矢印でつないでいくと、状態遷移図が「触れる試作品」に生まれ変わります。

特に注意してほしいのは、いきなり全部の画面を完璧に作ろうとしないことです。よくある間違いとして、細かい色やフォントにこだわりすぎて時間切れになるケースがありますが、正しくは「画面の数」と「画面のつながり」を優先し、見た目の装飾は後回しにすることです。

モックアップ文化の面白いところは、実は「ペーパープロトタイピング」という手法が今でも根強く使われていることです。iPhoneやAndroidアプリの世界的な有名アプリの中にも、初期段階では紙とペン、そしてハサミで切った紙の画面を指で動かしながらユーザーテストをしていた、という逸話が数多く残っています。高機能なツールがなくても、紙とペンさえあれば今日の演習は始められます。

🗣️ 要約

• モックアップとプロトタイプの違い、一覧画面に必要な項目、画面遷移図のMermaid記法などをAIに質問できる

ここまでの内容で疑問があれば、AIに質問してみましょう。たとえば：

• 「モックアップとプロトタイプの違いをもっと詳しく教えて」
• 「（開発テーマ）の一覧画面には、最低限どんな項目を表示すべき？」
• 「画面遷移図をMermaidのflowchartで書くにはどうすればいい？」

🗣️ 要約

• プレゼンテーション一覧から3〜5画面を選び、モックアップツールで画面遷移が分かる試作品を作る演習
• ペルソナになりきって実際に画面の流れをたどって確認する

🗣️ 要約

• プレゼンテーション一覧から必須画面（3〜5画面）を選び、モックアップツールで作成し、画面間の遷移を矢印でつなぐ
• 最後にペルソナになりきって画面の流れをたどる

1. プレゼンテーション一覧から、必須の画面（最低3〜5画面）を選ぶ
2. 選んだ画面を、モックアップツール（Figma、Adobe XD、手書き＋写真、パワーポイント等、チームが使いやすいもので構いません）で作成する
3. 画面と画面の間に、どのボタンを押すとどこに遷移するかを矢印でつなぐ
4. ペルソナになりきって、実際に画面の流れをたどってみる

🗣️ 要約

• 画面遷移が分かる試作品（モックアップ）一式

• 画面遷移が分かる試作品（モックアップ）一式

🗣️ 要約

• 画面数が多い場合はペルソナが最も使う画面を優先する
• 手描き＋写真でも立派な試作品になる
• 画面遷移で迷いやすい設計はAIにレビューしてもらうと気づきが得られる

• 画面数が多すぎて終わらない場合は、ペルソナが最も使う画面から優先的に作りましょう
• 手描きでも構いません。写真を撮ってつなげるだけでも立派な試作品になります
• 「この画面から次にどこへ行けばいいか分からない」というエラーが出たら、AIに「画面遷移で迷いやすい設計になっていないかレビューして」と伝えると気づきが得られます

🗣️ 要約

• 情報の設計は、画面という形になって初めて他の人に伝わる
• プレゼンテーション一覧という抽象的なリストが、触れる試作品に変わった
• 次回はDay2まとめとして「情報モデル→状態遷移→機能／プレゼンテーション抽出」の流れを振り返る

今回学んだことを一言でまとめると、「情報の設計は、最後に画面という形になって初めて他の人に伝わる」ということです。プレゼンテーション一覧という抽象的なリストが、今日、触れる試作品に変わりました。

次回はDay2まとめとして、今日1日の流れ「情報モデル→状態遷移→機能／プレゼンテーション抽出」を振り返ります。今回作った試作品は、明日以降の設計・実装でも繰り返し参照する大切な成果物なので、チームで保管しておきましょう。

🗣️ 要約

• モックアップとプロトタイプの違いを説明できるか
• 画面数が多すぎて時間内に終わらなさそうなときの対処法を言えるか

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

• モックアップとプロトタイプの違いを説明できますか？
• 画面数が多すぎて時間内に終わらなさそうなとき、どうすればよいですか？

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

🗣️ 要約

• 参考リンクはなく、ツールの使い方はAIに直接質問すればよい
• 発展課題は、作った試作品をペルソナ以外のメンバーに見せて迷わず操作できるかテストすること

• 参考リンク: なし（社内資料のみで完結できるよう、外部リンクは提示しません。ツールの使い方はAIに直接質問してください）
• 発展課題: 作った試作品をペルソナ以外のチームメンバーに見せて、迷わず操作できるかテストしてみましょう

🗣️ 要約

• 受講者からよく出る質問への回答例と、つまずきやすいポイントへの対処法をまとめている

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

🗣️ 要約

• モックアップとワイヤーフレームの違いは「骨組みだけか、見た目に近いか」
• すべての画面を作る必要はなく、ペルソナがよく使う画面を優先すればよい
• ツールはチームが一番早く形にできるものでよく、紙＋写真でも十分

🗣️ 要約

• 見た目の装飾にこだわりすぎて時間が足りなくなりやすい
• 画面同士のつながりが整理できていないことがある
• 機能まで作り込もうとしてしまいやすいが、動く機能は実装（Day4）で作る