Figma Designで画面を作ると、
見た目が整っているかどうかは確認できます。
しかし、それだけでは、ユーザーが迷わず操作できるかまではわかりません。
お問い合わせボタンを押した後、どの画面に移動するのか。
入力フォームで何を入力すればよいのか。
送信した後に、手続きが完了したと判断できるのか。
こうした一連の体験を確認するには、
画面を実際の操作の流れとしてつなぎ、
ユーザーの立場から試してみる必要があります。
このために使うのが、
Figmaの Prototype（プロトタイプ） 機能です。
これまで学習した、
Prototypeの基本的な操作や、Overlay、AnimationやStateをなど、
これらの機能を単独で覚えるのではなく、
ユーザーが目的を達成するまでの体験を設計するために活用します。
今回は、
UIデザインで作成したWebサイトのトップページを出発点に、
お問い合わせから送信完了までの流れを作り、
実際に操作して検証していきます。
Prototypeとユーザー体験の関係
Prototypeは、
画面や操作の流れを試せるようにする仕組みです。
Figmaでは、
- ボタンを押したら別の画面へ移動する。
- ダイアログを表示する。
- メニューを開く。
といった動きを設定できます。
ただし、Prototypeを作る目的は、画面に動きをつけること自体ではありません。
ユーザーが目的を理解し、必要な操作を行い、期待した結果にたどり着けるかを
検証することが重要です。
例えば、お問い合わせを目的としたWebサイトなら、次の流れを確認します。
1. トップページでサービス内容を理解する
2. お問い合わせボタンを見つける
3. お問い合わせフォームへ移動する
4. 必要な情報を入力する
5. 送信操作を行う
6. 送信完了を確認する
この流れのどこかで迷ったり、次の操作がわからなくなったりすれば、
画面の見た目が整っていても体験としては
改善の余地があります。
画面単体ではなく、操作の流れを設計する
Prototypeを作る前に、ユーザーの操作を整理しましょう。
今回は、次の3画面を使います。
| 画面 | 役割 |
|---|
| Home | サービスを紹介し、お問い合わせへ誘導する |
| Contact/td> | お問い合わせに必要な情報を入力する |
| Thanks/td> | 送信が完了したことを伝える |
画面の関係は、次のようになります。
このように、画面を並べるだけでなく、どの操作によって次の画面に進むのかを明確にします。
実習：お問い合わせフォームを作る
手順1：お問い合わせ画面を作る
1. Figma DesignでDay23のデザインファイルを開きます。
2. 新しいFrameを作成します。
3. 幅と高さを設定し、レイヤー名を Contact に変更します。
4. Frame内に「お問い合わせ」という見出しを配置します。
5. その下に「お名前」「メールアドレス」「お問い合わせ内容」のラベルを配置します。
6. 各ラベルの下に、入力欄を表す四角形を作ります。
7. 最下部に「送信する」ボタンを配置します。
入力欄は、テキストと図形を使って表現すれば十分です。
今回の目的は、本物のフォームを実装することではなく、
ユーザーが入力する画面を設計することです。
入力必須の項目がある場合は、
「必須」などの表示も加えておきましょう。
何を入力すべきかがわからないフォームは、操作を始める前からユーザーに負担をかけてしまいます。
手順2：送信完了画面を作る
1. もう1つFrameを作成します。
2. レイヤー名を Complete に変更します。
3. Frame内に「お問い合わせを受け付けました」という見出しを配置します。
4. 「ご連絡ありがとうございました。内容を確認のうえ、担当者よりご連絡いたします。」などの説明文を追加します。
5. 必要に応じて「トップページへ戻る」ボタンを配置します。
完了画面の役割は、単に次の画面を見せることではありません。
ユーザーに
「操作が完了した」と明確に伝えることです。
送信後に何も表示されなければ、ユーザーは操作が成功したのか判断できません。
完了メッセージと今後の流れを示すことで、不安を減らせます。
Prototypeで画面を接続する
ページができたら、前回作成したトップページと繋げて、
ユーザーの操作で、画面が切り替わるように設定します。
手順1：トップページからフォームへ接続する
- Home の中にある「お問い合わせ」ボタンを選択します。
- 右側の Prototype タブを開きます。
- 選択したボタンに表示される接続ハンドルをドラッグし、Contact のFrameへつなぎます。
- 作成されたインタラクションの設定を確認します。
- Triggerをクリック操作、Actionを Navigate to、Destinationを Contact に設定します。
これで、プロトタイプの再生中にお問い合わせボタンを押すと、フォーム画面へ移動するようになります。
ボタン全体を選択して接続することがポイントです。
ボタンの中にあるテキストだけを接続すると、操作できる範囲が意図したものと異なる場合があります。
フレームで接続するようにしましょう。
手順2：フォームから完了画面へ接続する
- Contact のFrame内にある「送信する」ボタンを選択します。
- Prototype タブを開きます。
- 接続ハンドルを Thanks のFrameへドラッグします。
- Triggerをクリック操作、Actionを Navigate to、Destinationを Thanks に設定します。
これで、フォーム画面から完了画面へ移動する操作が作れました。
ただし、この動作は画面遷移を再現しているだけです。
入力欄の値を実際に検証したり、メールを送信したりする処理は行われません。
この違いを理解しておくことは重要です。
Prototypeは操作体験を検証するためのものであり、
実際のWebアプリケーションの機能そのものではありません。
手順3：トップページへ戻る操作を作る
Thank に「トップページへ戻る」ボタンを配置している場合は、同じ方法で Home へ接続します。
これで、トップページから問い合わせ、送信完了、トップページへの復帰までを一通り操作できます。
プロトタイプを再生して検証する
接続が終わったら、実際に操作して確認します。
手順1：開始画面を設定する
Prototypeの再生を始める画面として、Home を設定します。
（選択した状態にしてください）
必要に応じて、Prototypeタブからフローの開始点を指定します。
Figmaの表示や操作方法によっては、Frameを選択して開始フローを設定する形になります。
手順2：プレビューを開く
画面右上の再生ボタンからプロトタイプを開きます。
トップページが表示されたら、実際の利用者になったつもりで操作します。
1. お問い合わせボタンを押す
2. フォーム画面が表示されることを確認する
3. 「送信する」ボタンを押す
4. 完了画面が表示されることを確認する
5. トップページへ戻る操作を確認する
この一連の操作が途切れずに進められるかを確認しましょう。
手順3：操作中に迷う場所を探す
再生できたからといって、体験設計が完成したとは限りません。
次の観点で見直します。
- お問い合わせボタンはすぐに見つかるか
- フォームに何を入力すればよいかわかるか
- 送信ボタンが見つけやすいか
- 送信後に完了したことが明確に伝わるか
- 次に取るべき行動が示されているか
ボタンを押せるかどうかだけでなく、操作する前に何をすればよいか理解できることも大切です。
ユーザー体験を改善する
プロトタイプを操作して問題が見つかったら、画面や接続を修正します。
次の操作がわからない
フォーム画面に到着したものの、入力項目の意味がわからない場合は、ラベルや補足説明を見直します。
ユーザーに必要な判断をすべて任せるのではなく、画面上で判断材料を提供しましょう。
操作した結果が伝わらない
送信ボタンを押しても、画面が変わらない、あるいは完了したかどうかわからない場合は、操作後のフィードバックを考えます。
今回の実習では完了画面へ遷移させていますが、実際のサービスでは、処理中の表示、エラーメッセージ、再送信の案内なども必要になることがあります。
画面のつながりが不自然
フォームから完了画面へ移動した後に、次の行動が示されていなければ、ユーザーはその後どうすればよいか迷うかもしれません。
トップページへ戻るリンクや、問い合わせ後の流れを説明する文章など、目的に応じた案内を用意します。
操作できる場所がわかりにくい
見た目がボタンに似ていても、Prototypeの接続が設定されていなければ、操作しても画面は変わりません。
プロトタイプを検証するときは、ユーザーが操作できると期待する場所と、実際に設定された操作範囲が一致しているかも確認しましょう。
Prototypeで確認できること・できないこと
Prototypeの役割を正しく理解するために、できることとできないことを区別します。
| 検証内容 | Prototypeでの対応 |
|---|
| 画面遷移 | 可能 |
| ボタンやメニューの操作 | 可能 |
| Overlayの表示・終了 | 可能 |
| 画面切り替えのアニメーション | 設定に応じて可能 |
| 実際のメール送信 | 通常の画面遷移だけでは不可 |
| サーバーへのデータ保存 | 通常の画面遷移だけでは不可 |
| 本番環境の入力検証 | 通常の画面遷移だけでは不可 |
Prototypeは、
操作の流れや画面の使いやすさを確認するための仕組みです。
実際のデータ処理まで検証したい場合は、別途、実装されたアプリケーションや適切なテスト環境が必要になります。
あとがき
今回は、トップページ、お問い合わせフォーム、送信完了画面を接続し、一連の操作を再現しました。
重要なのは、接続が正しく動くことに加えて、ユーザーが次の操作を理解できるか、操作結果が伝わるか、目的を達成できるかを確認することです。
画面単体の完成度だけで判断せず、ユーザーの行動を通して画面全体を評価する。
この視点を持つことで、UIデザインを実際の利用体験へとつなげられます。
画面を作っていると、配置や色、文字の大きさなど、目に見える部分に意識が向きます。
しかし、ユーザーにとっての使いやすさは、画面を操作したときに初めてわかることもあります。
お問い合わせボタンを押した先で迷わないか。
入力を終えた後に安心できるか。
目的を達成したことが明確に伝わるか。
こうした体験は、画面を眺めているだけでは十分に評価できません。
FigmaのPrototypeを使えば、実装を始める前に操作の流れを確認し、問題を見つけて修正できます。
作って終わりにせず、
実際に操作して検証する習慣を身につけましょう。
0 件のコメント:
コメントを投稿