【Figma入門⑧】プロトタイプの必要性・Figmaでの基本的な使い方を解説

実際の動きに近い状態で機能を試すと「このデザインは、リンクってわかりにくいかも」とか「拡大表示の閉じ方がわかりにくいな」とか、ユーザー目線に立って改善点を見つけることが出来ます。

デザインの良し悪しだけではなく、ユーザーが操作をしやすいか、認知からサービスの購入・リピートの動線が出来ているか、などの確認にも繋がります。ユーザーの体験を総合的にデザインする“UXデザイナー”の領域にも関わってきますね。

2.クライアントとの意思疎通がスムーズになる

小規模なWebデザイン制作案件などでは、クライアントがWebにあまり詳しくない方ということがあります。デザイン状態だとピンときていない状態なんですね。

完成イメージが曖昧なまま、なんとなくでOKを出されて、納品直前になって追加要望や修正をたくさん言われてしまうと大変です。ほぼWebサイトと同じ状態、触れるようにして見せてあげると、意思疎通がスムーズに行えるでしょう。

Figmaでは以下のような、プロトタイプをクライアントに見せることも出来ます。

ただし、案件によってはプロトタイプ制作より、コーディングしちゃったほうが早いこともあります。どっちが早く、楽にできるかの見極めは必要です。

3.デザイナーとエンジニアの“溝”をなくせる

キャンバスにベタベタっとデザインがあっても、画面遷移なのかモーダルウィンドウでの表示なのかわからなかったり、折りたたまれているメニューを開いた時に“どう表示するか”のイメージは人によって違います。
「ゆっくりめの出現アニメーション」とか言われても、困るわけです。

実際にプロトタイプ上で動きをつけることで、デザイナーとエンジニア・コーダーとの認識が統一されます。結果、無駄な修正が出ず、実際の制作にかかる労力を減らす事ができます。人間関係としても、ギスギスしないのは良いですね。

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

Figmaプロトタイプでページ遷移を設定する

Figmaのプロトタイプ機能を使ってみましょう。
まずは、基本となるページ遷移を設定します。

1.遷移前・遷移後のページを用意する

ページ遷移を設定するには、遷移前・遷移した後に表示したいページが必要です。
今回は、以下のように３階層のページを作って、遷移を設定していきます。

ここまで【Figma入門】シリーズでトップページを一緒に作ってきた方は、作成されたデザインを活用してみて下さい。

これからデザインのアレンジをしてみたい、などの場合は、新規ページを作成して簡単に試してみるのもおすすめ。新規ページの方にデザインを複製し、そちらでプロトタイプ機能の設定を行うことも出来ます。

他のページを作るのが面倒、という時は、下図のようにフレームを用意して、コンポーネントから最小限のアイテムを配置するだけでもOKです。

2.プロトタイプタブを開く

では、プロトタイプ機能を使っていきましょう。

一旦、esc（escape）キーを押して、キャンバス上で何も選択していない状態にして下さい。
右サイトバー上部で、プロトタイプを開きます。
プロトタイプの設定に使う項目が表示される、通常“プロトタイプタブ”が表示されます。

この段階で、プロトタイプのタブに表示される項目は“デバイス”と“背景”の２つ。
どちらも、プレビュー再生時の設定になります。

デバイスはプレビュー確認する時の、画面サイズ（表示領域）の設定です。iPhone15など選択肢にあるものを選べば、そのスマートフォンやタブレットなどをイメージした枠組み使ってプレビュー表示ができます。
背景色では、その枠の外や、フレーム外の部分の表示色を決めます。

今回作っているデザインはPC幅なのでデバイスは「なし」にしてください。
背景色はデフォルトの黒でも、お好きな色を設定していただいても構いません。

3.フローの開始点を追加

フローの開始点とは、プロトタイプでユーザーに最初に見て欲しい画面のことです。プレビューを表示した時に、どのページを表示するかを指定します。

今回の場合は、トップページですね。
トップページ全体を囲っているフレーム（top_pc）を選択して下さい。

プロトタイプタブの上部に、フローの開始点という項目があります。
プラスを押して、追加して下さい。

Flow1という、フローの開始点が追加されました。
キャンバス上にも、青色のフロー名+プレビューアイコンが表示されます。

プレビューアイコンをクリックすると、インラインプレビューと呼ばれる小さいウィンドウでプレビュー確認ができます。

大きい画面でプレビュー表示を確認したい時は、プレビューウィンドウのプレゼンテーションビューで開く、もしくはデザイン画面右上のプロトタイプビュー（▷アイコン）を使います。

4.コネクション（リンク先）を設定する

プロトタイプタブを開いた状態で、キャンバスのオブジェクトにカーソルを重ねてみて下さい。今までデザインタブで操作していた時は表示されなかった円アイコン（と）が表示されます。

円にプラスが入ったアイコン（）表示の時にドラッグすると、遷移を表す矢印を伸ばすことが出来ます。この矢印はコネクション（Connection）と呼ばれる、どこのページに移動するかを設定するためのものです。

トップページのヘッダーにある「イベント」を選択し、イベント一覧ページへ矢印を伸ばしてみましょう。

これで、プロトタイププレビューの時に、イベントをクリック/タップするとイベント一覧ページに遷移できるようになります。

トップページのカードデザインから、詳細ページへの遷移も作ってみましょう。
こちらの移動は、ちょっと遠いので別の方法で設定してみます。

イベントセクション左端のカードで、画像とタイトルテキストを選択します。
ダイレクト選択（CtrlもしくはCommandキーを押しながらクリック）と、Shiftキーで複数選択をすると、サクッと選択できます。　

右サイドバーのプロトタイプタブで、インタラクションのプラスアイコンをクリック。
「なし」となっているところをクリックして、次に移動を選択して下さい。
その下で移動先を設定できるので、第三階層（下記ではarticle_pc）を選択します。

全体が見えるようにキャンバスの表示倍率を縮小すると、以下のように第三階層のデザイン（フレーム）へ矢印が伸びていることが確認できます。

最初の直接ドラッグでも、プロトタイプタブからの設定でも、結果は同じです。
やりやすい方法で、遷移したい先に矢印を伸ばして繋いでください。

5.プロトタイププレビューを確認

プレビューで、設定した部分のページ遷移が出来るか試してみましょう。

フローの開始点（フロー名）のところから、インラインプレビューを表示。
ページ遷移を設定した箇所をクリックして、画面が切り替わるか確認します。

もっと実物に近づける場合は、更に細かくコネクションの矢印を設定していきます。
例えば、ヘッダーのロゴをクリックすると、トップページに戻るようにしたり。

第二階層と第三階層を行き来したり、とリンク部分をひらすら繋ぎます。

ある程度出来たら、インラインではなく新しいタブでプレビューしてみても良いですね。
Figmaのメニューバーと、デザインのヘッダーメニューが重なる時は、サイドバーを出した状態にすると良いです。

Figmaのメニューバーにある共有ボタンを使うと、編集者を追加したり、クライアントにデモを見せる事も可能です。
共同編集の場合はチームプロジェクトになるのでプラン制限がありますが、プロトタイプを閲覧してもらうだけなら無料プランでも出来ます。クライアントに、“リンクをコピーする”もしくはメールアドレスを使った招待でURLを送ることができます。

Figmaのインタラクションをもっと知る

インタラクション（Interaction）とは

インタラクションは inter（相互）とaction（作用）を合成して作られた言葉。
WebデザインやUI/UXデザインでは、ユーザーが行うアクション（操作や行動）に対して、サイトやアプリケーションなどが行う反応のことを指します。

例えば、ここまでで設定してきたページ遷移も、インタラクションの一つです。
以下のように、考えられます。

ユーザー操作：リンクテキストをクリックする
サイトの反応：別のページを表示する

ページ遷移以外にも、インタラクションは沢山あります。
マウスを重ねた時に色を変える、クリックで映像を再生/停止する、クリックするとチェックを付け外しする・タブを切り替える……などなど、ユーザーの操作によって変化させたい部分は、すべてインタラクションと言って間違いではないのです。

Figmaのインタラクション設定

ページ遷移を設定した、インタラクションをもう一度見てみましょう。
下図のようなモーダルウィンドウ、インタラクションの詳細（Interaction details）を開いて下さい。

インタラクションの詳細では、以下5つのな設定ができます。

トリガー：変化を起こすきっかけ
アクション：何をしたいか
表示するフレーム：どこに移動する・なにを表示するか
アニメーション：アクション時のトランジション
状態管理：オブジェクトの状態をリセットするか否か

インタラクションで遊んでみる

アクションで移動ではなくオーバーレイを選択すると、今ある画面上の上に選択したフレームを表示できます。モーダルウィンドウ、スマホ向け表示のメニューなどでよく見かける表示ですね。

簡単なフレームを作って実験してみましょう。
トップページのロゴから、コネクションの矢印を引っ張って、インタラクションの詳細を設定します。せっかくなのでアニメーション（トランジション）も即時以外に変えます。

移動よりも必要な設定が多いので、インタラクションの詳細が伸びますね。
選択に合わせて必要な項目が表示されるので、出てきたものを設定していけば大丈夫です。