Webデザインで考える『レイアウトにおける視線誘導』の基本とは?

レイアウトにおける視線誘導 WebDesign

この記事で説明するWebデザインで考える『レイアウトにおける視線誘導』の基本を理解することで、製作時のレイアウトは考えやすくなると思います!

さっそくですが、ユーザーがWebサイトを見た時の視線の流れは無意識なものばかりではありません。

要素をどのようにレイアウトするかによって、こちらが意図するような見せ方へと誘導させることができるのです。

スポンサーリンク

視線の動線を考える

あらかじめサイトの目的と目標を設定し、ユーザーがどう行動するのかユーザーにどのような体験をして欲しいのか動線を考えることが大事です。

ここでユーザーを誘導する方法は3つご紹介しますが、以前の記事で「レイアウトの4つの原則」というのがあります。

この原則を組み合わせることで、ユーザーの注目をこちらの意図するようなレイアウトに誘導させることもできると思います。

グーテンベルク・ダイヤグラム

グーテンベルク-ダイヤグラム

人は何らかの情報を見るときに、左上から右下方向へ視線が流れるように移動していきます。

このような視線の誘導の方法は、元々はエディトリアルデザイン(ポスターや書籍などの出版物のデザイン)から派生したものです。

現代へ続く活版印刷の発明をしたグーテンベルクにちなんで上記の様な誘導法はグーテンベルク・ダイヤグラムと呼ばれています。

CreaveGraffiti

グーテンベルク・ダイヤグラムは、1つの画面を4つのエリアに分けて考えます。

ユーザーの視線の動きは左上の「最初の目に入るエリア」から右下の「最終エリア」へ移動します。

そのため、要素をレイアウトする場合には左上・右下に重要な要素を配置するという考え方です。

Webサイトにおいても、この考え方は有効です。

多くのWebサイトでは、サイトのロゴが左上の「最初に目に入るエリア」に配置されているのはこの様なことからです。

Z型

Z型

ユーザーの視線が左上から右へ移動し、次に右の終点から左下へ、その後左下から右へと移動する視線の流れが、アルファベットのZに似ているため「Z型のレイアウト」などと呼ばれています。

この様に「左上→右上→左下→右下」とZの形にユーザーの視線が移動する視線誘導の動線上に重要な要素を配置していきます。

上記のサイトではロゴからナビゲーションへ視線が移動し、その下のカルーセルのエリアを見て、さらにその下にある特集のバナーを横に見ていくといったコンテンツの視線誘導になっています。

この手法はコンテンツを大きく見せたい、プロモーションサイトなどでも有効な手法です。

また、この手法はWebサイトだけでなく、スマートフォンアプリでもよく用いられています。

F型

F型

F型のレイアウトは、ここ最近のECサイトやブログなどで使用されている誘導方法で、Webサイトに一番親和性が高いレイアウトになります。

スマートフォンサイトやアプリなども、この様なF型の視線誘導を意識して作られているページが多く見られます。

左上に重要な要素を配置するのはどのレイアウトでも同様で、重要な要素はページの上部に水平に配置すると効果的に見せることができます。

上記のサイトでは記事一覧部分にF型レイアウトを用いています。

記事のサムネイルを見たあとは記事のタイトルを見て…といった様なレイアウトです。

まとめ

ここ最近のWebサイトでは、多くがF型のレイアウトを取り入れています。

Webサイトのレイアウトに迷った際は、ひとまずF型を意識してレイアウトをしてみるのも良いのかもしれません。

以上のように視線誘導を意識することで、レイアウトのどの場所に重要なコンテンツをおけば良いのかわかるようになってきます!

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
WebDesign
スポンサーリンク
シェアする
CreaveGraffitiをフォローする
Creavegraffiti | Webマーケティング情報

コメント

タイトルとURLをコピーしました