• サイトマップ

レイアウトのための豆知識(2)

ここでは、 レイアウトをするにあたって知っていると大変得する知識についてご紹介します。 どれも基本的なことなのでしっかり身につけましょう！

ユーザの目の動きを考える

ある情報から次の情報へ移動するのに目の移動距離が長いと、 情報を探しにくくなります。また、 目に入ってくる情報の量も多いので目が疲れてしまい、 読みにくいと感じてしまうことになります。 これはある一点を見ていても回りの情報を拾ってしまうという目の特性によるものです。 関連する情報は近くにまとめ、視線をうまく誘導するような、 ユーザの目の動きを考慮した計画的なレイアウトが必要でしょう。

視線は左から右へ移動する

人の視線は一般的に左から右へ流れやすいという法則があります。

スーパーの魚をみるとすべて左向きで置かれています。 お札の人物画は左向きですし、西洋絵画では左から 光が当たることが多いと言われています。 これは視線を受け止めるように物を配置すると認識しやすいからです。 このように、人は無意識のうちにこの法則を生活のなかで活用しています。

出版物の誌面上などでは左から右へ、 上から下へ視線が移動し、全体として左上から右下の方向に視線は流れるといわれています。 よってエデュトリアルデザイン(本のデザイン) の世界ではレイアウトをする場合もこの性質をふまえて デザインすることが常識となっています。 （ただし、日本語は伝統的に右から左に書く言語なのでその名残りがあるものもあります。）

これはWebでも応用できる考え方で、 実際多くのサイトで左上にロゴを配置するなどの工夫が見られます。 この法則をふまえてレイアウトすると、 スムーズにユーザへ情報を伝えることができます。 それはつまりユーザにとって分かりやすい、読みやすいということなのです。

Webの特性による、ユーザの視線移動

上で紹介した通り、基本的に視線は左から右へ流れます。 しかしWebの場合、一概にそうはいえない場合もあるのです。

Webには紙などの印刷物とは違う、以下のような特性があります。

• Webは目が疲れやすく、ユーザはじっくりと文を読むこと嫌う
• ほとんどのユーザはページの中で目立つタイトルや画像、
  見出しなどでページの内容を把握しようとする。

このような特性から、ユーザの視線はタイトルや画像、 見出しなどの目立つ要素に集中する傾向にあります。 左から右へという法則にこの傾向がからみ、Webでの視線移動は作られているのです。

よってWebでのレイアウトは、左から右へという流れをふまえつつ目立つ要素を配置する、 その要素に一番伝えたい情報を与えるなどの工夫が重要になってきます。