Figmaでワイヤーフレームを作る方法：予約画面で学ぶ手順

Figmaでワイヤーフレームを作るには、画面ごとにフレームを用意し、見出し・入力欄・ボタンを配置してから、画面同士をプロトタイプでつなぎます。最初に作るのは完成した見た目ではなく、利用者が一つの作業を終えられる構成です。

ここでは「日付を選ぶ→予約情報を入力する→内容を確認する→予約完了」という流れを作ります。画面の役割から整理したい場合は、ワイヤーフレームの基本とサイトマップとの違いを踏まえ、今回はFigma上での組み立てに進みましょう。

1. Figmaでワイヤーフレームを作る準備

最初に、どの画面で何を決めたいかを整理します。予約画面なら、日付選択、入力、確認、完了といった主要な段階を書き出しましょう。画面の枚数から考えるより、「日時を選べる」「間違いに気づいたら戻れる」など、利用者に必要な行動を先に決めると、作り忘れを減らせます。

1.1 Figmaとは？

FigmaはUIの画面制作、プロトタイプ、共同編集に使えるデザインツールです。キャンバス上に複数のフレームを並べれば、画面同士の関係を見渡せます。共通のボタンや入力欄をコンポーネントにすると、繰り返し使う要素を管理しやすくなります。

1.2 作る範囲を決める

図形とテキストで画面の骨格を作り、オートレイアウトで間隔や余白を設定できます。画面をプロトタイプでつなぐと、ユーザーが目的の操作を終える流れも確認できます。

今回はスマートフォンから個別相談を予約する画面を例にします。決済、アカウント登録、予約変更メールまで一度に広げず、希望日時と連絡先を入力して予約内容を確認するところに絞ります。ファイルを共有する相手と、閲覧・編集のどちらが必要かも決めておきます。

2. Figmaで予約画面のワイヤーフレームを作る

2.1 ワイヤーフレームで決めること

ワイヤーフレームは、画面の情報構造を示す設計図です。見出し、画像、入力欄、ボタンなどを配置し、何をどの順に伝えるかを考えます。色や写真の細部より、情報の優先順位と主要な操作に集中します。

予約画面では「何の予約か」「選んだ日時はいつか」「次に何が起きるか」が読めることを優先します。画像の代わりに薄いグレーの枠を使っても構いませんが、ボタンまで「テキスト」としてしまうと、操作の意味を比較できません。ラベルは最初から具体的に入れます。

2.2 画面の役割と情報をそろえる

ワイヤーフレームは画面の骨格、プロトタイプは操作と反応を試すための表現です。簡単なワイヤーフレームをつなぐだけでも、画面間の移動を試せます。

確認画面のボタンは「次へ」ではなく「この内容で予約」とします。ここで申し込みが確定することを、押す前に伝えるためです。完了画面の内容は実際のサービス運用に合わせます。メールを送らない設計なら、「確認メールを送りました」とは書きません。

2.3 フレームと共通部品から作る

対象デバイスに合うフレームを作成し、上の四つの名前を付けます。練習では幅390pxを出発点にし、左右に20pxの余白を置きます。これは必須の規格ではなく、狭い画面でも入力欄を並べやすい初期値です。実際の対象端末に合わせて後から変えます。

最初のフレームに見出し、日時の選択肢、選択内容、ボタンを配置します。「11月12日 14:00–14:30」のような具体的な値を入れると、長さの見当が付きます。選択前と選択後を別のフレームで作れば、日時を選ぶ前に先へ進めるか、そのとき何を伝えるかも検討できます。

次に、ボタンの文字を囲むフレームへオートレイアウトを設定します。親の余白、要素の間隔、サイズの追従方法を分けて調整します。Figmaのオートレイアウト公式ガイド（英語）では、内容に合わせるHug contentsと、親の利用可能な幅を使うFill containerが区別されています。ボタンの高さは文字と上下の余白に合わせ、フォーム内の入力欄は親の幅に合わせる、と使い分けます。

繰り返し使うボタンや入力欄はコンポーネントにまとめます。ただし、共通にするのは見た目や構成です。氏名とメールアドレスのラベル、補足、エラー文まで同じ文章に置き換えないようにしましょう。画面を複製して内容を変え、通常時だけでなくエラーや空の状態も用意します。

たとえばメールアドレスが未入力の状態では、該当欄の近くに「メールアドレスを入力してください」と表示します。すでに入力した氏名や相談内容は残します。赤い枠だけを描くのではなく、利用者がどこを直せば予約を続けられるかまで示します。

プロトタイプで「戻って直す」操作までつなぐ

FigmaのPrototypeタブで、ボタンなどの操作対象と移動先フレームをつなぎます。最初の「日時を選ぶ」画面を開始位置にし、四画面を順番に進む接続を作ります。基本操作はプロトタイピング公式ガイド（英語）で確認できます。

確認画面の「メールアドレスを修正」は入力画面へ戻します。修正前の値が残ったフレームを用意すると、入力し直す範囲が分かります。試す人には「日時を予約し、確認画面でメールアドレスの誤りに気づいたら直してください」と頼みます。行き先を口頭で教えずに、どの表示を手がかりに操作したかを見ます。

クリックで画面が切り替わっても、予約枠の確保やメール送信が実装されたわけではありません。ここで確かめるのは、画面上の情報と操作の流れです。残席や重複予約の処理は開発上の条件として別に整理します。

2.4 テンプレートやプラグインを使う

既存のテンプレートや部品を活用すると、基本的な画面構成から制作を始められます。標準機能だけで作る方法と組み合わせ、作業に必要なものを選びましょう。

プラグインを使う場合は、用途、提供者、利用条件を確認して導入します。配置した部品はそのまま使わず、実際の画面の情報量や操作に合わせて調整します。予約の例なら、テンプレートにある住所欄や決済欄が本当に必要かを先に判断します。

3. ワイヤーフレーム用素材の使い方

テンプレートを使う場合も、部品だけを追加する場合も、先に作りたい画面の目的を決めておくと選びやすくなります。ここでは二つの使い方を紹介します。

3.1 UI Templateを使って構成を考える

ワイヤーフレーム用テンプレートには、画面の構成や共通部品を参考にできるものがあります。必要な画面に近いものを選び、見出しや入力項目を実際の内容へ置き換えましょう。

配置済みの部品を動かすだけでなく、不要な情報を削り、足りない状態を追加します。言語設定を整えたうえで、素材の説明や部品名もチームが理解しやすい表記にそろえます。古い説明画像にあるメニュー名と現在の画面が違う場合は、素材そのものの構成を参考にしてください。

3.2 ワイヤーフレーム用の部品を追加する

ボタン、ヘッダー、カードなどの部品を組み合わせる方法もあります。共通する部品はまとめて管理し、画面ごとにサイズやラベルがばらつかないようにしましょう。

Figma Communityで素材を探す際は、必要な画面サイズや部品、編集しやすさを見て選びます。利用条件と更新内容も確認し、実際の画面に配置してから採用すると判断しやすくなります。

4. Pixsoでチームと画面を検討する

Pixsoでも、図形と文字でワイヤーフレームを作り、同じファイルで画面の構成を検討できます。予約の四画面を並べ、入力内容と戻り先を見比べると、確認したい点を共有しやすくなります。

見た目を細かく整える前に、「修正後に日時を選び直す必要があるか」「完了画面で何を保存してもらうか」を決めましょう。判断が必要な位置にコメントを残せば、画面のどこを話しているかを伝えやすくなります。

Pixsoで予約画面の構成を作る

画面の目的から構成を決める

ワイヤーフレームが役立つのは、情報の順序と操作を少ない手間で比べられるからです。まず一つの予約を最後まで進められる構成を作り、入力ミスから戻る操作を足します。そこで見つかった不足を直してから、色や写真、細かな見た目へ進みましょう。