視線を意識することがレイアウトのヒントに ｜ SiTest (サイテスト) ブログ

「目は口ほどに物を言う」ということわざがありますが、ウェブサイトを設計する時に考慮しなければならないのが「ユーザーはどのようにウェブサイトを見るのか？」ということです。
視線の動きを理解していないと、重要なコンテンツが埋もれてしまったり、読み飛ばされてしまったりするような構成にしてしまう可能性があります。
 
ではユーザーは一体どうウェブサイトを見ているのでしょうか？

今回はその疑問にお答え致します。

 
視線が移動する時によくある動き方のパターンを把握して、ユーザーにどう見せていくか踏まえてウェブサイトを作っていきましょう。
 

 
 

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

 
グーテンベルグダイヤグラムとは、「均一に配置された情報を見る時、視線は左上から右下に流れていくように習慣づけられている」という考え方で、15世紀に活版印刷技術の発明者として活躍したヨハネス・グーテンベルグが提唱しました。
 
この視線の流れは本を読む時に無意識に体に擦り込まれているもので、「読書重力」(左から右へ、上から下へ引っ張られて読んでいくこと)とも呼ばれます。
(※縦書きが主流である日本語の本だとこの感覚はあまりないかもしれませんが、横書きである欧米文書ではこの習慣が根付いています。)
 
グーテンベルクダイヤグラムでは見る対象物を4つの領域に分割して考えます。
 
1.最初の視覚領域(上部左側)
2.終着領域(下部右側)
3.強い休閑領域(上部右側)
4.弱い休閑領域(下部左側)
 

 
「1.最初の視覚領域」→「2.終着領域」へ視線を動かしながら、「3.強い休閑領域」「4.弱い休閑領域」を左から右へ横見していくのがグーテンベルクダイヤグラムの考え方です。
ユーザーは読み飛ばしてしまうことも多く、重要な要素をこの斜めのラインに入れておくかがポイントです。
 
グーテンベルクダイヤグラムの注意点として、あくまで「均一に配置された情報を見る時」に限定されます。
例えば他の領域と異なり明らかに目立つコンテンツが右上(強い休閑領域)にあった場合は、そこが最初の視覚領域になり読まれ方は変わってきます。
 
また、考え方自体は印刷物により強く当てはまる傾向があり、ウェブサイトでは後述する2つの法則の方が有名でしょう。
 
 

Zの法則

 
Zの法則とは、ユーザーの読む順番(視線の動き)がアルファベットの「Z型」を描くという考え方です。
左上から始まり、右上、左下、右下の順番で視線が動くため、そのライン上に重要なコンテンツを配置することでユーザーに見てもらえる可能性を高めます。
 

 
グーテンベルクダイヤグラムの視線移動と似ている部分もありますが、印刷物だけでなく画像が多く配置されている場合にはこのような傾向が強まると言われています。
 
 

Fの法則

 
Zの法則とは、ユーザーの読む順番(視線の動き)がアルファベットの「F型」を描くという考え方です。
左上から始まるのは他の考え方と変わりませんが、左上から右上に視線を移動させた後、次は少し下に向かって視線を移動させてまた同じように左から右に見ていきます。
その後は下に向かって読み進めていくのがFの法則の特徴です。
 

 
ユーザビリティ研究の第一人者であるヤコブ・ニールセンが2006年に発表した研究結果によれば、ウェブサイトではFを描くように目を動かすということが分かっています。
 

参照：F-Shaped Pattern For Reading Web Content
 
商品説明など文字が中心のウェブページでは、特にこの傾向が強く表れます。
 
 

重要なコンテンツの配置

 
先述した3つの視線パターンで全て共通しているのが、最初に見る場所が左上であることです。
左上から右にかけてのラインは非常に見られやすいことが想定されますので、重要なコンテンツはできるだけ上に持ってくる方が良いでしょう。
 
写真などを用いる場合はZ型パターンになりやすいので、動線部分を下のラインにうまくレイアウトすることで遷移がスムーズになります。

ウェブページの一番上からやや下の領域はホットナビゲーションエリアと呼ばれ、グローバルナビゲーションやバナー・リンクを置くと効果的です。
 

 
ブログや商品説明ページなどテキストエリアが多い場合は、F型パターンのライン上にコンテンツを配置すると視線を集めやすくなります。
ユーザーの視線の動きを意識して、重要なコンテンツや目を止まらせる画像などを配置することでウェブページの内容がより生きてくるでしょう。

また、見出しなどを適切に配置して、Fの横線になるようにすればユーザーにここから後の情報は何を示しているのか伝えやすくなります。
 
 

ユーザー目線に立った構成

 
ユーザーの視線を踏まえてレイアウトを作っていく際に気をつけなければならないのが、情報を一箇所に固めすぎてごちゃごちゃになってしまうことです。

確かに視線の流れを踏まえると重要なコンテンツはライン上に置くのがベターですが、かと言ってそれにこだわりすぎてしまうと上部に情報が集中してしまい、スクロールする意味がなくなってしまうようなウェブページになってしまいます。
 
まずは情報のストーリー構成や優先順位に沿ってウェブページを展開していき、その中で重要なポイントは特に意識して視線の流れに合わせると良いでしょう。
 
ウェブサイトの制作者、運営者側からすると「あれもこれも載せたい！」と情報を伝えることに集中してしまいがちですが、「ユーザーはどのような情報を欲しているのか？」「ユーザーがどういう順序で見たら読みやすいか？」といった視点を忘れないでください。
 
 

視線解析は SiTest にお任せください

 
ウェブサイト上で視線の流れを意識した設計をした後、本当にそのレイアウトでユーザーが想定通りに閲覧しているかチェックしないと効果は測定できません。

そこでご活用いただきたいのが、ウェブサイトを解析・改善するためのツールとしてご提供している「 SiTest 」です。
 
SiTest には多数の機能が搭載されていますが、中でも「マウスグラフィ®」と「ゲイズプロット」の2つはユーザーの視線解析に向いています。

どちらもユーザーが動かしたマウスの軌跡をトラッキングしてそのデータを視覚化できるヒートマップやゲイズプロットに表示していますが、そのマウスの軌跡は視線の動きと強く連動しています。
 
 

マウスグラフィ®で視線解析

 

 
マウスグラフィ®はユーザーのマウスの動きをサーモグラフィのように色で塗り分け、赤くなればなるほど滞在時間が長く、青くなればなるほど滞在時間が短いことを表現しています。

読み飛ばされている箇所は色が薄く(あるいはそもそも色が塗られず)表示されてしまうので、そこに重要なコンテンツが紛れている場合は改善する必要があります。
 
思ったようなZのライン、Fのラインになっていない場合は、コンテンツの順序を入れ替えたり、レイアウトを再度変更したりして、読まれるような構成を心がけてください。
 
 

ゲイズプロットで視線解析

 
ニールセンの研究結果では、ウェブサイトの閲覧時にはF型になる傾向にあることを伝えていますが、これはあくまで全体的な傾向にしか過ぎません。

考察でも記載されていますが、Fの形(特に2本目の横線の位置)はウェブページによってバラバラですし、商品の金額など数字が注目を集める場合はもっと直接的な視線移動になると伝えています。
 
そこで視線解析をする上でもう1つ活用していただきたい機能がゲイズプロットです。
SiTest のゲイズプロットは見た順番を数字と線で、滞在時間を色で表現しています。
 

 
ゲイズプロットを再生していくと実際のユーザーがどのような順番でウェブページを見ているのか観察することができます。
「Z型」や「F型」のように横に視線が流れていくことがなければ読み飛ばされてしまっている可能性も高いので、そこに目立つコンテンツを置くなり要素を左に寄せてしまうなり対策を取りましょう。
 
 

視線パターンは傾向であり真実ではない

 
SiTest での解析方法をご紹介しましたが、それはレイアウトのパターンを信じ過ぎないという警鐘でもあります。

グーテンベルクダイヤグラムも含め、視線移動はあくまでパターン化された＝一般化されたものでしかなく、ウェブページのコンテンツによっては大きく異なる場合も多々あります。
 
あくまでレイアウトのパターンはヒントですので、設計した後はとにかく解析してその仮説を検証していきましょう。

それでは次回をお楽しみに！