Chapter 5: プロトタイピング

2019年7月22日 07:27

はじめに

この記事は、UIデザインツール「Figma」の解説記事の第5章になります。
概要や過去の解説記事は下のマガジンからどうぞ。

今回はFigmaのプロトタイピングについて紹介します。
前回は記事はこちら

プロトタイピングとは

アプリやWebなどのUIデザインではプロトタイピングは非常に重要です。
プロトタイプはUIを確認するだけでなく、さまざまなアイデアを試したり、インタラクションや画面遷移を体験したり、周りの人にデザインを共有してデザインを練り直したりするための素晴らしい方法です。

この記事ではFigmaのプロトタイピングのやり方と機能を紹介します。

準備1: 画面の用意

まずはプロトタイピングする画面を用意します。
今回は↓の図のように2つの画面(Frame)を用意し、ボタンそれぞれ1つずつ置いたシンプルな画面で試してみます。

Frameの名前は分かりやすいよう「白い画面」「青い画面」にしました。
また、Frameのサイズは iPhone X で試しますが、ご自身でお使いの端末のサイズに合わせて調整してください。

準備2: プロトタイプモードに切り替え

次は画面遷移の設定をするプロトタイプモードに切り替えます。
プロトタイプモードにするには、プロパティパネルの上にある Prototypeタブをクリックします。その際、Deviceを iPhone X に設定しましょう。

このプロパティパネルのタブ切り替えは以下のようなときに使います。
基本はDesignタブでUIを作り、Prototypeタブで画面遷移を設定することが多いです。

Design: UIデザインするとき
Prototype: プロトタイピングの設定をするとき
Code: UIの要素をプログラミング言語で確認するとき (主にエンジニア向け)

準備3: 画面遷移の設定

プロトタイプモードで要素を選択すると、その要素の右側に白い◯が表示されているのが分かります。

その白い◯をマウスカーソルでドラッグすると矢印が伸び、Frameに矢印をくっつけることができます。

この矢印は、要素を押したときの画面遷移先を設定できます。
今回の例では青いボタンを押したら青い画面へ、白いボタンを押したら白い画面へ遷移するように設定しました。

プレゼンテーションモードで試す

ボタンを押したときの画面遷移を設定したので、実際にプロトタイプを触ってみましょう。
画面右上の再生ボタン▷を押すと、新しいタブでプレゼンテーションモードが立ち上がり、iPhone X が画面に表示されます。

プレゼンテーションモードではマウスカーソルがユーザーの指を模した◯になり、実際の挙動を試すことができます。

これで、作成したUIがそれっぽく動くのが確認できました。
この「それっぽく動く」ことがプロトタイピングの意義であり、どのような動作になるのか実際に体験できることに意味があります。

例えば↑の例では、ボタンを押したときに一瞬で画面が切り替わっているのはiPhoneアプリでは下タブ(Bottom Navigation)以外ではあまりない挙動ですし、ボタンには「青い画面に進む」とあるのに進んでいる感がしないなど、プロトタイプによって、今のデザインの良い点・悪い点を発見できます。

画面の遷移方法を切り替える

遷移方法を設定するには、編集したい遷移(矢印)を選択してプロパティパネル(Prototypeタブ)の、Transition を変更します。

Transitionが instant(一瞬で切り替え) になっているので、進む方を Slide In、戻る方を Slide Out に変更します。

このとき Slide Out は Direction を → に設定しましょう

もう一度プレゼンテーションモードで確認すると、左右から画面が現れ、進んでいる、戻っているように感じることができました。

Figmaは簡単にプロトタイピングすることはできますが、リッチなアニメーションやインタラクションは作ることができません。

その場合は Protopie や Principle といった他のサービスを利用してよりリアルなプロトタイプを作るのをオススメします。
(Figmaの利点はリッチなインタラクションを作ることではなく、オンライン協同編集にあるからです)