Chapter 5: プロトタイピング
はじめに
この記事は、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の利点はリッチなインタラクションを作ることではなく、オンライン協同編集にあるからです)
実機(スマートフォン)で試す
先ほど作ったアプリのUIは、PCで作り、PC上で試しています。
実際にスマートフォンで確認するほう本物に近い環境でテストできるので、お手持ちの端末から Figma Mirror を Appstore / GooglePlay からダウンロードしてください。
(下のサンプル画面はiPhone 8のプレビューになります。)
ダウンロードしたらFigmaのアカウントにログインし、この画面になったら準備完了です。
この状態でPCからFigmaのFrameを選択すると、Figma Mirror でその画面が表示されます。
実際にボタンを押して画面遷移の流れが自然かどうか確認しましょう。
実機で確認する理由
実機でみるとボタンの大きさが適切か、文字のサイズや色、行間、全体のバランスなど、デスクトップで見ていたときと比べるとかなり違いを感じると思います。
この場合ボタンの文字サイズが12ptで、実機で見ると少し小さく読みづらいのでもう少し大きくしよう、といった発見が得られます。
実機プレビューを常に表示しながらUIデザインすると手戻りが少なくなるので、基本は常に端末を見ながらデザインしましょう。
ちなみに、スマホスタンドがあると実機プレビューがしやすくなるのでぜひ活用してみてください。
最後にプロトタイピングでのTipsを紹介します。
Tips1: スクロールの設定
表示する画面(Frame)の縦幅を長くすることで、画面をスクロールできるようになります。
このとき、ボタンの高さも一緒に長くなるときがありますが、これはボタンが画面のサイズに合わせて拡大縮小(Scale)する設定になっているからです。
解決法としては、
1: ⌘(Win: Ctrl) を押しながらFrameをドラッグする
2個上の例ではFrameを伸ばすとき ⌘ を押しながらドラッグしています。
2: ボタンの Constraint を Scale以外にする
要素を選択してプロパティパネルの Constraint から Left/Top を選択するとFrameサイズに対する振る舞いを変更することができます。
初めは要素のサイズも拡大されて驚きますが、Scaleは便利な時もあるので、基本は⌘を押しながらFrameを拡大縮小する癖をつけるようにしています。
Tips2: 固定ヘッダー/フッターの設定
スマートフォンのアプリでは、アクセスしやすいようヘッダーやフッターを画面に固定して表示することがあります。
↑Appstoreでは画面下にボトムナビゲーションを固定している
Figmaでも要素を固定してスクロールすることができます。
まずは固定する要素(ステータスバーとボトムナビゲーション)を用意し、
Frameの一番上、一番下にそれぞれ配置します。
(アイコンはMaterial Designを利用しました。)
次に上の要素(ステータスバー)の Constraint を Left/Top にして、 Fix position when scrolling にチェックを付けます。
同様に下の要素も Constraint を今度は Left/Bottom にして Fix position when scrolling にチェックを付けて プレゼンテーションモードを確認します。
これで、スクロールしていても上下に要素が固定されているプロトタイプを作ることができました。
おわりに
第5章ではプロトタイピングについて紹介しました。
具体的な作り方から実機でのプレビューまで書きましたが、とにかく実機が全てなので、UIデザインするだけでなく実際に使われる環境で触って確認してみてください。
次回はFigmaを実際の開発フローに組み込む話についてご紹介いたします。
うちのごまお(ブリティッシュショートヘア)のおもちゃとチュールになります🐈