前回プロトタイプを使って、画面遷移をする仕組みを作りました。
でも、Webサイトやアプリの操作は、別の画面に移動するものだけではありません。
次のような動作を考えてみましょう。
- メニューボタンを押すと、画面の上にメニューが開く
- 「削除」ボタンを押すと、確認ダイアログが表示される
- アイコンを押すと、選択肢の一覧が表示される
- 画像をクリックすると、拡大表示される
このように、現在の画面を維持しながら、その上に
別のUIを表示する表現（いわゆるモーダルウィンドウ）は、Web制作でもよく使われます。
Figmaでは、PrototypeのInteraction（インタラクション）設定とOverlay（オーバーレイ）を使って、こうした動作を再現できます。
今回は、
ボタンを押すと確認ダイアログが表示され、閉じる操作で元の画面に戻る仕組みを作ってみましょう。
InteractionとOverlayについて
InteractionとOverlayは、画面の変化に対応する意味では同じですが、実際は大きく違う機能なので、以下の点をしっかりと理解しておきましょう。
Interaction（インタラクション）
Interactionは、
ユーザーの操作に応じて何かが起こる仕組みです。
例えば、クリック、タップ、マウスオーバーなどをきっかけに、
画面遷移や表示の変化を発生させます。
プロトタイプの「ボタンをクリックすると別の画面へ移動する」という動作も、インタラクションの一種です。
Overlay（オーバーレイ）
Overlayは、現在の画面の上に、
別のFrameなどを重ねて表示する仕組みです。
通常の画面遷移では、遷移先の画面が表示されます。
一方、Overlayでは元の画面を背後に残したまま、メニューやダイアログなどを
重ねて表示できます。
例えば、削除確認ダイアログを表示する場合、背後にある一覧画面まで別の画面に切り替える必要はありません。
一覧画面を残したまま、その上に確認ダイアログを表示すればいいんです。
「削除確認ダイアログ」チュートリアル
今回は次のように動作するチュートリアルを行います。
1. 一覧画面に「削除」ボタンが表示される
2. 「削除」ボタンをクリックすると、確認ダイアログが重なって表示される
3. ダイアログの「キャンセル」をクリックすると、ダイアログが閉じる
4. 元の一覧画面に戻る
ここでは実際のデータを削除するわけではありません。
あくまで、UIの表示と操作の流れを再現する練習です。
一覧画面を作る
ます最初にダイアログを表示するボタン用の素材を作ります。
手順1：Frameを作成する
1. Figmaのキャンバスを開きます。
2. F キーを押してFrameツールに切り替えます。
3. キャンバス上にFrameを1つ作成します。
4. 左側のレイヤーパネルで、Frameの名前を 01_List に変更します。
Frameのサイズは、ダイアログを重ねて表示できる大きさにしてください。
手順2：一覧画面の内容を配置する
01_List の中に、次の要素を配置します。
見出し：「登録情報」
説明文：「この情報を削除しますか？」
ボタン：「削除」
ボタンは長方形とテキストを組み合わせて作成できます。
今回の目的はOverlayの仕組みを学ぶことなので、細かい装飾は必要ありません。
手順3：削除ボタンを選択できるようにする
長方形とテキストを別々に配置している場合は、どちらか一方にインタラクションを設定すると、そのオブジェクトをクリックしたときに動作します。
今回は、ボタンの長方形を選択してインタラクションを設定します。
実際の制作では、ボタン全体を1つのFrameやComponentとしてまとめておくと、操作対象を管理しやすくなります。
※この操作は、後でやるので、今はやらなくてもいいです。
ダイアログ用のFrameを作る
次に、重ねて表示するダイアログを作ります。
手順1：新しいFrameを作成する
1. F キーを押してFrameツールに切り替えます。
2. 01_List の外側に、もう1つFrameを作成します。
3. 名前を 02_DeleteDialog に変更します。
このFrameは、一覧画面の中に作るのではありません。キャンバス上で独立したFrameとして作成します。
Overlayとして設定すると、プレビュー時にこのFrameが一覧画面の上に重なって表示されます。
手順2：ダイアログの内容を作る
02_DeleteDialog の中に、次の要素を配置します。
見出し：「削除の確認」
説明文：「この情報を削除してもよろしいですか？」
ボタン：「キャンセル」
ボタン：「削除する」
ダイアログのFrame自体には白い背景を設定し、見出しや説明文、ボタンを配置します。
Frameのサイズは、内容が読みやすく、元の画面を完全に覆わない程度に調整してください。
手順3：ダイアログにドロップシャドウをつける
ダイアログにドロップシャドウをつけると、ダイアログが前面に表示される時にわかりやすくなります。
ドロップシャドウのセットの仕方は、
02_DeleteDialog のフレームを選択した状態で、右パネルのエフェクトで「ドロップシャドウ」を選択します。
ただし、この方法では、背景の長方形とダイアログ本体の前後関係に注意が必要です。
レイヤーパネルで、背景の長方形がダイアログ本体より後ろに表示されるようにしてください。
また、ダイアログのフレーム 02_DeleteDialog を、一覧フレーム 01_List よりも小さいサイズで作ってください。
プレビューではみ出してしまいます。
削除ボタンからOverlayを表示する
ここからPrototypeを設定します。
手順1：一覧画面の削除ボタンを選択する
01_List の中にある「削除」ボタンの長方形を選択します。
Frame全体や見出しのテキストを選択しないように注意してください。
手順2：Prototypeタブを開く
右側のプロパティパネルで Prototype タブを選択します。
インタラクションを追加し、次のように設定します。
| 設定項目 | 設定内容 |
|---|
| Trigger | クリック |
| Action | オーバーレイを開く(Open overlay) /td> |
| Destination/td> | O02_DeleteDialog |
ここで重要なのは、Actionを 次に移動(Navigate to) ではなく、オーバーレイを開く(Open overlay) にすることです。
次に移動(Navigate to) は別の画面への遷移に使います。
一方、オーバーレイを開く(Open overlay) は現在の画面の上にFrameを重ねて表示するための設定です。
手順3：Overlayの表示位置を設定する
Overlayの設定では、
表示位置などを指定できます。
今回は、ダイアログが一覧画面の中央に表示されるように設定します。
表示位置には中央配置などの選択肢があるため、利用できる設定から中央に相当するものを選びます。
Overlayの背景を暗くしたい場合は、背後の画面に表示する背景オプションを有効にし、半透明の黒などを指定します。
これにより、元の画面を残しながら、ダイアログに視線を集められます。
キャンセルボタンでOverlayを閉じる
Overlayを表示できるようになったら、閉じる操作を設定します。
Prototypeの設定で、「外部をクリックしたら閉じる」にチェックを入れておくだけではUIとしては弱いので、ちゃんと導線になるボタンは設置するようにしましょう。
手順1：キャンセルボタンを選択する
02_DeleteDialog の中にある「キャンセル」ボタンの長方形を選択します。
ここでは、一覧画面のボタンではなく、ダイアログの中にあるボタンを選択してください。
手順2：Prototypeでインタラクションを追加する
右側の Prototype タブでインタラクションを追加します。
設定は次のとおりです。
| 設定項目 | 設定内容 |
|---|
| Trigger | クリック |
| Action | オーバーレイを閉じる(Close overlay) |
オーバーレイを閉じる(Close overlay)は、表示しているOverlayを閉じるためのアクションです。
この操作では、別のFrameへ遷移する必要はありません。ダイアログを閉じると、背後に残っている一覧画面が再び操作できる状態になります。
プレビューで動作を確認する
設定ができたら、実際に動作を確認します。
1. 01_List を開始画面として、プロトタイプのプレビューを開きます。
2. 一覧画面の「削除」ボタンをクリックします。
3. 02_DeleteDialog が一覧画面の上に表示されることを確認します。
4. 「キャンセル」ボタンをクリックします。
5. ダイアログが閉じ、一覧画面に戻ることを確認します。
うまく動作しない場合は、次の項目を確認してください。
- 一覧画面のボタンに Open overlay を設定しているか
- 遷移先が 02_DeleteDialog になっているか
- ダイアログ内のキャンセルボタンに Close overlay を設定しているか
- プレビューの開始画面が 01_List になっているか
Overlayが使われる場面
Overlayは、画面全体を切り替えずに追加の情報や操作を提示したいときに便利です。
例えば、次のような場面で使えます。
確認ダイアログ
削除やログアウトなど、ユーザーに確認を求める場面です。
メニュー
メニューボタンを押したときに、選択肢を画面の上に表示します。
ポップアップ
補足情報や、選択可能な項目を表示する場面です。
モーダルウィンドウ
入力フォームや設定画面などを、背後の画面と重ねて表示します。
ただし、すべてのポップアップがOverlayで実装されるわけではありません。
実際のWebサイトでは、CSSやJavaScriptなどを使い、要件に合わせて実装方法を選択します。
InteractionとOverlayの関係を整理する
今回の内容を整理すると、InteractionとOverlayは役割が異なります。
- Interaction：ユーザーの操作をきっかけに、動作を発生させる仕組み
- Overlay：現在の画面の上に、別のFrameを重ねて表示する仕組み
つまり、Interactionで「クリックされたら」という条件を設定し、Actionに Open overlay を指定することで、Overlayを表示できます。
同様に、ダイアログ内のボタンに Close overlay を設定すれば、表示したOverlayを閉じられます。
Overlayは独立した機能として覚えるだけでなく、Prototypeのアクションの1つとして理解すると、ほかのインタラクションとの関係がわかりやすくなります。
あとがき
ユーザーがボタンを押したとき、
画面全体を切り替えるべきか、
それとも現在の画面を残したまま追加の情報を表示するべきか。
この判断は、操作のわかりやすさに大きく影響します。
例えば、一覧画面で削除の確認をするためだけに別のページへ移動すると、ユーザーは元の一覧へ戻る操作も必要になります。
Overlayなら、確認が終わればすぐに元の画面へ戻れます。
Figmaで操作を再現しながら、単に機能を動かすだけでなく、ユーザーにとって自然な操作になっているかも考えてみましょう。
こうしたうごきのあるUIをセットできるようになると、仕事でもかなり本番に近いデザイン構築ができるようになるでしょう。
0 件のコメント:
コメントを投稿