menu

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

リニューアル

同じ内容の記事や画像でもレイアウトが違えば見る人の印象は大きく変わってきます。Webサイトの制作やリニューアルでは、他社の事例などを参考にすることも多いかもしれませんが、やはりユーザーの視線の動きはある程度理論的に押さえておきたいものです。引き続きWebサイトにおける視線の動きのパターンについてご紹介します。

Zの法則

見る人の視点は左上→右上→左下→右下の順でZ型に推移するため、重要な情報は真ん中よりも四隅に配置した方がいいと考えるのがZの法則です。

広告業界や流通業界では古くから定石の1つとなっている理論で、チラシなどの紙媒体や、スーパー、コンビニの商品棚、自動販売機などにも広く取り入れられています。

Webの世界でも、例えば「Yahoo! Japan」は、左上にユーザーの回遊を促す自社サービスへのリンクを配置し、右上スペースを利用して大型広告枠を提供するなど、この理論が活かされています。

また、近年のWebサイトでは、テキストの分量が多いWebサイトはヤコブ・ニールセン博士のF型理論が当てはまり、画像が増えるほどZの法則の傾向が強まると言われています。

これをふまえて、写真を多用するキュレーションメディアやブログメディアなどでは、ページの四隅にキーとなる情報を配置するのも1つの方法かもしれません。

サイズや関連性に連動する視線の動き

上から下への動きとあわせて、ユーザーの視線は文字・画像の大きさや、情報の関連性によっても変わります。見出し+画像で構成される多くのブログや記事の場合、見出しのフォントサイズを上げ、本文を要約する内容やアイキャッチとなる情報を見出しに入れるのは基本中の基本。それに加えてフォントサイズに黄金比(1:1.618)を取り入れると、より自然にユーザーの視点を誘導できるでしょう。

また、一般的にWebサイトを訪れた人が文字を読むスピードは他メディアよりも早く、その分無意識的に関連する情報を探すと言われています。例えば、フラットデザインを取り入れているWebサイトの場合、「商品名」、「価格」、「○○円」といった文字情報を等間隔で並べてしまいがちですが、「価格:○○円」といったように関連性のある情報は近接させるとユーザーの認識スピードが早まり、1セッションに対してより多くの情報を提供することもできるでしょう。

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

小野 良勝 代表取締役

投稿一覧

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

月商1億円以上のショップも。インバンド需要拡大が追い風になる「越境EC」のメリットとは?

Beaconでファンとの距離をより近く。FC岐阜「ALL GREEN」&福岡ソフトバンク「タカノメ」

関連記事

  1. ユーザー行動に隠されたストーリーを顕在化させるユーザビリティテス…

    「Google アナリティクス」やユーザーの行動を可視化するヒートマップなどを用いた分析はWebサイ…

  2. 注意点は4つ!!Webサイトリニューアルで考えたいSEOについて…

    現行サイトである程度成果が出ている場合、Webサイトリニューアルは必ずしも良い結果をもたらしてくれる…

  3. ユーザーに新鮮な驚きを与え、想像力を掻き立てる「シネマグラフ」と…

    Webサイトのアイキャッチ効果を高める方法の1つとして最近注目を浴びているのが「シネマグラフ」です。…

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

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

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

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

  6. リニューアルをスムーズに進め、運用にもメリットをもたらすデッドラ…

    Webサイトのリニューアルは社内外問わず多くの人が携わるプロジェクトです。リニューアルの要件を制作会…

  7. モックアップ作成も自分でできる、便利なWeb制作ツール3選

    WordPressやオンライン上の画像編集ソフトなどさまざまなツールが普及し、Webサイトの制作・リ…

  8. 多くの企業が取り入れているレスポンシブデザインのメリット&デメリ…

    スマートフォン市場が毎年2桁の成長を続け、ユーザーの過半数がスマートフォンを使ってインターネットにア…

PICKUP

PAGE TOP