ウェブページを見る目の動きは「F」パターン
![](https://i.gzn.jp/img/2006/04/19/pattern/f_reading_pattern_eyetracking_1.jpg)
つまり人間はページを見る場合、「F」の字を描きながらページ全体を見ているというわけ。
これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうで。
で、その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描くというわけ。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。
F-Shaped Pattern For Reading Web Content (Jakob Nielsen's Alertbox)
http://www.useit.com/alertbox/reading_pattern.html
第1段階:
訪問者は最初にページの一番上のコンテンツエリアを水平に視線移動させる。これが「F」の一番上の水平ラインになる。
第2段階:
次に訪問者はページを少し下に向かって視線移動させてから、再び第2の水平移動をする。この第2の水平運動は最初の水平運動よりも短い。これが「F」の字の上から2番目の短い水平ラインになる。
第3段階:
最終的にユーザーは左サイドから垂直下方向に向かってページをスキャンするようにして視線移動させる。時折ゆっくりとした速度で、そして機械的に見ていくとのこと。中にはまだら状に視線移動させる人もいるとのこと。いずれにしろ下方向に移動するので、これが「F」の最後の要素になります。
つまりページ全体のコンテンツのうち3分の1程度しかユーザーの目には触れていないとのこと。
なお、この図の色は何を示しているかというと、最も見られているのが赤色、次が黄色、最小が青色。全く見られていないのが灰色とのこと。
結果、累計パターンとしてはコンテンツの内容によって大体以下の3パターンに分類されるらしい。
パターン1:記事
![](https://i.gzn.jp/img/2006/04/19/pattern/f_reading_pattern_eyetracking_1.jpg)
企業のウェブサイトにある会社概要や一般的な記事の場合がこの画像のパターン。典型的な「F」パターンです。
パターン2:製品ページ
![](https://i.gzn.jp/img/2006/04/19/pattern/f_reading_pattern_eyetracking_2.jpg)
これもF字のパターン。一番上のタイトルを見てから製品写真を見て、あとは説明をざっくりと見ているようです。
パターン3:検索結果
![](https://i.gzn.jp/img/2006/04/19/pattern/f_reading_pattern_eyetracking_3.jpg)
各検索結果のタイトルを見ていくわけですが、トップページの上位しか見てません…。そして意外なのがあの「Google Adwords」、ちゃんと見てくれてるんですね、あれ。
おそらく、横書きだと文字を左から右、上から下へ読むという流れになるので、こういう結果が出てくると推測されます。
というわけで、ページの文章を端から端まできっちり読む人は極めて希ということのようです。まぁ興味があれば読んではくれるようですが、それでも全部をきっちり丁寧に読む人は少ない、と。特にEコマース関係だとこれはかなり重要なのではないでしょうかね。来てくれた人の目を引いて確実に購買へ結びつけるにはページに詳しい内容を載せるよりも何よりも、最初に見られる部分に気をつけて商品の紹介を行う必要がある、ということです。
同様にしてアフィリエイトのリンクや広告の場所に関しても、右に置くよりも左に置く方が効果的と言うことです。
※初回掲載時に引用元を書いていませんでしたので追記しておきました。
・関連記事
無料でウェブページ内のユーザーの行動を可視化してヒートマップを見せてくれる「ユーザーヒート」 - GIGAZINE
相手のビルの衛星写真がわかる無料アクセス解析「なかのひと ベータ版」 - GIGAZINE
どの都道府県から人が見に来るかがアクセス解析できる「ジオターゲティングブログパーツ」 - GIGAZINE
1秒で10万行を処理するフリーの超高速なログ解析ソフト「Visitors」 - GIGAZINE
Googleのアクセス解析サービス「Google Analytics」を使ってみました - GIGAZINE
ページのどこがクリックされたかを表示するアクセス解析「Crazy Egg」 - GIGAZINE
ユーザーの行動が一目で分かるアクセス解析ツール「User Insight」 - GIGAZINE
・関連コンテンツ
in メモ, ネットサービス, Posted by darkhorse_log
You can read the machine translated English article The movement of the eyes to see the web ….