2024.04.22
インターン
デザイナーインターンシップを実施しました
Figmaのプロトタイプ機能｜基本的な使い方
はじめに
こんにちは！デザイナーの新井です。
いきなりですが、Figmaのプロトタイプ機能は使われていますか？
applepleでは、a-blog CMSを使用したWebサイト制作を行っています。近年、デザインツールの中でもFigmaが人気を集めはじめています。弊社のデザイナーもFigmaを使ってデザイン制作を進めています。
今回は、弊社がWeb制作案件で使っているFigmaのプロトタイプ機能に焦点を当て、その操作方法や使い方を紹介したいと思います。プロトタイプ機能を使うことでより実際と近しいデザインを再現し、確認することが可能になります。デザイナーやディレクターは様々な用途で使うことができるのではないかと思うので、参考になれば嬉しいです。
目次
プロトタイプ機能とは
Figmaのプロトタイプ機能を使用すると、作成したデザインをプレビューで確認し、フィードバックを受けたりユーザーテストを行ったりするためのフローを作成できます。この機能は主に以下の用途で使われます。
- デザインやアイデアの進行状況や成果を共有する。
- デザインに関するフィードバックを集める。
- 簡単なユーザビリティテストを実施する。
- ステークホルダーに対してデザインのプレゼンテーションを行う。
このプロトタイプ機能を使うことで、デザインした画面を実際の動きと同じように遷移させたり、簡単なアニメーションや動きを加えたりすることができます。クライアントや社内でデザインを共有する際には、静止画だけのデザインよりもイメージしやすく、実践的なフィードバックを得ることが可能になります。
プロトタイプ機能の使い方
私たちが普段、プロトタイプ機能を使用している場面を、以下の4つのポイントでご紹介します。
- 導線の確認：ウェブサイトやアプリ内のユーザーの動線を確認し、使いやすさを評価するため。
- デザイン提案時：クライアントやチームにデザイン案を提示し、ビジュアルや機能を説明する際。
- 開発者とのコミュニケーション：開発者とデザインの詳細を共有し、具体的な実装方法について話し合う際。
- デザインを実機で確認：実際のデバイスでデザインを確認し、実環境での見た目や操作感をチェックするため。
私がこれから紹介するプロトタイプ機能の使い方は、一部に過ぎません。他にも様々な使い方があると思います。また、プロトタイプ機能を使うと、デザイン作業以外にも追加の時間が必要になります。
初めてプロトタイプ機能を使用する際は、全てのデザインに細かく設定するよりも、特にイメージが伝わりにくい部分や言葉で説明しにくい部分、画面遷移が簡単に設定できるものに絞って使うことをお勧めします。そうすることにより、効率的にプロトタイプの利点を使いながら、作業時間の増加を抑えることができます。
プロトタイプでデザイン提案
クライアントにデザインを提案する際、プロトタイプを使って説明することが効果的です。これにより、クライアントは実際の製品に近い形でデザインを確認でき、開発後のデザインとの差異を最小限に抑えることができます。 また、言葉だけでは伝えにくいアニメーションの部分もプロトタイプで再現できるため、クライアントがより視覚的に理解しやすくなるというメリットがあります。
クライアントから「このボタンを押すとどのページに行くの？」や「メニューはどのように動くの？」などの質問があった際、プロトタイプを実際に動かして見せることで、直感的でわかりやすい回答を提供することができます。これにより、クライアントは具体的な動作や遷移を目で見て理解することができ、説明がよりスムーズになります。
また、クライアントがミーティングの時間外でもデザインを確認できるように、プロトタイプを共有しています。単に一ページずつ確認する方法もありますが、早い段階でデザインを体験できることが、後の修正過程を容易にします。
そのため、主要なボタンやナビゲーションが機能するよう最低限の画面遷移が可能な状態でプロトタイプを設定し、クライアントに共有しているため、フィードバックが受けやすくなります。
プロトタイプでデザインレビュー
社内でデザインに関するミーティングやレビューを行う際には、プロトタイプ機能を使って作成したプレビューを参考にしながら進めます。最初にワイヤーフレームを基にデザインを作り上げ、その後は機能や情報に漏れや誤りがないかデザイン自体に問題がないかを確認していきます。
プロトタイプ機能を使用すると、フレームやコンポーネントを連結して、プレビュー画面での画面遷移が可能になります。これにより、ウェブサイト全体のユーザー導線をチェックすることができます。さらに、複数のプレビューを用意することもできるため、異なるデザイン案の比較や、PCとスマートフォンでのデザインの違いを確認しながら、レスポンシブデザインの検証もすることが可能です。
プロトタイプでエンジニアに共有
デザインを実装する際にFigmaのプロトタイプ機能を使用することで、デザインの詳細を視覚的に示すことができます。開発者はデザイン意図を正確に理解しやすくなり、誤解を減らすことができます。Webサイトのアニメーションなどサイトの動的な要素を事前に確認する事ができるため、実装の問題点の確認ができリアルタイムでプロトタイプを通じてコミュニケーションをとることができます。
開発者にプロトタイプを共有するようになってからは、デザイン調整や改善がスムーズに行えるようになりました。ドキュメンテーションの役割も果たすため、開発者がいつでもデザインの確認できるよう共有しています。
実機サイズでプロトタイプを確認
作成したプロトタイプは、デバイスの大きさに合わせて表示を調整することが可能です。クライアントにデザインを確認してもらう際には、イメージしやすいように、実際の使用環境に近い形で提出しています。
Figmaスマホアプリをインストールしておくと、デザインのプレビューを直接自分のスマホで見ることができます。これにより、実際のデバイスでデザインを操作しながらチェックすることが可能です。また、デザイン制作の際の確認作業に役立つだけでなく、社内のユーザーテストに使うのも便利です。
プロトタイプの作成方法
ここからは、私がいつも設定しているプロトタイプの作成方法についてご紹介します。基本的な設定のみで作成できるプロトタイプを紹介していますので、初心者の方でも容易に作業を進められる内容となっています。具体的には、以下の5種類のプロトタイプを作成します。
- 画面遷移
- ホバーアニメーション
- グローバルメニュー
- ページ内リンク
- 横スクロール
プロトタイプを作成する際には、基本となるデザインを用意していただく必要があります。本記事で使用しているデザインは弊社が公開しているa-blog cms 公式テーマ UTSUWAを使用しています。Figmaファイルも共有していますので、よろしければご活用ください。
a-blog cms 公式テーマ UTSUWA
プロトタイプで画面遷移
フローの開始を設定
特定のボタンをクリックした時に、別ページに遷移する方法を説明します。以下の説明にそって設定してください。
- 画面右のサイドエリアから「プロトタイプタブ」を選択します。
- プロトタイプをスタートさせる最初の画面(フレーム）を選択します。
- プロトタイプタブの「フローの開始点」をクリックします。
- フローの開始点の名前を入力する。
4.で入力した名前はプレビュー画面のメニューに表示されます。どの画面が表示されるのか、もしくはどのようなフローなのか、メニューを見ればわかるような名前に設定しておくことをおすすめします。また、自分以外の人に共有する場合は、相手がわかる言葉で名前を考えましょう。
画面遷移のフローを作成
フローの設定します。以下の手順に沿って進めてください。
- プロトタイプタブを選択した状態で、クリックエリアとなるフレームを選択します。
- フレームの枠に表示される青丸(カーソルを近づけると+マークが表示されます)を選択し、ドラック&ドロップで画面遷移させたいフレームに繋ぎ合わせます。
インタラクションの設定
画面を繋ぎ終えた後は、インタラクションの設定を行います。遷移時のアニメーションを設定することができます。インタラクションに必要な設定を理解した上で、以下の手順に沿って進めてください。
| トリガー | 遷移させるための動作（クリック） |
|---|---|
| アクション | 遷移時の動作（→次に移動） |
| 遷移先 | 遷移先のフレーム名（Mobile: Top） |
| アニメーション | 遷移する時の動き(即時) |
デバイスサイズの設定
プレビュー画面で表示させるデバイスの設定を行います。以下の手順に沿って進めてください。
- 画面右のサイドエリアから「プロトタイプタブ」を選択します。
- 「プロトタイプの設定を表示」から「デバイス」を選択し、その中からから適切なデバイスを設定します。（例：Surface Pro 8 1440×960）もしくは、カスタムサイズから適切なサイズを設定することも可能です。
プレビューの確認（完成！）
最後にこれまで設定してきたプロトタイプをプレビュー画面で確認します。以下の手順に沿って進めてください。
- プロトタイプタブを選択した状態で、表示したいフレームの「フローの開始点」のラベルを選択します。
- 右上の「▶️」再生ボタンから、「新しいタブに表示」をクリックします。
- 表示されたプレビューから画面遷移ができることを確認します。
プロトタイプでホバーアニメーション
ボタンにマウスオーバーした時のアニメーションをプロトタイプで設定して見たいと思います。以下の説明にそって進めてください。
ボタンデザインの用意
- ボタンデザインをデフォルトバージョンとホバーバージョンの2種類、用意してください。
実務ではボタンをコンポーネント化しvariantsで管理しています。コンポーネント化した状態で、アニメーションの設定をすることにより、他のボタンにカーソルを当てた時でもアニメーションが実行されるためより実機と近い状態で触ることができます。
インタラクションの設定
- ボタンの枠に表示される青丸(カーソルを近づけると+マークが表示されます)を選択し、ドラック&ドロップで繋ぎ合わせます。
- 次にそれぞれのボタンに対して以下の内容を例にインタラクションの設定をしてください。
| トリガー | マウスオーバー |
|---|---|
| アクション | →次に変更 |
| 遷移先 | state hover |
| アニメーション | ディゾルブ |
| イージング | イーズアウト 300 ms |
イージングとは
イージングはアニメーションの変化の仕方を表現するものです。適切なイージングを設定することで、アニメーションの動きをより自然に表現できます。
Figmaでイージングを理解しよう！プロトタイプの基礎から実装方法の紹介 より
プレビューの確認（完成）
最後にトップページで使っているボタンがちゃんとホバーアニメーションの設定がされているか、プレビュー画面で確認します。以下の手順に沿って進めてください。
- 表示したいボタンもしくはフレームを選択します。
- 右上の「▶️」再生ボタンから、「新しいタブに表示」をクリックします。
- 表示されたプレビューのボタンにカーソルを当てるとホバーアニメーションの設定を確認できます。
プロトタイプでハンバーガーメニューの開閉
ハンバーガーメニューの開閉をプロトタイプで再現します。以下の説明にそって設定してください。
開閉フローを作成
- 画面右のサイドエリアから「プロトタイプタブ」を選択します。
- プロトタイプをスタートさせる最初の画面(フレーム）を選択します。
- プロトタイプタブの「フローの開始点」をクリックします。
- フローの開始点の名前を入力する
最初の画面遷移の時にも説明しましたが、4.で入力した名前はプレビュー画面のメニューに表示されます。どの画面が表示されるのか、もしくはどのようなフローなのか、メニューを見ればわかるような名前に設定しておくことをおすすめします。また、自分以外の人に共有する場合は、相手がわかる言葉で名前を考えましょう。
インタラクションの設定
インタラクションの設定を行います。開閉時のアニメーションを設定します。以下の手順に沿って進めてください。
- ボタンの枠に表示される青丸(カーソルを近づけると+マークが表示されます)を選択し、ドラック&ドロップで繋ぎ合わせます。
- 次にそれぞれのボタンに対して以下の内容を例にインタラクションの設定をしてください。
インタラクションの設定（開く時）
| トリガー | クリック時 |
|---|---|
| アクション | オーバーレイを開く |
| 遷移先 | 開くフレーム名 |
| アニメーション： | ムーブイン（右から左） |
| イージング | イーズアウト 300 ms |
アクション：「オーバーレイを開く」を設定する際は、フレームの表示位置を指定します。ここでは「手動」を選択し、グローバルメニューを適切な位置に配置します。
インタラクションの設定（閉じる時）
| トリガー | クリック時 |
|---|---|
| アクション | オーバーレイを閉じる |
デバイスサイズの設定
プレビュー画面で表示させるデバイスの設定を行います。以下の手順に沿って進めてください。
- 画面右のサイドエリアから「プロトタイプタブ」を選択します。
- 「プロトタイプの設定を表示」から「デバイス」を選択し、その中から適切なデバイスを設定します。今回はカスタムサイズで「360x640」と設定しました。
プレビューの確認（完成）
最後に設定したプロトタイプをプレビュー画面で確認します。以下の手順に沿って進めてください。
- プロトタイプタブを選択した状態で、表示したいフレームの「フローの開始点」のラベルを選択します。
- 右上の「▶️」再生ボタンから、「新しいタブに表示」をクリックします。
- 表示されたプレビューのボタンにカーソルを当てるとホバーアニメーションの設定を確認できます。
プロトタイプでページ内リンク
ページ内リンクをプロトタイプで再現します。以下の説明にそって設定してください。
フローを作成
- プロトタイプタブを選択し、フレーム内でリンクさせたい要素を選択します。
- フレーム(要素)の枠に表示される青丸(カーソルを近づけると+マークが表示されます)を選択し、ドラック&ドロップで飛ばしたい要素に繋ぎ合わせます。
- インタラクションの設定を行います。
トリガー |
マウスオーバー |
|---|---|
| アクション | →次にスクロール |
| 遷移先 | 要素の名前 |
| アニメーション | ディゾルブ |
| イージング | イーズイン 1000 ms |
デバイスサイズの設定とプレビュー確認（完成！）
プレビュー画面で表示させるデバイスの設定を行います。その後、プロトタイプをプレビューで確認します。以下の手順に沿って進めてください。
- 画面右のサイドエリアから「プロトタイプタブ」を選択します。
- 「プロトタイプの設定を表示」から「デバイス」を選択し、その中から適切なデバイスを設定します。今回はカスタムサイズで「1440x960」と設定しました。
- 表示したいフローの開始点を選択し、右上の「▶️」再生ボタンから、「新しいタブに表示」をクリックします。
- フローの作成で設定したボタンをクリックするとページ内リンクが確認できます。
プロトタイプで横スクロール
コンテンツを横スクロールするデザインをプロトタイプで再現します。以下の説明にそって設定してください。
フレームの設定
- 横スクロールさせるフレームを選択します。
- 要素が表示される幅（コンテンツ幅）までフレームを調整します。
- フレームを選択したまま、右メニューのデザインタブから「コンテンツを隠す」チェックを入れます。
プロトタイプの設定
- 横スクロールさせるフレームを選択し、右メニューのプロトタイプタブに切り替えます。
- スクロールの動作のオーバーフロースクロールを「水平」にします。
デバイスサイズの設定とプレビュー確認（完成！）
プレビュー画面で表示させるデバイスの設定を行います。その後、プロトタイプをプレビューで確認します。以下の手順に沿って進めてください。
- 表示させたいフレームを選択し、画面右のサイドエリアから「プロトタイプタブ」を選択します。
- 「プロトタイプの設定を表示」から「デバイス」を選択し、その中から適切なデバイスを設定します。今回はカスタムサイズで「360x640」と設定しました。
- フローの開始点を選択し、右上の「▶️」再生ボタンから、「新しいタブに表示」をクリックします。
- フローの作成で設定したボタンをクリックするとページ内リンクが確認できます。
プロトタイプの共有方法
作成したプロトタイプはリンクを取得し共有することができます。共有方法については以下の順番に沿って進めます。
- 右上の「▶️」再生ボタンから、「新しいタブに表示」をクリックします。
- 右上の「プロトタイプを共有」をクリックします。
- 共有権限を設定 例：リンクを知っているユーザー全員 閲覧のみ
- 「リンクをコピーする」をクリックする。
最後に
FIgmaのプロトタイプ機能について弊社の事例と作成の手順についていくつかご紹介させていただきました。この記事は、プロトタイプの基本的な作成方法から、共有方法までを段階的に説明しているため、初心者の方でもスムーズに作成できるかと思います。実務でも使っていただけるとより実際の動作に近い状態でのデザイン確認やフィードバックを行えるかと思います。
今回は、画面遷移やホバーアニメーションなど基本的でかつ、実務で使える事例をご紹介しましたが、その他にも複雑なアニメーションやインタラクションの作成も可能です。プロトタイプ機能を使い、クライアントや開発者とのコミュニケーションが効率的に行えるようになると嬉しいです。
