皆さんはWebサイトを制作する際、どのツールを活用していますか？
弊社では主にFigmaを活用して制作しています。
私は入社前までスマホアプリのデザインを中心に制作していましたが、入社後はランディングページ（LP）も制作することが増えました。
それに伴い、大きく変わったのがオートレイアウトとの付き合い方です。
入社したばかりの頃は、LPでもアプリを制作していた時と同様に、ほぼすべての要素をオートレイアウトで組んでいましたが、試行錯誤を重ねた結果、現在はオートレイアウトの使用を半分ほどに抑えたスタイルに落ち着きました。
今回は、その変化の背景について書いてみます。
そもそも、スマホアプリとLPでは求められるデザインが異なる
スマホアプリは繰り返し利用されることが前提です。
そのため、ユーザーが他のアプリで培ったメンタルモデルに沿った体験を提供し、迷いなく目的を達成でき、操作中にストレスを感じさせないデザインが求められます。
一方、LPは商品・サービスを理解してもらうことが目的のため、閲覧者を惹きつけ離脱を防ぐための工夫や、商品の価値を正しく伝えるために意図した順序で情報を伝えることが求められます。
オートレイアウトとの付き合い方
LPでは、視線を集めるためにあえて要素を重ねるなど不規則なレイアウトにすることで違和感を作り出したり、視線誘導のために装飾を施すことで閲覧者を惹きつける手法をよく使用します。
しかし、不規則なレイアウトや装飾は、規則性を前提としたオートレイアウトで実現しようとするとかえって手間がかかります。
また、オートレイアウトを使用していると、要素を並列に並べる型にはまり、無意識のうちにレイアウトの選択肢を狭めてしまっていると感じます。
そのため現在は「コンテンツを均等に並べる」「見出しと本文のセット」「ボタン」以外ではほとんどオートレイアウトを使用しなくなりました。
まとめ
私自身、オートレイアウトを前提に考えるのをやめたことで、レイアウトの選択肢が増え、目的に沿った表現がしやすくなったと感じています。
オートレイアウトは非常に便利な機能ですが、程よい付き合い方を覚えると、表現の幅がグッと広がるはずです。
普段からオートレイアウトを多用している方には、一度あえて使わずにデザインしてみることをおすすめします。