ユーザーをうまく誘導しよう！Webデザインで意識したい視線の動き方3パターン

2.大きなものから小さなものへの視線の動き

人は、大きなものと小さなものが並んでいる場合はまず最初に「大きなもの」に目がいきます。

上図①は、タイトルと本文が同じ大きさのテキストで書かれています。
一方、②はタイトルが本文よりも大きなテキストで書かれています。
この2つの図を見てもわかるように、まず最初に大きく書かれたテキストに目がいきます。

ユーザーは多くの情報を処理する際は目に止まるポイントがなければ読み飛ばしてしまいがちです。
ホームページからどのような情報を取得してほしいのかひと目でわかるように、配置している要素の大きさにメリハリをつけるようにしましょう。

近くにあるものへの視線の動き

人は、目に止まった要素の近くにある要素に視線を移動させます。
これは、あるひとつの要素を見ている時に、近くに配置されている要素はすでに視野に入っているため、視線を移動させやすいからです。

上図①は、すべての要素を等間隔に配置しています。
一方、②は関連のある要素を近づけて配置しています。
この2つの図を見てもわかるように、関連のある要素は近くに配置した方が情報を把握しやすくなります。

ユーザーに同時に読んで欲しい要素や、関連のある要素は近くに配置するようにしましょう。

3.同じ形・色を追う視線の動き

人は、同じ形・色をたどって視線を移動させる傾向にあります。
特徴的な形や色を使用することで、デザインで視線の流れを作ることができます。
また、同じ色・形を使用することで、ページ全体に統一感を持たせることもできます。

ユーザーに注目してほしい要素に色や形でポイントをつけて、まとまりがありつつ視線に無理のないホームページを作成しましょう。

まとめ

視線の動きは、無意識のものです。
この動きを理解してページを制作すると、ユーザーの視線を誘導してページが「ゴール」とする場所へスムーズに導くことができます。
これらの手法は、ユーザーにとっても読みやすいページを構成することができるため、ユーザビリティ向上にも役立ちます。
ぜひホームページを制作する際の参考にしてみてはいかがでしょうか。

このニュースを読んだあなたにオススメ

HTMLとは〜初心者でも分かるホームページの基礎技術〜
Webデザインに役立つ無料のツール・デザイン集まとめ
ネットショップのデザインで意識するべき10個のポイント

このニュースに関連するカリキュラム

HTMLとは〜初心者でも分かるホームページの基礎技術〜

ホームページはタグとよばれるプログラムで書かれています。それをブラウザが処理し表示することで、レイアウトされたり、リンクが機能したりします。本カリキュラムではタグと、その1つであるHTMLを解説します。