前の章に戻る
- ✓ワイヤーフレームで決めること（要素の配置と優先順位）と、この段階では色や装飾を決めないことを説明できる
- ✓Figmaで身につけた操作を使い、何を置くかの判断は画面フローとリサーチをもとに自分で下せる
- ✓予約フローを中心に各画面のワイヤーフレームを作り、迷わず予約に到達できるかを自己点検して仕上げられる
前回（3-3）では、リフトの情報を整理してサイトマップ（IA図）と画面フローを作りました。今回はその画面フローをもとに、予約フローを中心に各画面のワイヤーフレームを組みます。仕上げる成果物は、各画面の骨組みをまとめたワイヤーフレームです。
このレッスンでやるのは、リフトの予約サービスのワイヤーフレームを作ることです。ワイヤーフレームは、色や写真や装飾を入れる前に、それぞれの画面へ何をどこに置くかを決めた骨組みの設計図です。第1章で見たUXデザインの流れでは、リサーチと要件定義のあとに画面をかたちにします。ワイヤーフレームはその最初の工程で、前回（3-3）の画面フローをもとに、予約フローを中心に画面ごとの要素と並び順を決めます。Figmaの操作は、Figma教材で見本を模写しながらすでに身につけました。今回はその操作技術を使って、リフト向けに0から骨組みを組み立てます。見た目を整えるのは次のレッスンなので、まずは何をどこに置くかをここで固めます。
ワイヤーフレームは何をどこに置くかを決める工程
ワイヤーフレームは、画面に何をどこに置くかを決めた骨組みの図です。色・写真・フォント・装飾は入れず、要素の位置と大きさ、並ぶ順番だけを、グレーの四角と線で表します。
四角＝要素の枠／横線＝テキスト／斜線・バツ＝画像・ロゴ。色や装飾は入れず、上にある・大きい要素ほど優先度が高いことを、位置と大きさだけで表しています。
色や装飾を先に作り込むと、見た目の印象に気を取られて、肝心の要素の配置や優先順位の検討が後回しになります。骨組みだけにしておくと、何をどこに置くかという判断そのものに集中できます。修正も、線と四角を動かすだけで済むので速くなります。
この段階のゴールは、きれいな画面ではありません。予約したい人が迷わず操作できる並びになっているかを、骨組みの形で確かめることです。色やフォントを決めるのは次のレッスン（3-5）なので、ここでは配置と優先順位だけに集中します。
Figmaで学んだ操作を0からの骨組み作りに応用する
ワイヤーフレームはFigmaで作ります。Figmaの操作は、Figma教材ですでに身につけています。あの教材では、配布された見本をワイヤーフレームから模写して、フレームの作り方や要素の配置、整列といった操作を練習しました。
今回は見本がありません。何をどこに置くかは、第2章で固めた要件や価値と、前回（3-3）で作った画面フローをもとに、自分で決めます。操作の手順は模写のときと同じでも、置くものの判断を自分で下すところが違いです。だからまず、前回の画面フローを手元に開いておきましょう。どの画面がどの順でつながるかが決まっていれば、あとはその一枚ずつに要素を置くだけです。
Figma教材で覚えた操作は、そのまま使えます。違うのは、置くものを見本任せにせず、これまでのリサーチと画面フローを根拠に、リフトの利用者に合わせて自分で決める点です。この判断こそ、模写では扱わなかった部分です。
4ステップで予約フローの骨組みを組む
ここからは、骨組みを組む手順です。予約フローを中心に、次の4ステップで進めます。1画面ずつ要素を書き出して並べ、画面をつなぎ、最後に自己点検します。
要素がすべて同じ大きさで順不同に並び、最も押してほしい「予約に進む」が埋もれている。どこから操作するか分からない。
上から重要順に並べ、日時の要素をグループ化。最も重要な「予約に進む」を大きく目立たせ、補足は下に小さく。迷わず操作できる。
STEP1：画面ごとに必要な要素を書き出す
画面フローに並んだ画面を1枚ずつ見て、その画面に必要な要素をすべて書き出します。予約の日時を選ぶ画面なら、日付、時間、メニュー、予約するボタンといった具合です。この時点では並び順は気にせず、漏れなく挙げることを優先します。
| 画面 | その画面に置く主な要素の例（リフトの予約フロー） |
|---|---|
| トップ | ジムの簡単な紹介、予約するへの導線、料金・アクセスへのリンク |
| 予約（日時選択） | カレンダー、空き時間、メニューの選択、次へ進むボタン |
| 予約内容の入力 | 名前、連絡先、選んだ日時の確認、送信ボタン |
| 予約完了 | 完了したことの表示、予約内容、トップへ戻る導線 |
STEP2：優先順位を決めて上から置く
書き出した要素に優先順位をつけ、その画面で最もしてほしい操作を上のほう・目立つ位置に置きます。優先度の低い情報は下や別の画面に回します。この段階では色で目立たせず、位置と大きさで優先順位を表します。
STEP3：予約フローの画面をつなぐ
画面フローで決めた順に、各画面のボタンから次の画面へ線や矢印でつなぎます。どのボタンを押すと、次のどの画面に進むかが、ひと目で分かる状態にします。
STEP4：迷わず予約に到達できるか自己点検する
最後に、利用者になったつもりで、トップから予約完了までを実際にたどります。押す場所に迷う画面や、戻れなくなる箇所、抜けている画面がないかを確認し、あれば骨組みのうちに直します。
その画面で最もしてほしい操作を、上・目立つ位置に、大きめに置きます。予約の日時選択画面なら、日時を選んで予約に進む導線がそれにあたります。色をまだ使えない分、位置と大きさが優先順位を伝える手がかりになります。
演習：リフトのワイヤーフレームを作る
ここからは実際に手を動かします。前回の画面フローとこれまでのリサーチを手元に開き、Figmaでリフトの予約サービスのワイヤーフレームを作ります。予約フローを中心に、各画面の骨組みを組みます。
この段階で色・写真・フォント・装飾に手を出すと、要素の配置や優先順位の検討が止まります。ワイヤーフレームはグレーの四角と線だけで組み、見た目は次のレッスン（3-5）で決めます。骨組みが固まるまでは、あえて装飾を入れないでください。
- ●前回（3-3）のサイトマップと画面フローを、手元に開いておく
- ●これまでのリサーチ成果物（ゴール定義シート・ペルソナなど）を開いておく
- ●Figmaを開き、新しいファイルを1つ用意する
STEP 1：予約フローの各画面に必要な要素を書き出す
- 画面フローを見て、予約に関わる画面（トップ／予約の日時選択／予約内容の入力／予約完了 など）を1枚ずつ確認する
- 各画面に必要な要素を、並び順は気にせずすべて書き出す（上の表を参考に、リフトに足りない要素を補う）
STEP 2：優先順位を決めて上から置く
- 書き出した要素に優先順位をつけ、その画面で最もしてほしい操作を上・目立つ位置に置く
- 目立たせ方は色ではなく、位置と大きさで表す
- 優先度の低い情報は、下や別の画面に回す
STEP 3：予約フローの画面をつなぐ
- 画面フローで決めた順に、各画面のボタンから次の画面へ線や矢印でつなぐ
- どのボタンを押すとどこへ進むかが、ひと目で分かる状態にする
STEP 4：迷わず予約に到達できるか自己点検する
- 利用者になったつもりで、トップから予約完了まで実際にたどってみる
- 押す場所に迷う画面、戻れない箇所、抜けている画面がないかを確認し、骨組みのうちに直す
完了条件（作成物：ワイヤーフレーム）
- ワイヤーフレーム（予約フローを中心に、各画面の要素の配置と優先順位、画面のつながりを示したもの。色・装飾は入れず、グレーの四角と線で構成する）
UIの見た目を作り込む前に、骨組みの段階で迷いや漏れを直しておくと、あとの手戻りが少なくなります。次のレッスンでは、このワイヤーフレームに色やフォントを載せて、UIデザインに仕上げます。