モックアップツールで試作品作成

• 日程: Day 2 / セッション 09
• 時間: 14:50-15:35
• 形式: 実習
• ゴール: 自チームの主要画面3つ以上のワイヤーフレームをモックアップツール（Figma／draw.io等）で作成し、想定保守期間（1年／5年／10年以上）に応じた配慮点を1つ以上記録できる
• 学習形式: AI協働型（画面構成案や代替パターンをAIに何度も生成させる）

ここまでで「画面一覧（プレゼンテーション一覧）」は手元にあります。このセッションでそれを実際に「絵」として描き起こします。

「絵が苦手だから…」という声をよく聞きますが、心配無用です。**ワイヤーフレーム（wireframe）は『線画』**です。色も装飾もなく、構造だけ。デザインセンスではなく、情報設計力が問われます。

そして大事なポイントは**「保守期間」を意識すること**。1年で捨てるサービスと10年使うサービスでは、画面に詰め込むべき情報も将来の拡張性も変わります。

モックアップには「忠実度」のレベルがあります。

今日は**低忠実度（ワイヤーフレーム）**を3画面以上作ります。スピード重視です。

最初から高忠実度を狙わないこと。ワイヤーフレームの段階で「情報の配置」「優先順位」を固めるのが本命です。ここで間違うと、後で美しいデザインを作っても無駄になります。

プロのデザイナーほど、初期段階は紙とペンで描きます。理由は「捨てやすい」「修正が早い」「ツール操作で思考が止まらない」。Figmaなどのデジタルツールが普及した今でも、Apple、Google、Amazonのデザインチームの会議室にはホワイトボードとマーカーが必ずあります。「最強の道具は思考を妨げない道具」というデザイン哲学です。

各画面で「主役は何の情報か」を意識します。一覧画面ならリストが主役、詳細画面なら詳細データが主役。

サービスがどれだけ続くかで、設計上の判断が変わります。

例：「お知らせ」エリアの設計

• 1年想定 → 固定HTMLでベタ書きOK
• 5年想定 → 管理画面から更新できる仕組み
• 10年想定 → 外部CMS連携・多言語対応の余地

保守期間を最初に決めると、議論が早い。Day 1のペルソナが「短期トレンドの利用者」なら短期設計、「長く使う固定ファン」なら長期設計、と判断軸になります。

Yahoo! JAPANのトップページは1996年から続いています。基本構造（左メニュー＋中央ニュース＋右広告）は四半世紀ほぼ同じ。「変えない勇気」がブランドを作っています。逆にFacebookのUIは数年おきに大幅変更し、毎回ユーザーから批判を浴びますが、新機能のためにあえて変えているそう。どちらが正しいというより、戦略の違いです。

自チームのプレゼンテーション一覧から「主要3画面以上」を選び、ワイヤーフレームをモックアップツールで作成する。各画面に「想定保守期間と配慮点」をメモ書きする。

AIプロンプト例（画面構成案）

私たちは「レシピ共有アプリ」を作っています。
ペルソナは「料理初心者の20代女性」。

レシピの「一覧画面」のワイヤーフレームの構成案を、
スマホ縦画面（375x812px）想定で考えてください。
- ヘッダー領域に何を置く？
- メイン領域のリストアイテムには何を表示する？
- 検索／フィルターUIはどう配置する？
- 動線として「詳細を見る」「お気に入り」をどう設計する？

ASCII図でレイアウト案を1つ示してください。

AIプロンプト例（保守期間からの配慮点）

このワイヤーフレーム[添付/説明]について、
保守期間が5年と想定した場合、将来の拡張に備えて
配慮しておくべき点を3つ挙げてください。
（例：項目追加余地、画面サイズ対応、機能追加余地）

• 「PCとスマホで同じ画面を表現するときの考え方は？」
• 「『見やすい一覧』のためのレイアウトのコツは？」
• 「ワイヤーフレームに色や画像は入れて良い？」

3画面以上のワイヤーフレームができました。これでDay 2の成果物がほぼ揃いました。明日（Day 3）は「どう作るか（設計）」に本格的に入り、明後日（Day 4）は実装です。今日作ったモックアップが、明後日のUIコーディングのベースになります。

• 3画面以上のワイヤーフレームを作れましたか？
• 各画面に「主役の情報」が明確ですか？
• 想定保守期間と、それに応じた配慮点を1つ以上書きましたか？

• 参考リンク：Figmaチュートリアル、draw.io UI templates、『UIデザインの教科書』
• 発展課題：チームで相互レビュー、ペルソナ視点で1分間でツッコミを入れる