こんにちは、つしまです。まだまだレイアウトに悩む事が多く、制作に時間がかかってしまいます。
限られたスペースの中でレイアウトを考えていく際に視線誘導の考え方を知っていると、どこに何の情報をおけばいいか、納得しながら決めることができると思うので、今回の記事では、視線誘導についてまとめていきたいと思います。
視線誘導とは
優先順位に応じて情報を配置することで、ユーザーがストレスなく瞬時に情報を理解する手助けをする手法です。視線誘導はWebデザインだけでなく、絵画、漫画、写真、印刷物などあらゆるクリエイティブで取り入れられています。
視線誘導の基本「グーテンベルク・ダイアグラム」
人の視線は基本的に「上から下」へ移動し、同じ種類の情報が均等に配置されている場合は、「左上から右下方向」に向かって移っていく傾向があります。これを「グーテンベルク・ダイアグラム」と言います。
視線誘導の3つの法則
Z型
Z型とはユーザーの視線が左上から始まり、右上→左下→右下の順に移動するパターンのことです。アルファベットのZの書き順に沿って視線が移動することから名付けられました。
Z型は視線が止まるポイントがあるため、webサイトやアプリに使われる事が多いです。なぜかと言うと最終的に視線が右下で止まるので、このパターンを利用して右下にアクションボタンを設置することによってユーザーの行動を促しやすいからです。また、ロゴやメインコピーなどの重要な情報は、左上に配置することがコツです。
F型
F型とはユーザーの視線が左上→右上→左下→右下、そして下へと移動するパターンのことです。つまり、アルファベットのFの書き順に沿って視線が移動します。
主にECサイトやブログ記事など、情報量の多いコンテンツの一覧表に多い構造です。下の方にいくにつれ、内容が読み飛ばされる可能性は高くなっていきます。
N型
N型とは右上から始まり→右下→左上→そして左下と、アルファベットのNに沿って視線が移動するパターンのことです。
主に紙媒体に見られ、webサイト上ではあまり見られません。コンテンツが縦書きになるとこのような順番で目線を送る事が多く、新聞や雑誌または漫画などにこの型が多い印象です。
具体的な視線誘導のテクニック
大小で誘導
型以外にユーザーが視線を惹きつけられるものとして、「大きいもの」があります。例えば、大きい塊に目が惹きつけられ、その後に小さいものへ視線が移動していきます。
型の視線の動きに加えて図形や文字などの大きさを変えるだけでも、スムーズに視線誘導ができます。
色で視線誘導
ユーザーの視線は必然的に同形・同色の要素を追っていきます。
なので、情報の優先度が全て同じだった場合、同形や同色で分けてレイアウトすると一つのグループとして捉えられ、見やすくなります。
数字で視線誘導
数字を順に追うことは老若男女問わず無意識に行われる行為だと思います。その特性を活かして、情報に数字をつけるだけで視線を誘導することもできます。
要素が整列されていない場合でも、数字をふることで順序を明確に示すことができます。
さいごに
レイアウトを考えるときに、この視線誘導の考え方を知っておけば、「このデザインはZ型の視線の動きになるから、右下に重要なものをおけばいいな！」などと考えてデザインをすることができるようになります。
レイアウトに迷った際は、視線誘導の法則を活用して効果的なデザインを考えることで、スムーズに制作を行えるようにしたいです。
