目線の動きとWebサイトを流し読みされないために知っておきたい８つのツボ 「右寄せなんてもってのほか？」

    （読了時間5分）

 

こんにちは！ソシャマノートのこのみです。人の目線の動きには決まった動きがあると言われています。Webサイトでは、表示できる領域がディスプレイによって視野が限られているために、何をどこに配置するかで印象が全く変わりますよね・・・。しかも表示されている情報のほとんどが流し読みされていると聞いた事もあります（=o=;） このみもブログの執筆者ですし、記事を読み飛ばされたくない！（>_<）ので、今日はWebにまつわる基本的な人の目線の移動について調べ、どのような工夫ができるか考えてみました。

 

視覚的な意識は左から右へ進んでゆく

 

目線の話、の前に”視覚的”に記憶をどう蓄えているのかについてちょっと書きたいと思います。人は視覚的に時間を左から右へ進むと無意識のうちにイメージしているそうです。

 

 

私たちの生活の中には左から右へというイメージが反映されているインターフェースが数多くあります。DVDプレイヤーの操作（早送りは右、巻き戻しは左）、手続きを表す図解、カレンダーなど時間軸は左から右へ流れています。 Webサイトももちろん例外ではありません。仮にページ遷移を誘導するボタンが視覚的記憶の方向に逆らっていたらどうでしょうか？

 

きっと使いにくいし間違いやすい（>_<）　人の習性が先か、インターフェースの普及が先かは鶏と卵ですが、知らず知らずの間にWebでの操作でも左から右へ視覚的な記憶を更新しているのですね。

 

2次元では目線は左上から右下へ流れていく

 

1次元でなく2次元で考えた時には上下の動きが入り、基本的に人の目線（視覚的な意識）は左上から右下へと流れていきます。 Webサイトには、いくつかの代表的な目線移動パターンがあります。

 

グーテンベルグ ダイアグラム

テキスト量が多く複雑な構造のサイトの場合にこういった目線の移動が考えられます。 ユーザーは文章を左右に目線を移動しながら右下へ読み進みますが、基本的に全て読むことはありません。多くの場合は2～3行で読み飛ばして右下へ向かい斜めの移動をします。そのため重要なコンテンツは左右を横断する時に目につくよう画面中央に据える事がポイントとなります。

 

 F字パターン

F字パターンはWebサイトデザインをしている方であればご存知の方も多いと思います。（ブログ記事などは特にあてはまりそうです。）(*’ー’) このF字パターンはヤコブ・ニールセン博士の調査によって広く知られることとなりました。 ヤコブ・ニールセン博士が行った調査では232人の被験者を対象に数千サイトのアイトラッキングを行ったところ、どのユーザーもアルファベットのF字ににた軌跡をたどるという結果が出たそうです。

 

”引用元：http://www.useit.com/alertbox/reading_pattern.html” この調査では、 まず最初にユーザーはコンテンツの上部を水平に動き、次は少し目線を下げて左右にまた動きます。最後、ユーザーの目線はコンテンツの左側を上から下に動くという事がわかりました。また上の画像はヒートマップで目線がどこに集中したかを表したものです。赤く表示されたところは特に見られたところ、次に黄色→青、そして見られていないところには色がついていません。 この図を見る限りでは、画面上にある情報の半分以上は読み飛ばされ、少ない情報でその有用さを判断されているという事になります。

 

スマートフォンなどのモバイルでの見え方

 

上の２つのパターンは主に机の上でPCを開きWebサイトを見た時の話でした。移動中にサイトへアクセスし情報をチェックする場面も多いモバイル端末では、さらに気を付けるべき点はあるでしょうか？？ モバイル端末での目線の動きも基本的にはF字パターンで表せるのではないかと思っています。ただし幅が狭く上下の運動が激しいため、目線の水平移動が少なく上から下へと進むスピードが速くなります。 スクロールがたやすいスマートフォンなどでは、目につくものが無ければどんどん読み飛ばされてしまうでしょう。（このみもたまに読み飛ばしちゃっています）　または、視認性が悪かったり、単調な文章が続けばより顕著に読み流されてしまういます・・・（怖い）。

 

流し読みされないために、知っておきたい８つのツボ

 

ここまで調べてきて、やはり何の工夫もなしにユーザーにサイト内の重要なメッセージやコンテンツを伝えることは難しそうです。ではいったいどうすれば？？すぐに対応してくれるデザイナーがいれば、お願いするのが一番だと思いますが、誰でもできる工夫を考えてみました。今日はそれをまとめて終わりにしたいと思います。（｀・-・´）

• その１：配置に迷ったら人の視覚的な意識の仕方を思い出す（左上→右下）
• その２：ロゴやサービス名は左上に配置する
• その３：重要な情報、最も伝えたい情報はサイト上部（2段落ほど）に収める（目線の通り道に配置）
• その４：読み飛ばされたくない要素は画面の左または中央に配置する（目線の通り道に配置）
• その５：目線に留まるよう、アイキャッチの画像を差し込む（目線を惹きつける）
• その６：見出しを使い、段落を区切る（目線の流れを区切る）
• その７：文書を短くする（もたれさせない）
• その８：文書の中でポイントになるところは色を変える（少しでも記憶に残す）

 

 

ちょっとしたチェックリストとしてもこれらのツボは使えると思います。ボタンの配置やバナーの配置などの検討、文書等の構成に本記事が参考になれば幸いです。（このみももっとソシャマノートブログのことを考えねば！） 今回の記事は視覚的な記憶や目線についての記事でした。最後までご覧いただきありがとうございました！また次回もよろしくお願いします！

by このみ