皆さんはWEBサイトや広告物を見るとき、自分がどのように画面を見ているのか意識したことはありますか？
大体、人の視線は左上から右上に向かって流れていくことが多いとされています。
広告物とWEB媒体では多少違うところもありますが…
両者ともに言えることは、情報を伝える上で視線の流れというのは非常に重要ということです。
WEBサイトを製作する上で、ユーザーがどのようにコンテンツを巡っていくか、
それらはサイトのUIによって左右されるといっても過言ではありません。
ユーザーの好きなように閲覧しているように見えて、考えられたUIはユーザーに対し
- サイトが伝えたい情報
- ユーザーの必要としている情報
- サイトの構造を理解させる情報
上記のような様々な情報を、わかりやすいよう彼らに認識してもらえる画面作りをしています。
そのために必要となってくるのが、視線誘導という概念。
「視線誘導」とは、ユーザーの視線の流れを意図的にコントロールするために用いられる
方法の一つです。この技術をうまく利用することで、
画面を眺める視線の流れをユーザーに意識させたいコンテンツにスムーズに誘導できます。
ユーザビリティの優れたデザインつくるためにもとても重要な要素の一つと言えます。
そんな人の視線の流れを利用した視線誘導のテクニックを今回はご紹介したいと思います。
視線誘導のテクニック
その①「グーテンベルグ・ダイアグラム」
「均一に配置された情報を見る時、視線は左上から右下に流れていくように習慣づけられている」
という人の視線の仕組みを利用した考え方です。
活版印刷技術の発明者ヨハネス・グーテンベルグが提唱したことから名付けられました。
この考え方艶は4つのエリアに媒体を分割し、
左上を「最初の視覚領域」、右下を「終着領域」
右上を「強い休閑領域」、左下を「弱い休閑領域」
と定義しています。
画面が均等に並んでいるページなどに効果的な手法です。
その②「Ｚ型」
左上→右上→左下→右下とz型に情報の流れを配置する方法です。
WEBサイトなどではZの終わりに重要な情報（コンバージョンボタンなど）を配置してあげると、
商品の詳細（左）→実際のアクション（購買等）につながるボタン（右）のように
自然に導線が繋がり効果的といわれています。
その③「Ｆ型」
画像付きリストで構成されているサイトで利用されている考え方です。
F型は左上→右上→左に視線を戻し下に視線を移動→再度右方向に視線を移動…といった動作で
閲覧が進むので、見落とした内容を確認したい際などに重宝しやすいレイアウトです。
そのためテキストの多いページに向いています。
昨今ニュースアプリでよく利用されているのはそのためかもしれません。
その④「N型」
N型は左上→左下→右上→右下とNの形に視線を誘導するレイアウト方法です。
日本語の新聞や小説など、縦組みの書籍によく用いられています。
また、視線の誘導には上記のようなレイアウト以外のテクニックも重要となってきます。
レイアウト以外のテクニック
- ・数図の順番
- ユーザーは並びが多少不自然でも数字の順番に沿って読んでいくという特性があります。
少し変わったレイアウトでも、数字を利用することで
正しくユーザーの目線を導くことができる場合もあるかもしれません。 - ・写真や文字の大きさ
- 基本的に、人の視線は大きなサイズから小さなサイズへ移動します。
画像だけではなく、テキストに対しても同じです。
見せたいコンテンツへスムーズに誘導させるために、
コンテンツの大小のバランスに気をつけると、うまく視線を誘導できます。 - ・情報同士の距離
- 人は隣接した情報同士に視線を向ける傾向があります。
そのため次に読ませたい情報やまとめておきたい情報は近くに配置し、
スムーズに情報を得られるようにする必要があります。 - ・色や形
- 人は無意識に同一性のある色や形に視線を着目させます。
均一に並べた情報の中に、注目させたい情報や、
紐付けたい情報たちは同じ図柄や色を振ってあげることで、
自然とユーザーに情報の紐付けやグループ化を意識させることができます。 - ・動きのあるもの
- 人は動くものには自然と目が惹きつけられるようになっています。
昨今のwebサイトなどではカーソルなどにアニメーションがついたり、
さまざまな形で「動く」要素が取り入れられています。
このように、人が気持ちよく情報を得ることのできる画面作りには、様々な工夫が必要となってきます。
情報が溢れる昨今の社会で、ユーザーに伝えたい情報を汲み取ってもらうためには
伝わりやすい画面作りが大切になってくるかと思いますので、
「視線の流れ」は今後も意識して制作に取り組んでいきたいですね。
