【エンジニア・マーケター向け】Webサイトを読むユーザーの目線の傾向「F字型パターン」とその対策
Webサイトを企画・運営していると必ず課題として挙げられるのが、
をどう改善するか？だ。
今回は、エンジニアやマーケターが押さえておきたい、Webサイトを読むユーザーの目線の傾向とその対策についてお伝えする。
- ユーザーは、Webサイト内のコンテンツをすべて読んでくれるわけではない。
- 読み手に読まれやすい見出し構成、書式にする。
UX（ユーザーエクスペリエンス）と、Webサイトの読まれ方
UXとは、User Experienceの略語で、ユーザー体験を意味する。
ユーザーエクスペリエンスは、製品やサービスの利用に関わるあらゆる要素を含んだ幅広い概念をさすが、Webの世界では「使いやすさ」や「使い勝手」と、そこから得られる「使い心地」や「感動」も含まれる。
ノーマン・ニールセン グループ（NN/g）が、数多くのWebサイトとそのUXを調査した結果、２００６年に確認されたのがWebサイトの読み方の１つが、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字型パターンでよくある誤解が、
- Webサイトは、常にF字型パターンで流し読みされる。
→常にF字型パターンで読まれるわけではない。Webサイトを流し読みする視線のパターンは、他にもある。 - F字型パターンは、UX上好ましい動きだ。
→F字型パターンは、悪く言えばユーザーにすべての情報を伝えきれていない。ビジネス上好ましいことではない。
といったものだ。
他にも様々な流し読みの視点パターンがあるが、今回は上記の点を踏まえF字型モデルを解説していこう。
Webサイトを見るユーザーの視点：F字型パターン
F字型パターンの特徴は、ユーザーの視点の行きやすさにある。つまり、
- 最初に、ユーザーは通常はコンテンツの上部を水平方向に読み進む。
- 少しページを下ってから再度、水平方向に読み進むが、ここで読まれる幅は最初よりは短いことが多い。
- ユーザーはコンテンツの左端部分を垂直方向に流し読みする。
といった視点で流し読みされやすいことを表したものだ。
さらに深堀していくと、WebサイトはF字型パターン
- ページのテキストの一番上の行に、視線が集まりやすい。
- テキスト各行の左側にある最初の数語は、同じ行のその後の語よりも多く読まれやすい。
ということだ。
それはなぜか？というと、
- ユーザーは、ページを最も効率的に読もうとする傾向にある。
- ユーザーは、読み始める時点でコンテンツにそれほど興味があるわけではない。
といった、ユーザーの心理的側面がある。
F字型パターンの問題点とその対策
F字型パターンの問題点は、
といった側面があることだ。ユーザー側は、当然重要な情報を読み飛ばしたか否かを知る由はない。
では、どうすれば重要な情報をユーザーに読んでもらえるようになるのか？
ページの最も重要なポイントを、冒頭の2～３までの段落に入れる
先述の通り、ユーザーが最も注目するのはページの上部にある情報である。
ページの最も重要なポイントを、冒頭の2～３までの段落に入れることで、よりユーザーに読まれやすくなる。
それを裏付けるデータとして、ノーマン・ニールセン グループ（NN/g）は、ある動物園のサイトで、どのくらいの割合のユーザーが本文テキスト中の各位置のパラグラフを見たかを調査した結果が以下の表である。
| テキストからの開始位置（Position from the start of the text） | その段落を見たユーザーの割合（Users who looked at the paragraph） |
| 第１段落 | 81% |
| 第２段落 | 71% |
| 第３段落 | 63% |
| 第４段落 | 32% |
翻訳・引用：Website Reading: It (Sometimes) Does Happen by Jakob Nielsen on June 24, 2013
ユーザーに分かりやすい書式にする
Web上で可能なフォントやHTMLタグを活用し、できるだけユーザーに分かりやすいコンテンツに書式を改善するのも１つの施策だ。
例えば、
- 見出しや小見出し（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