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. サービス開始から約14年。変化し続けるリスティング広告の「今」(…

    GoogleとOverture(現Yahoo! リスティング広告)のサービス開始から約14年が経った…

  2. 画像編集ソフトが苦手な方も安心。手軽なシネマグラフ作成ツール3選…

    画像の一部にピンポイントな動きを加えることによってアクセントをつけ、アイキャッチ効果を高めることがで…

  3. 2つ一緒に考えるのは間違い‥?UI/UXそれぞれの違い・注意点に…

    UI(ユーザーインターフェイス)とUX(ユーザーエクスペリエンス)はWebサイトの制作・リニューアル…

  4. Webサイトにおけるエモーショナル・ブランディング。ユーザーの感…

    Webサイトの完成度を高めるうえでは機能や利便性も大切ですが、その一方でユーザーに与える感情や印象・…

  5. 行動心理学でCVRを向上させる。Web担当者が知っておきたい3つ…

    日々Webサイトの改善に取り組むなか、「狙い通りのCVRになかなか到達しない」、「商品の魅力が本当に…

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

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

  7. 必要な数値だけを必要な切り口で確認。Google Analyti…

    コーポレートサイトやオウンドメディアを運営している企業のWeb担当者のなかには、効果測定ツールとして…

  8. ユーザーの行動をサーモグラフィのように可視化できるヒートマップ

    セッション数やコンバージョン数など、実際のユーザーの行動にもとづいた数値によって自社のWebサイトの…

PICKUP

PAGE TOP