オートレイアウトとプレビューでレスポンシブに【ITreview】IT製品のレビュー・比較サイト

良いポイント

最初使い方を身につけるまでに手間取ったが、
オートレイアウトが神機能だと思う。とてもよい。
いちどこの部分をきちんと覚えれば、
フレームサイズに応じて要素内の文字サイズ・詰めなどを自由に調整できるし、
要素自体の配置もコントロールできる。
レスポンシブデザインに対応したサイトのプロトタイピングに便利。

改善してほしいポイント

逆に言うと、そのキモの「オートレイアウト」について
意外とはじめは理解しづらい。
単にメニューが隠れてしまっているからかもしれない。
メニュー配置を検討しなおしたり、チュートリアルでアピールしたりすると
初心者が機能の意味に気づきやすくなると思う。

どのような課題解決に貢献しましたか？どのようなメリットが得られましたか？

Webサイトの設計時に綿密なプロトタイピングをおこなっても
実際にデバイスでアクセスしたときと見え方が大幅に異なることが多く
手戻りが発生するので頭を痛めていた。
Figmaを使うと、オートレイアウトでブラウザのレンダリングアルゴリズムに近い
パーツの配置ができ、なおかつレスポンシブな動作もおこなえるプロトタイプができるようになった。
さらにプレビューモードではスマホやデスクトップのディスプレイを模した画面内に
実稼働するかたちで表示してくれるので、正確なイメージをつかみやすくなった。
昨今はサイトへのアクセスが8割がたスマホからのもので、
制作時にきちんとデバイス表示イメージをつかむことが必須だが、
FigmaだとPCメインの制作環境であっても
早い段階からスマホで見たときの出来上がりを意識できるようになった。
デスクトップで利用するものだが、
スマホファーストの時代にこそ必要なツールだと感じている。

続きを開く