【はじめてのFigmaレビュー】プロトタイプでのデザイン確認方法

はじめに

本記事は、Figmaを用いてデザイン確認を行うことになったWeb担当者様や代理店様など、非クリエイターの方向けの内容となります。

• 突然FigmaのURLが共有されて、初めて見る画面に戸惑ってしまった
• Figmaは操作が難しそうなイメージがあり、何を覚えたら良いのかわからない
• Figmaはデザインレビューでしか使わないので、最低限の機能だけ知りたい

そんなお悩みがある方必見です。

今回はFigmaのなかでも特に、プロトタイプという状態でのデザイン確認方法について実践的に解説していきます。

そもそも：Figmaアカウントの作成は必要？

結論からいうと、Figmaでデザインを確認するために、Figmaアカウントの作成（=サインアップ）は不要です。

ただ、アカウントを作成するメリットもありますので、記事後半でメリットや便利な機能、アカウント作成方法まで解説しますので、気になる方はこちらから先にご覧ください。

記事前半では、アカウント未作成の状態でもできる基本操作を解説していきますので、安心して読み進めてください。

本題：Figmaプロトタイプの確認方法

それでは早速、プロトタイプを確認していきましょう。

プロトタイプは、デザインをスクロールしながら実際の動きに近い状態で閲覧できる機能です。

覚えておきたいポイント3つを、実際の画面キャプチャとともに解説していきます。

※本記事で掲載する画面キャプチャは、ブラウザ版のFigmaで撮影を行なっております。Figmaデスクトップアプリ版の場合や、バージョンアップが行われた場合などにはUIの差異が発生する可能性があります。あらかじめご了承ください。

↑プロトタイプURLを開いた際にこのような画面が表示されたら、共有されたパスワードを入力して閲覧を開始してください。

①表示サイズの確認・変更

Figmaのプロトタイプは、デフォルトでは画面サイズに合わせて表示サイズが自動調整されています。

この表示サイズを適宜切り替えることで、デザイナーの意図した正しいサイズ感でのデザイン確認が可能になります。

右上の矢印アイコンの隣のメニューより、表示サイズの設定が可能です。ここをクリックします。

デフォルトでは一番上の「幅と高さを合わせる」になっていることが多いです。
おすすめは「実際のサイズ(100%)」です。

しかし、デザインのサイズよりも閲覧するデバイスの画面サイズのほうが小さい場合、デザインが画面からはみ出てしまいます。
その状態は見やすいものではないので、「幅に合わせる」を選択しても良いです。（ただし正しいサイズではなくなってしまうため、「実際のサイズ(100%)」での確認も併用するのがおすすめです）

②フローによるページ分け

左上のFigmaロゴの隣に、なにやら長方形のアイコンが表示されている場合があります。

ここではデザイナーが用意したフローという設定を使用できます。

フローとは本来、ユーザーがアプリやWebサイト内をどのように移動するか、その一連の操作経路（ジャーニー）を定義し、視覚化・検証するために使われるものですが、
弊社では、トップページや下層各ページへのショートカットリンクや複数デザイン案の切り替え用リンクとして用意する場合が多いです。

フローが多量に設定されていると、下の説明文のエリアに隠れて見切れてしまっている場合があります。
その際は、下記で示す線の部分をドラッグすると、フロー全体を広く一覧できるようになります。

③ページ送り

フローと同様に、複数ページのデザインを閲覧するための機能にページ送りがあります。

中央下部に、ページ数の表示とともに矢印のボタンがあったら複数ページの確認ができます。

---

これで、Figmaのプロトタイプでのデザイン確認に関する基本操作は完璧です。

番外編：Figmaアカウント作成について

冒頭で述べたように、Figmaでデザイン確認をするためにアカウント作成は必須ではありません。

ただ、下記に紹介するようにメリットはあります。

1. コメント機能が使用できる
2. 言語設定が変更できる

順番に解説していきます。

アカウント作成のメリット①コメント機能が使用できる

一つ目のメリットは、Figmaのコメント機能が使用できるようになることです。

コメント機能を使用することで、デザインへのフィードバックが容易になり、デザイン修正にかかるコミュニケーションコストの削減が期待できます。

コメント機能の使い方

左上にある吹き出しアイコンをクリックすると、コメント入力モードに切り替わります。

コメントを記入したい箇所をクリックし、コメントを入力し、送信ボタン（青い上矢印マーク）を押すだけです。
※Enterキーで送信されてしまうので、改行したいときには Shift + Enter で改行ができます！

もし間違えて送信してしまっても、もう一度コメントした箇所の自分のアイコンをクリックすると、コメント内容を編集することができます。

このとき、チェックマークのところを押してしまうとコメントが「解決済み」扱いとなり、画面上から消えてしまうのでご注意ください。
（チェックマーク隣の×ボタンは、コメント中のパネルを閉じるだけなので押しても問題ありません）

アカウント作成のメリット②言語設定が変更できる

初めてFigmaを使用する場合、デフォルトのUIが英語表記のため使いづらいというデメリットがあります。
アカウントを作成すれば簡単に言語設定が変更できますので、使いづらさを感じる場合は、無料プランで問題ありませんのでアカウント作成をしてしまうのがおすすめです。

この後解説するFigmaアカウント作成手順の中で、言語設定も同時に行うことができるので、良ければこのままアカウント作成も一緒に進めていきましょう。

Figmaアカウント作成方法

FigmaアカウントはメールアドレスかGoogleアカウントで作成できます。

上記画面からメールアドレスかGoogleアカウントで続行すると、下記画面のようにメールボックスを開くよう促されます。

登録したメールアドレスに届いたFigmaアカウントの確認メールを開き、「Verify email」のボタンをクリックします。

「Verify」は「確認する」と訳せます。
このメールアドレスでFigmaアカウントを作成することを確認（≒同意）することを意味します。

「Verify email」でメールアドレスを確認したら、Figmaに戻ります。

下記のようなアカウント設定を始める画面になりますので、まずは赤で囲った「English」と書いてあるボタンから、言語設定を変更しておくと楽です。

任意の言語に変更したら、続けてアカウント名を設定します。

ここで設定するアカウント名は、デザインを閲覧している際などに出る自分のカーソルと一緒に表示されます。
プロジェクトメンバーやデザイナーなど、同じリンクにアクセスする可能性のある人からなら見える名前になるので、その点を意識して設定することをおすすめします。

名前を入力したら、「続行」ボタンを押します。

これで、Figmaアカウントの作成は完了です。

はじめは下記のような画面が表示されるかと思いますが、この画面の使い方は特に覚えておく必要はありません。

確認したいデザインのリンクを改めて開き、先に述べたような手順を追ってデザインを確認していただければ問題ありません。

おわりに

いかがでしたでしょうか？

今回は、Webに関するデザインレビューを行うWeb担当者様や代理店様など、非クリエイターの方向けに、Figmaのプロトタイプでのレビュー方法を解説してきました。

Figmaは、WebサイトやモバイルアプリなどUI/UXデザインを作成・共有・テストするための、クラウドベースのデザインツールです。
無料プランでも多くの機能が利用できたり、リアルタイムでの共同編集やデザインレビューに優れていたりといったメリットから、日本国内でもシェアがますます広がってきています。

その反面使いこなすのが難しそう… と敬遠されがちでもありますが、必要な機能だけ覚えてしまえば思ったよりサクサクとデザインレビューが行えるようになりますので、迷ったときに本記事が参考になれば嬉しいです。