【エンジニア・マーケター向け】Webサイトを読むユーザーの目線の傾向「F字型パターン」とその対策

【エンジニア・マーケター向け】Webサイトを読むユーザーの目線の傾向「F字型パターン」とその対策

Webサイトを企画・運営していると必ず課題として挙げられるのが、

サイトの見やすさ、使いやすさ

をどう改善するか?だ。

今回は、エンジニアやマーケターが押さえておきたい、Webサイトを読むユーザーの目線の傾向とその対策についてお伝えする。

  • ユーザーは、Webサイト内のコンテンツをすべて読んでくれるわけではない。
  • 読み手に読まれやすい見出し構成、書式にする。

UX(ユーザーエクスペリエンス)と、Webサイトの読まれ方

UXとは、User Experienceの略語で、ユーザー体験を意味する。

ユーザーエクスペリエンスは、製品やサービスの利用に関わるあらゆる要素を含んだ幅広い概念をさすが、Webの世界では「使いやすさ」や「使い勝手」と、そこから得られる「使い心地」や「感動」も含まれる。

ノーマン・ニールセン グループ(NN/g)が、数多くのWebサイトとそのUXを調査した結果、2006年に確認されたのがWebサイトの読み方の1つが、F字型パターンだ。

参考:F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile) by Kara Pernice on November 12, 2017

F字型パターンとは?

F字型パターンとは、Webサイトで流し読みされやすいユーザーの視線移動をヒートマップで解析した結果得られたものだ。

F-Shaped Pattern of Reading on the Web
引用元:F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile)

F字型パターンでよくある誤解が、

  • Webサイトは、常にF字型パターンで流し読みされる。
    →常にF字型パターンで読まれるわけではない。Webサイトを流し読みする視線のパターンは、他にもある。
  • F字型パターンは、UX上好ましい動きだ。
    →F字型パターンは、悪く言えばユーザーにすべての情報を伝えきれていない。ビジネス上好ましいことではない。

といったものだ。

他にも様々な流し読みの視点パターンがあるが、今回は上記の点を踏まえF字型モデルを解説していこう。

Webサイトを見るユーザーの視点:F字型パターン

F字型パターンの特徴は、ユーザーの視点の行きやすさにある。つまり、

  1. 最初に、ユーザーは通常はコンテンツの上部を水平方向に読み進む。
  2. 少しページを下ってから再度、水平方向に読み進むが、ここで読まれる幅は最初よりは短いことが多い。
  3. ユーザーはコンテンツの左端部分を垂直方向に流し読みする。

といった視点で流し読みされやすいことを表したものだ。

さらに深堀していくと、WebサイトはF字型パターン

  • ページのテキストの一番上の行に、視線が集まりやすい。
  • テキスト各行の左側にある最初の数語は、同じ行のその後の語よりも多く読まれやすい。

ということだ。

それはなぜか?というと、

  • ユーザーは、ページを最も効率的に読もうとする傾向にある。
  • ユーザーは、読み始める時点でコンテンツにそれほど興味があるわけではない。

といった、ユーザーの心理的側面がある。

F字型パターンの問題点とその対策

F字型パターンの問題点は、

ユーザーが、発信側が伝えたい重要な情報を、発信者が意図しない形で読み飛ばしてしまうことがある

といった側面があることだ。ユーザー側は、当然重要な情報を読み飛ばしたか否かを知る由はない。

では、どうすれば重要な情報をユーザーに読んでもらえるようになるのか?

ページの最も重要なポイントを、冒頭の2~3までの段落に入れる

先述の通り、ユーザーが最も注目するのはページの上部にある情報である。

ページの最も重要なポイントを、冒頭の2~3までの段落に入れることで、よりユーザーに読まれやすくなる。

それを裏付けるデータとして、ノーマン・ニールセン グループ(NN/g)は、ある動物園のサイトで、どのくらいの割合のユーザーが本文テキスト中の各位置のパラグラフを見たかを調査した結果が以下の表である。

テキストからの開始位置(Position from the start of the text) その段落を見たユーザーの割合(Users who looked at the paragraph)
第1段落 81%
第2段落 71%
第3段落 63%
第4段落 32%

翻訳・引用:Website Reading: It (Sometimes) Does Happen by Jakob Nielsen on June 24, 2013

ユーザーに分かりやすい書式にする

Web上で可能なフォントやHTMLタグを活用し、できるだけユーザーに分かりやすいコンテンツに書式を改善するのも1つの施策だ。

例えば、

  • 見出しや小見出し(Hタグ)を活用する。SEOの観点からも重要。
  • 見出しや小見出しは、最も重要な情報を伝えるキーワードで始めるようにする。
  • 関連のあるコンテンツ同士は、枠線で囲んだり背景の色を変えたりしてグループ化する。
  • 重要な語句は太字にする。
  • 不要な言葉を削除する。

といった施策を行うことで、少しでもユーザーによって読みやすいコンテンツに改善することが可能だ。

翻訳・引用:Headings Are Pick-Up Lines: 5 Tips for Writing Headlines That Convert

必要のないコンテンツは削除する

最後に、ユーザーが読み疲れしないように必要最小限のコンテンツのみ記載し、不要な情報を削除したほうが良い。

特にモバイル向けのコンテンツについては、余白を埋めるコンテンツは不要だ。

翻訳・引用:Mobile Content: If in Doubt, Leave It Out

最後に

Webサイトは、ページのレイアウトや書式を改善することで、少しでもユーザーの興味を惹き付けることは可能だ。

特に、発信側が伝えたいキーワードにはWeb向けの適切な書式を適用し、ユーザーがF字型に流し読みするときに偶然注視するかもしれない語に視点が止まってしまわないように工夫したほうが良い。

さらに、F字型などの流し読みのパターンや、UXに関する情報を詳しく知りたい場合は、以下を参照するとよいだろう。

How People Read on the Web: The Eyetracking Evidence