こんにちは、SONICJAMデザイナーの濱川です。

昨今、プロトタイプやUI制作に関わるツールが賑わってますね。

SketchやXDや最近のinvisionStudioなど、画面を描くツールは色々とありますが、Figmaというツールが個人的に便利だったので、ご紹介したいと思います。

Figmaについて

少し触って見たところ、SketchやXDに使用感は似ています。
できることもそこまで大きく違いはないのですが、プロジェクトをシェアすると、オンラインでリアルタイムに共同作業ができるところが魅力なツールです。

（https://www.figma.com）

＊Figmaの詳しい解説は、こちらの記事が参考になりそうです。
Sketch はもういらない？ デザインツール Figma の紹介 - Qiita
https://qiita.com/hikaru_tayama/items/49373412ec1a515ff05d

が、しかし、

デザイナーの私としては全然違うところで魅力を感じました。

Figmaでレスポンシブ時の簡単な検証ができそう

FigmaはFrame（範囲を定義）しながら画面を制作していきます。このFrame内の要素は、親のFrameに対してConstrains（制約）という機能で、可変時の挙動を設定できます。

Figmaで上記の機能を使えば、ビジュアルを見ながらレスポンシブ時における様々な画面幅・比率での挙動の確認が可能となり、効率的なデザインができそうです。

この機能はSTUDIOやFramerやSketchのプラグインにもある機能ですが、
今回は一番直感的だったFigmaで検証します。

それでは、実際に検証してみましょう

検証用に適当なデザインを用意します。

1.フル画面の場合

共通UIなどはある程度挙動が決まってくるので、実装者に動きを伝えやすいものですが、よく悩むのは、人物横のテキストブロックをどうするか。
検証1では、そのケースを例に検証してみます。

2.横並カラムの場合

画面幅が変わった時に、カラムの挙動をどうするか？
マージンをあけるのか、画像は拡大するのか。
適切なのはどれなのかを検証してみましょう。

検証１ : フル画面の場合

まずは共通UI周りの挙動を、要素毎に「Constrains」パネルで下記のように設定してみます。
（矢印は、画面を拡大した際に移動する向き）

「Constrains」パネルはここにあります。

動かしてみると、こんな感じ。

次に、タイトル周りを下記の内容で検証してみます。

A : 可変せずに位置移動
B : コピーは拡大しながら、テキストボックスは可変
C : 全体を拡大しながら位置移動

それぞれ「Constrains」パネルで指定を変えていきます。

A : 可変せずに位置移動

B : コピーは拡大しながら、テキストボックスは可変

C : 全体を拡大しながら位置移動

Bで良さそう！

色々なケースを検証して比べられるのは嬉しいですね。
細かな仕様は、これを見ながら実装の方と話すとより効率的かと。

検証2 : 横並びカラムの場合

下記の内容で検証してみます。
設定はAと同じく「Constrains」パネルで設定していきます。
A : パネル間の余白をあける
B : 画像を拡大せずに可変させる
C : 画像を拡大しながら可変させる

A : パネル間の余白をあける

B : 画像を拡大せずに可変させる

C : 画像を拡大しながら可変させる

Bで良さそうですが、テキスト部分はCの「ボックスを可変」の方が良い気がします。

結果

頭の中の仕様と実際の挙動でズレが出ていたものが、視覚的に見られることで、より精度の高いデザインになります。また、元の画像幅やテキストボリュームなどを可変させることで、静止画だと見えない部分が見え、足りない部分に気付くことが多くなりそうです。

まとめ

デザインがある程度決まっていれば、レスポンシブ用の画面は5分ほどで作れると思います。

Figmaの操作もPhotoshop等デザインアプリを使う人であれば、ほぼ学習コストがいらないレベル。（今後どうなるかわかりませんが）無料で使用できるので、かなり気軽に始められると思います。

また、Figmaはレスポンシブ以外にも、様々な便利な機能が搭載されたツールです。

＊改めて貼っておきます。
Sketch はもういらない？ デザインツール Figma の紹介 - Qiita
https://qiita.com/hikaru_tayama/items/49373412ec1a515ff05d

まずは使ってみないことには始まらないのが、こういったツール。
気になられた方は、このままアカウントを作ってしまうことをお勧めします。
（https://www.figma.com）

では、お読みいただきありがとうございました。