これまでは、主に画面の見た目を作ることが中心でした。
しかし、実際のWebサイトやアプリは、見た目があるだけでは完成しません。
ボタンを押したら次の画面へ進む。
メニューをクリックしたら別のページが開く。
入力フォームの送信ボタンを押したら、完了画面が表示される。
このような操作と画面の変化を、Figma上で再現するための機能が
Prototype（プロトタイプ） です。
今回は、2つの画面を作り、ボタンをクリックすると次の画面に移動する仕組みを実際に設定してみましょう。
Prototypeとは
Prototypeは、デザインした画面に操作や遷移を設定し、実際に操作できるようにする機能です。
例えば、次のような動きを再現できます。
- ボタンをクリックすると別の画面へ移動する
- メニューを押すとメニュー画面が開く
- ダイアログを表示する
- ボタンを押したときに画面内の表示が切り替わる
- スマートフォンアプリの画面遷移を確認する
ここで重要なのは、Prototypeは実際のWebサイトやアプリを完成させるための
プログラミング機能ではないということです。
Figma上で画面遷移や操作の流れを再現し、実装前に使い勝手や操作のわかりやすさを確認するための機能です。
例えば、実際のWebサイトでは、ボタンを押した後にサーバーへデータを送信したり、データベースを更新したりすることがあります。
FigmaのPrototypeだけで、こうしたバックエンド処理が実行されるわけではありません。
でも、UIとしての導線を作ることはできるので、Prototypeを使ってUIとしての動線を構築するということです。
Prototypeの基本構造
Prototypeを理解するうえで、次の3つの用語を押さえておきましょう。
| 用語 | 意味 |
|---|
| Trigger（トリガー） | 何をきっかけに動作するか |
| Action（アクション） | きっかけが発生したときに何をするか |
| Destination（遷移先） | どの画面へ移動するか |
例えば、ボタンをクリックすると完了画面へ移動する場合は、次のようになります。
Trigger：クリック
Action：Navigate to（画面遷移）
Destination：完了画面
この3つを設定することで、画面上のボタンに動作を持たせることができます。
画面（ページ）を2つ作る
今回は、Frameで、シンプルな「トップ画面(01_Home)」と「完了画面(02_Complete)」を作成します。
手順1：トップ画面を作る
1. Figmaのキャンバスを開きます。
2. F キーを押してFrameツールに切り替えます。
3. キャンバス上にFrameを1つ作成します。
4. 左側のレイヤーパネルでFrameを選択し、名前を 01_Home に変更します。
5. Frameの中にテキストを追加し、「ようこそ」と入力します。
6. さらに長方形を作成し、その上に「完了画面へ進む」というテキストを配置します。
この長方形とテキストを組み合わせたものを、今回のボタンとして扱います。
ボタンとしてまとめておきたい場合は、長方形とテキストを選択してFrame化しても構いません。今回は操作の理解が目的なので、長方形とテキストを別々に配置した状態でも進められます。
手順2：完了画面を作る
もう一度 F キーを押します。
1つ目のFrameの横に、2つ目のFrameを作成します。
名前を 02_Complete に変更します。
Frameの中に「完了しました」と入力します。
これで2つの画面ができました。
キャンバス上では、次のような構成になります。
01_Home → 02_Complete
この時点では、まだ矢印や遷移の設定はありません。単に2つの画面が並んでいる状態です。
手順2：完了画面を作る
1. もう一度 F キーを押します。
2. 1つ目のFrameの横に、2つ目のFrameを作成します。
3. 名前を 02_Complete に変更します。
4. Frameの中に「完了しました」と入力します。
これで2つの画面ができました。
この時点では、まだ矢印や遷移の設定はありません。単に2つの画面が並んでいる状態です。
ボタンから画面遷移を設定する
ここからPrototypeを設定します。
手順1：ボタンのオブジェクトを選択する
01_Home の中にある、ボタンとして使う長方形を選択します。
手順2：Prototypeタブを開く
右側のプロパティパネルで、Prototype タブを選択します。
Figmaでは、Design タブが見た目の設定を扱うのに対し、Prototype タブは操作や
画面遷移の設定を扱います。
手順3：インタラクションを追加する
Prototypeパネル内に、インタラクションを追加するための操作があります。
選択中の長方形に対して、インタラクションを「+ボタン」を押して追加します。
Triggerをクリックに相当する設定にします。
今回は「クリック時」
Actionを 次に移動（Navigate to） にします。
遷移先として 02_Complete を選択します。
設定の表示名や配置はFigmaのUIによって異なる場合がありますが、設定する内容は「クリックをきっかけに、指定したFrameへ移動する」です。
手順4：画面遷移の矢印を確認する
設定ができると、キャンバス上でボタンから遷移先のFrameへ向かう接続が表示されます。
この接続は、オブジェクト同士の関係を示しています。
Prototypeを実際に動かす
設定が終わったら、プレビューで動作を確認します。
FigmaのUIでは、再生ボタンやプレゼンテーション表示に相当する操作からプレビューを開始できます。
手順2：ボタンをクリックする
プレビュー画面で「完了画面へ進む」のボタンをクリックします。
設定が正しければ、02_Complete の画面に移動し、「完了しました」と表示されます。
ここまで動作すれば、基本的な画面遷移の設定は成功です。
もし動作しない場合は、次の項目を確認しましょう。
- インタラクションを設定したオブジェクトは、意図したボタンか
- Triggerがクリックに相当する設定になっているか
- Actionが Navigate to になっているか
- 遷移先が 02_Complete になっているか
- プレビューの開始画面が 01_Home になっているか
Prototypeで設定するのは見た目ではなく動作
DesignタブとPrototypeタブの違いを整理します。
Designタブで設定するもの
- 色
- 文字
- サイズ
- 余白
- 配置
- 枠線や影
Prototypeタブで設定するもの
- クリックしたときの動作
- 画面遷移
- オーバーレイ表示
- 遷移時のアニメーションなど
Designは「画面をどう見せるか」、
Prototypeは「画面をどう操作できるようにするか」を扱います。
この区別を理解すると、画面の見た目を修正したいのか、操作の流れを修正したいのかを、整理しやすくなります。
PrototypeはWeb制作のどこで役立つのか
Web制作では、デザインを作成した後、実際に
HTML・CSS・JavaScriptなどで実装（コーディング）します。
その前にPrototypeを使うことで、実装する前の段階で
操作の流れを確認できます。
例えば、次のようなケースです。
- 問い合わせフォームの入力から完了画面までの流れ
- 会員登録からログインまでの画面遷移
- 商品一覧から商品詳細へ移動する動き
- スマートフォンのメニューを開閉する操作
- 予約画面で次のステップへ進む流れ
画面遷移を事前に試せるため、
デザインレビューやクライアントへの説明にも活用できます。
ただし、実際のデータ送信、認証、決済、サーバーとの通信などは、別途実装が必要です。
Prototypeは、こうした処理を含む
ユーザー体験の流れを視覚的に検討するためのものです。
あとがき
Webサイトやアプリは、画面単体のデザインが優れているだけでは、使いやすいとは限りません。
ユーザーがどこをクリックし、次に何が起こり、目的を達成するまでにどのような画面を通るのか。
こうした一連の流れも、
ユーザー体験を左右する重要な要素です。
Prototypeを使えば、コードを書く前にその流れを試せます。
まずは今回のような単純な画面遷移から始め、画面を増やしながら、ユーザーが迷わず
目的を達成できる構成を考えていきましょう。
0 件のコメント:
コメントを投稿