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. Webサイトの運用で起こりがちな3つのトラブル&対応方法について…

    Webサイトのデザインや機能はもちろん大切ですが、それ以上に大切なのが運用保守です。高い予算をかけて…

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

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

  3. 業界別に見るWebサイトのシネマグラフ活用事例

    GIFアニメーションや動画と静止画の組み合わせによって、被写体の一部だけに動きを与えるシネマグラフ。…

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

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

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

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

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

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

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

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

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

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

PICKUP

PAGE TOP