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. ユーザビリティの高い再生方法&ナビゲーションとは?動画コンテンツ…

    オウンドメディアやコーポレートサイトなどで動画を配信する場合、尺や表示サイズ、掲載位置などとあわせて…

  2. KGIを因数分解することによって明確になるKPI設定

    Webサイトのリニューアルの目標(KGI)を達成するために欠かせないCSF(Critical Suc…

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

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

  4. 絞り過ぎず、仮説を立てる。具体的な施策を決める「CSF設定」

    Webサイトをリニューアルする目的を具体的な数値に落とし込んでKGIを設定したら、次に取り組んでおき…

  5. Macユーザーは注目。日常業務を効率化できる4つのMac専用アプ…

    日常的な業務用PCとしてMacを使っている方が増えてきているのではないでしょうか。以前のMacは映像…

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

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

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

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

  8. リニューアルの意味・目的を数字に落とし込む「KGI設定」

    Webサイトをリニューアルするにあたってデッドラインの設定とあわせて必須となるのが、KGI(Key …

PICKUP

PAGE TOP