menu

Webサイトにおけるユーザーの視線の動きを知る(1)

リニューアル

Webサイトの制作やリニューアルでは、ユーザーの動きを意識することが非常に大切です。どれだけ質の高いコンテンツを掲載していても、重要な情報が埋もれてしまったり、見つけにくかったりすればユーザーから高い評価を得ることはできません。

スマートフォンの普及によってユーザー1人ひとりのWebサイトの見方は多様化していますが、多くの場合、ユーザーは上から下へ向かって視線が推移します。なかでも代表的なのが以下のパターンです。

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

グーテンベルク・ダイヤグラムとは、特定の範囲内で同類の情報が均一のボリュームで配置されている場合の視線の推移パターンを定義したもの。対象範囲を4分割し、左上が「最初の視覚領域」、右上が「強い休閑領域」、左下が「弱い休閑領域」、右下が「終着領域」となります。

見る人はまず左上の領域の注目したうえで、右上・左下エリアをやや意識しながら、右下の終着領域に向かいます。その後、より詳細な情報を得るために右上・左下に再度注目するとされています。

あくまで4つの領域に同じ情報がある場合の考え方ですが、Webサイトに当てはめるなら、よりユーザーの意識が集まりやすい左上と右下にインパクトのある情報を配置し、やや意識の弱まる右上・左下には関連する補足情報を配置すると効果的かもしれません。

F型

Webサイトのユーザビリティ研究の第一人者であるアメリカのヤコブ・ニールセン博士が2006年に発表したのがF型理論です。約230名のモニターによる数千以上のWebサイトのアイトラッキング調査をもとにしたもので、Webサイトならではの視線の動きを示す理論として注目を集めました。

この理論では、Webサイトを訪れた人の視線は最上段の左上を起点とした後、右上に向かってフラットに推移するとされています。そこでページを少し下ってから、再度右方向に向かって水平に推移するのですが、ここで注目したいのが、この時推移する距離は、アルファベットの「F」のように、最上段を推移する距離よりも短くなるという傾向です。

その後さらにその傾向は強まり、ページ下部に近づくほどユーザーの視点は横方向へは動かず、左端を縦方向に走ります。実際のアイトラッキング調査でも、「F」の縦棒を形成するように、縦方向への直線が記録されました。

こちらもあくまで理論なので一概にはいえませんが、テキストの多いWebサイトでは下に近づくほど「流し読み」の傾向が強まり、重要度の高い情報ほど左上に集めた方がユーザーに届きやすいということは言えるのかもしれません。

リニューアルに関するご依頼、ご相談、お見積はこちら

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

アイコンもセットで、レスポンシブデザインにも対応。CSSフレームワーク6選

野球観戦をより楽しく、快適に。スポーツ界に先駆けたMLBのBeacon活用事例

関連記事

  1. Web担当者なら知っておきたい、今注目の3つのWebデザイントレ…

    Webデザインのトレンドは目まぐるしく移り変わるものですが、オウンドメディアなどの運営に携わるなら、…

  2. Webサイトにおけるユーザーの視線の動きを知る(2)

    同じ内容の記事や画像でもレイアウトが違えば見る人の印象は大きく変わってきます。Webサイトの制作やリ…

  3. メールマーケティングの意外なメリット&効果的な配信のタイミングと…

    Webサイトの制作・リニューアルでは、デザインやレイアウト、コンテンツなどと並んでユーザーへの周知・…

  4. Webサイトのリニューアルのメリット&デメリット

    Webサイトは企業と消費者を結ぶビジネスには欠かすことのできない要素です。コンテンツの品質を向上させ…

  5. あなたの会社のWebサイトは大丈夫? Webサイト改ざんのリスク…

    JPCERTコーディネーションセンターの調査によると、2015年に起きたWebサイト改ざんの被害は2…

  6. 業界別に見るドローン動画のWebコンテンツ活用事例(1)

    ドローンの登場によって空撮はとても身近な表現方法になりました。ドローンを使って撮影を行うためには国土…

  7. Webサイトとあわせて注目したい、制作会社選びの意外なポイント

    制作会社選びで失敗しないためには、制作会社自身のWebサイトとあわせて、制作会社からの連絡手段や対応…

  8. LPやデバイスシェアからリニューアル要件を検討。「Google …

    KGIやKPIの設定とあわせて、リニューアルの事前準備として欠かせないのがWebサイトの現状把握&分…

PICKUP

PAGE TOP