気になる人
・どんなレイアウトにすればいいの？
この記事はそんな悩みを持つ方に、実は意外と知られていない視線誘導を考えたデザインの型を７つご紹介します！
はじめまして、とある企業で企画やWeb/UIデザイン・UXデザインを担当していますモーリーと申します。
今回は視線誘導を考えて、ユーザーの視線の流れを意識したレイアウトの表現方法を７つデザインの実例を交えてご紹介していきます。
目次
視線誘導を意識するとデザインは劇的に変わる
視線誘導の技術は、UI/WEBデザインだけではなく、バナー広告・チラシデザイン、プレゼン資料など幅広く使える手法になります。
視線誘導の手法を覚えて、いつもよりも一つ上の見やすいデザインを作りましょう。
視線誘導：グーテンベルク・ダイヤグラム
「均等に配置された情報を見る時、視線は左上から右下に流れていく」というパターンのこと。
横書きが主流である欧米文書で主に使われています。
視線は左上（1のエリア）から右下（2のエリア）へ、揺れながら移動すると考えられています。
グーテンベルク・ダイヤグラムはWebよりも印刷物に当てはまるパターンのため、Webには主に下記の「Z型」と「F型」を用いることが多いです。
視線誘導：Z型
Z型とはユーザーの視線が左上→右上→左下→右下の順に動くパターンのことです。
グーテンベルグ・ダイアグラムと同様のパターンで、情報の強度が均一であるときに効果が表れます。
新規のユーザーが初めて触れるデザインや全体の構成を見るとき、横組みのテキストなどに多く用いられ、アルファベットの「Z」のように動くことから『Z型』と呼ばれています。
トップページは『Z型』レイアウトになっていることが多いです。
視線誘導：Z型のチラシ・アプリ/WEB実例
上図の例のようにZ型（上から下）に情報を配置することで、視線を誘導することができます。
購入などの導線を画面下に配置することで、購入ボタンにも視線を誘導することができます。
視線誘導：F型
F型とはユーザーの視線が左上→右上→少し下に下がって左→右→下の順に動くパターンのことです。
リピーターのユーザーによく見られる目線で、見落とした内容を確認する場合に多く用いられます。
Webページを見るときも多くがF型になっています。
アルファベットの「F」のように動くことから『F』と呼ばれています。
商品ページや記事ページの多くが「F型」レイアウトになっています。
視線誘導：F型のチラシ・アプリ/WEB実例
上図の例のようにF型に情報を配置することで、視線を誘導することができます。
ニュース系のアプリなどに頻繁に使われていることが多く、横組みで文量が多い場合には、F型を適用することでコンテンツに集中してもらえる効果があります。
視線誘導：N型
N型とは、ユーザーの視線が右上→右下→左上→左下の順に動くパターンのことです。
主に日本語で書かれた新聞や雑誌など、縦組みの書籍に多く用いられ、アルファベットの「N」のように動くことから『N型』と呼ばれています。
視線誘導：N型のチラシ実例
上図の例のようにN型に情報を配置することで、視線を誘導することができます。
N型の視線誘導は、WEB系よりもチラシやパンフレットなどの紙媒体に使われることが多いです。
視線誘導：大から小へ
小さい円形より大きい円形の方が画面上に現れる面積比が大きくなるため、視線が左から右へと移動します。
このようにコンテンツのサイズに変化をつけることで、視線を意図的にコントロールする方法もあります。
視線誘導：大小型のチラシ・アプリ/WEB実例
上図の例のように大小型に情報を配置することで、大きいものから小さいものへと視線を誘導することができます。
上図のInstagramの例では、検索結果で一部画像が大きく表示されることで、より閲覧される仕組みに大小型の視線誘導が利用されています。
視線誘導：同形・同色
均一に情報が配置されているとき、無意識に同形、同色を探し出し視線を移動させます。
このように、同じようなコンテンツの数が多いときに同形、同色で並べることで視線誘導の効果が表れます。
視線誘導：同形・同色型のチラシ・アプリ/WEB実例
上図のSpotifyのSearch画面では、曲のジャンルを全て同じ形で配置しています。
それぞれの情報の優先度は変わらないため同じ形で表示し、均一に並べています。
視線誘導：数の順序
数字を順に数えることは老若男女問わず、無意識に行う行為です。
情報に数字をつけることで無意識的に数字を数えさせ、視線を数字にそって移動させることができます。
視線誘導：数字型のチラシ・アプリ/WEB実例
上図の例のように、数字があることで意図的に順番に視線を誘導することができます。
まとめ
このように７つの視線誘導の方法を用いてレイアウトを考えることで、よりわかりやすいデザインにすることができます。
また、アプリなどでいうとデザインが見やすくなりユーザーの視線の先に課金に繋がるボタンを配置すれば、会社としてん売り上げも上がるかもしれません。
レイアウトについて学んだら、余白やタイポグラフィ、配色に対する理解を深めるとさらにデザインを洗練させることができます！
合わせて読みたい
フォントの種類と特徴・意味【デザインに使える】
【配色の決め方①】配色理論と配色の種類を徹底解説！
余白を使ってデザイン力をあげる３つのポイント 【パワポにも使える】
