あやね
Figmaのワイヤーフレームでは、画面に必要な情報と操作を、線や図形、文字で整理できます。見た目を作り込む前に構成を比べたいときに役立ちます。
この記事では、フレームを用意し、共通の部品を作り、画面の流れを検討するまでを説明します。テンプレートやプラグインを使う方法も紹介します。
1. Figmaでワイヤーフレームを作る準備
最初に、どの画面で何を決めたいかを整理します。予約画面なら、日付選択、入力、確認、完了といった主要な段階を書き出しましょう。
1.1 Figmaとは？
FigmaはUIの画面制作、プロトタイプ、共同編集に使えるデザインツールです。チームが同じファイルを開いて画面を確認し、コメントで意見を共有できます。
キャンバス上に複数のフレームを並べれば、画面同士の関係を見渡せます。共通のボタンや入力欄をコンポーネントにすると、繰り返し使う要素を管理しやすくなります。
1.2 Figmaでできること
図形とテキストで画面の骨格を作り、オートレイアウトで間隔や余白を設定できます。画面をプロトタイプでつなぐと、ユーザーが目的の操作を終える流れも確認できます。
作業を始める前に、対象デバイスと共有する相手を決めましょう。無料プランで試す場合も、作成するファイル数と必要な共同編集機能に合う利用範囲を選びます。
2. 実際にFigmaでワイヤーフレームを作成する方法
2.1 ワイヤーフレームとは？
ワイヤーフレームは、画面の情報構造を示す設計図です。見出し、画像、入力欄、ボタンなどを配置し、何をどの順に伝えるかを考えます。
色や写真の細部より、情報の優先順位と主要な操作に集中します。複数案を作ると、構成の違いをチームで比較しやすくなります。
2.2 ワイヤーフレームの役割
ワイヤーフレームは画面の骨格、プロトタイプは操作と反応を試すための表現です。目的に応じて組み合わせて使います。
ワイヤーフレームでは、必要な情報がそろっているか、主要なボタンが見つかるかを検討します。具体的な文言を入れると、情報量の偏りにも気づきやすくなります。
簡単なワイヤーフレームをつなぐだけでも、画面間の移動を試せます。詳しい見た目が必要な箇所から作り込み、操作上の疑問を確かめていきましょう。
2.3 フレームと共通部品から作る
対象デバイスに合うフレームを作成し、画面の役割が分かる名前を付けます。まず見出し、本文、主要な操作を配置しましょう。
繰り返し使うボタンや入力欄はコンポーネントにまとめます。画面を複製して内容を変え、通常時だけでなくエラーや空の状態も用意してください。
文字や部品を追加しても読み順を保てるように、余白と間隔を整えます。画面を並べて、同じ操作が同じ位置や名称で表現されているかを確認しましょう。
2.4 テンプレートやプラグインを使う
既存のテンプレートや部品を活用すると、基本的な画面構成から制作を始められます。標準機能だけで作る方法と組み合わせ、作業に必要なものを選びましょう。
プラグインを使う場合は、用途、提供者、利用条件を確認して導入します。配置した部品はそのまま使わず、実際の画面の情報量や操作に合わせて調整してください。
3. ワイヤーフレーム用素材の使い方
テンプレートを使う場合も、部品だけを追加する場合も、先に作りたい画面の目的を決めておくと選びやすくなります。ここでは、二つの使い方を紹介します。
3.1 UI Templateを使って構成を考える
ワイヤーフレーム用テンプレートには、画面の構成や共通部品を参考にできるものがあります。必要な画面に近いものを選び、見出しや入力項目を実際の内容へ置き換えましょう。
配置済みの部品を動かすだけでなく、不要な情報を削り、足りない状態を追加します。テンプレートの構成よりも、その画面でユーザーが行う作業を優先してください。
Figmaは日本語のインターフェースに対応しています。言語設定を整えたうえで、プラグインの説明や部品名もチームが理解しやすい表記にそろえましょう。
3.2 ワイヤーフレーム用の部品を追加する
ボタン、ヘッダー、カードなどの部品を組み合わせる方法もあります。共通する部品はまとめて管理し、画面ごとにサイズやラベルがばらつかないようにしましょう。
Figma Communityで素材を探す際は、必要な画面サイズや部品、編集しやすさを見て選びます。利用条件と更新内容も確認し、実際の画面に配置してから採用すると判断しやすくなります。
4. Pixsoでチームと画面を検討する
Pixsoでも、図形と文字でワイヤーフレームを作り、画面をつないでチームと検討できます。同じファイルで編集し、確認したい位置にコメントを残せます。
Pixsoは日本語のインターフェースで制作を始められます。共通のコンポーネントとオートレイアウトを使い、画面の構成からプロトタイプのレビューまで進めてみましょう。
画面の目的から構成を決める
ワイヤーフレームは、情報の順序と操作を比較するために使います。テンプレートを出発点にしても、実際の文言や状態を入れて確かめることが大切です。Pixsoでチームと同じ画面を見ながら検討する方法も試してみてください。
