あやね
プロトタイプは、画面と操作を試して設計を検討するための試作品です。見た目が整っていても、操作してみると案内が足りない場所や分かりにくい遷移が見つかることがあります。
この記事では、ワイヤーフレームとの違い、プロトタイプを共有するときの権限、FigmaとPixsoを使ったチームのレビューを説明します。
1. プロトタイプで何を確かめるか
プロトタイプでは、ユーザーが目的の作業を進める流れを具体化します。画面を順に見せる簡単なものから、入力や状態変化を表現するものまで、検証する疑問に合わせて作ります。
開発直前だけでなく、初期の構成検討にも使えます。作り込む範囲は、画面の美しさよりも今回確かめたい操作で決めましょう。
予約フォームなら、日付を選び、内容を確認して完了する流れを用意します。文字だけでは伝わりにくい移動や反応を、チームで同じように確認できます。
1.1 ワイヤーフレームとの違い
ワイヤーフレームは、情報の順序や画面の骨格を整理するための表現です。プロトタイプは、その画面を使った操作や反応を試すために使います。
ワイヤーフレームでは、見出し、画像、入力欄、ボタンを簡単な図形と文字で配置します。何が必要で、どこから読むかを検討しやすくなります。
ワイヤーフレーム同士をつなげば、簡単なプロトタイプにもなります。色や画像を整える前に、必要な画面がそろっているか、目的の操作を終えられるかを試せます。
1.2 操作と画面状態を一緒に確認する
ボタンを押した後の遷移、読み込み中の表示、入力エラーなどを用意すると、静止画では見落としやすい条件を話し合えます。
例えば必須項目が空のとき、どこに何を表示すれば修正できるかを確認します。正しい操作だけでなく、戻る、やり直すといった動きも検討しましょう。
テストでは参加者に目的を伝え、操作を細かく説明せずに進めてもらいます。迷った位置や読み違えた文言を観察し、設計の修正につなげます。
2. Figmaでプロトタイプを共有する
共有相手とアクセス権限を決める
プロトタイプを共有する前に、誰に見てもらうかを決めます。チーム内のレビューと外部への確認依頼では、適した公開範囲が異なります。
招待した人だけが開ける設定では、対象者が招待済みのアカウントでアクセスできるようにします。チームメンバーが常に閲覧できないという意味ではありません。
リンクを知る人へ共有する場合も、組織で許可された範囲を選びます。共有リンクをコピーして送り、受け手が目的のプロトタイプを開けるか確認してください。
閲覧やレビューを依頼する相手と、編集する相手の役割を分けます。編集権限や有料シートを追加する際は、管理者が契約と席数を確認して割り当てます。
共有のためだけに全員を編集者にする必要はありません。必要な操作とアクセス範囲を決めてから権限を設定しましょう。
レビューする範囲を伝える
リンクと一緒に、開始する画面、試す操作、確認してほしい点を送るとフィードバックが具体的になります。
「予約を変更できるか」「エラーを見て入力を直せるか」など、短い課題を示しましょう。見た目の印象と操作上の問題を分けて集められます。
レビュー後は指摘を画面と対応させ、変更した理由を残します。修正後に同じ操作を試すと、問題が解消したかを判断しやすくなります。
3. Pixsoで制作とレビューを進める
Pixsoでは、同じファイルで画面を編集し、チームと検討できます。画面をプロトタイプでつなぎ、動かしながら操作の流れを共有しましょう。
企画担当者、デザイナー、開発者が同じ資料を参照すると、確認している画面やバージョンの違いによる行き違いを減らせます。
3.1 日本語の文言を入れて画面を作る
日本語のUIで操作を確認しながら、実際の見出しや案内文を配置します。文字の長さ、折り返し、ボタンの読みやすさを画面上で検討できます。
クリックやタップに応じた遷移を設定し、ユーザーが次の操作を理解できるか試します。画面の状態が変わる場所には、変化が伝わる案内も用意しましょう。
予約や購入などの主要な流れを一つ選ぶと、制作範囲を絞れます。必要な画面とエラー状態から作り、検討結果を見て範囲を広げます。
繰り返し使うボタンや入力欄はコンポーネントにまとめます。文字や色のスタイルも共有すると、画面ごとのばらつきを抑えられます。
オートレイアウトで間隔と余白を設定し、長いラベルや追加項目に対応できる部品を作ります。文字が増えたときも、読める配置を保てるか確認しましょう。
既存の対応ファイルを取り込む場合は、代表的な画面から試します。フォントや部品の構造を整えてから、チームの制作へ広げると進めやすくなります。
制作中は、重要な状態に名前を付けて保存し、レビュー対象を共有します。どの版への意見かが明確になるように運用しましょう。
3.2 リンクとコメントでレビューする
共有する人の権限を設定し、確認してほしいプロトタイプのリンクを送ります。操作する順序と質問を添えておきましょう。
レビュー担当者は同じ画面を開いて流れを確認できます。修正が必要な位置をコメントで示すと、口頭だけで説明するより意図を共有しやすくなります。
コメントには、起きたことと期待した動作を具体的に残します。担当者と対応方針を決め、修正後に同じ流れをもう一度試しましょう。
Pixsoは無料プランで始められます。チームのファイル数、共有ライブラリ、管理機能に合わせて利用するプランを選びましょう。
確認したい操作から作る
プロトタイプは、設計の疑問を具体的な画面で確かめるために使います。作り込む前に検証する流れを決め、観察した問題を画面と仕様に反映しましょう。
Pixsoで一つの流れを作り、チームとレビューしてみてください。同じ画面を見ながら話すことで、次に直す場所を具体的に決められます。
