おはよう！
デザイナーとして駆け出して2年目の管理人みっぽこです。
デザインをするときに、カードをどのようにデザインすべきか悩んだことはありませんか？
水平か垂直か、ささいな差に思えてもそれぞれで得られる効果は全く異なります。
デザインをする上でカードを効果的に使うためにも、それぞれのレイアウトの両者間の違いについて理解する必要があります。
本記事では、カードの並びが水平の場合と垂直の場合の長所と短所を上げてどちらがどの場面で効果的に作用するのかをまとめました！
デザインを通して情報を適切に伝えるときにどのようにするとよいか、一つの判断材料として参考になればと思います！
本記事はこちらの記事を和訳しつつまとめたものになります。
Vertical vs. Horizontal Cards: Which Are Better?
いざ本題へ！
水平vs垂直 視線誘導で比べてみる
まず初めに、水平か垂直のどちらのカードレイアウトが大きい写真を配置したときにより効果的なデザインとなるかを比較します。
勝敗は….
WIN！！：垂直
垂直のレイアウトで大きな画像を配置するのは、より適切な視線誘導を促しグッドなレイアウトです！
ユーザは適切な視線誘導により、写真と文章を認識して理解するのにじっくり見る必要がなくなります。
水平のレイアウトは右と左に分断されてしまっているため、視線誘導がばらばらになってしまいます。
垂直なレイアウトはページを上から読み進めていく流れで自然に全体を把握できるため、ユーザにとって理解しやすいレイアウトです。
続いて、カード内で長い文章を配置したときにより効果的なデザインとなるかを比較します。
勝敗は….. ﾀﾞﾗﾗﾗ… ﾀﾞﾝ！！！！
WIN！！：水平
写真よりもテキストで情報を伝えたいとき、水平のレイアウトのカードがデザインとしてより効果的な選択となります。水平のレイアウトは、文章を読むときに適切な余白が生まれ必要以上の視線誘導がなくなり、読みやすくなります。
垂直のレイアウトに長い文章を配置すると、余白が少なく詰め込まれているように見えてしまいます。結果として文章を読むには窮屈な印象となります。それだけではなく、詰め込まれたように見える文章は圧倒感とムラがあるように見えます。
しかし、値段や商品名など項目に分かれたテキストデータをカードに入れる際は、水平なカードは適切なレイアウトではなくなります。そのようなときは、垂直のレイアウトのほうがばらばらに短く視線誘導できるため、ユーザは情報を簡単に理解することができます。
いかがでしょうか。
ここまで、カードのレイアウトが垂直か水平どちらがより情報を効果的に伝えることができるかを比較して見てきました。
写真からの情報をより伝えたいのか、テキストからの情報をより伝えたいのか伝えたい内容によって見せ方を選ぶことが重要ということがよく分かります。
ここからは、余白の有無によってカードの見え方がどのように見えるのかを比較していきます。
余白ありvs余白なし レイアウトで比べてみる
ここでは、カードを多数まとめてグループ化して表示したいときに、カード内の余白ありか余白なしかどちらが効果的なデザインかを比較します。
勝敗は…..
WIN！！：余白なし
カードを多数まとめてグループ化すると、多くのスペースが必要になります。そのため、スペースを節約し、同時に画像をより魅力的にする方法があります。
余白なしで画像を配置したレイアウトは、余白をとった画像よりもスペースを無駄にすることなくすっきりとまとめることができます。
さらに、余白がないことで画像がより目立つように見えるため、より多くのユーザーがクリックする可能性があります。一方で余白をとった画像のレイアウトはコンテンツがより遠くに見え、不自然に見えてしまいます。
以下の画像で、余白ありと余白なしのレイアウトでスペースがどのくらい節約されるかを比較しました。余白なしで画像を配置すると垂直方向のスペースがかなり節約されることが分かります。
写真をより効果的に見せ情報をすっきりとまとめたいときには、カード内の画像を余白を取らずに配置することで、より効果的に見せることができます。
まとめ
カードの情報を垂直にするか水平にするかで、情報の伝わり方が大きく異なることが分かりましたね。
テキストなのか、画像なのか、カードレイアウトで何を一番に伝えたいかを考えることで最善の選択が変わっていきます。
今回参考にあげた余白ありのデザインも、余白をたっぷりとって洗練された印象にしたいときには適したデザインになります。
だからこそ、まずは何を伝えたいのかを明確にすることそして最善の選択ができるようにそれぞれのデザインの役割を理解することが重要になってきます。
本記事を読んだ皆さんは、垂直と水平の良し悪しを理解していただけたと思いますので、ぜひこれからの制作に役立ててください！
それではまた次回！
コメント