今回は「視線の動きを意識したページ作り」について解説していきます。
ＷＥＢデザイナーでなくても、ホームページやブログの記事を作るとき、チラシや文書を作るときなどに
「どんなふうに見出しや本文を配置したら、見やすくなるだろう」
と配置で迷うことがあるのではないでしょうか？
最適な配置に迷ったとき参考にしたいのは、見る人の「視線の動き」です。これを意識して画像や文章を配置すると、反応率が大きく変わることもあります。
ホームページやチラシに限らず、書籍や店舗の陳列棚などを見る人の視線の動きにはいくつかの法則があります。なかでも代表的なのは、次の３つです。
- グーテンベルク・ダイヤグラム
- Ｚの法則
- Ｆの法則
それでは、この代表的な３つの法則を詳しくご紹介します。
グーテンベルク・ダイヤグラム
「グーテンベルク・ダイヤグラム」は、
という考え方で、特に、雑誌などの紙媒体でよく使われています。
横書きの文章を読むとき、人間はまず、左上に目線を持っていき、そこがスタート地点となります。そしてゴール地点は右下です。
これは例えば、複数の画像がマス目のように均等に並んでいるページでも同様です。
大きく左上から右下に向かってななめに誘導される目線の動きを意識すると、
- 重要な情報は、左上・真ん中・右下のいずれかに配置する
のが良いと言えます。
Ｚの法則
「Ｚの法則」は、
という法則です。
チラシをはじめとした紙の広告や、雑誌などから提唱され、ホームページやブログのデザインでもよく使われる法則です。
スーパーやコンビニの陳列棚・自動販売機などでもこの法則が取り入れられています。
Ｚの法則を意識すると、
- 左上にコンテンツに引き込むための重要な情報を置く
- 右上、左下に視線を止めるようなポイントとなる情報を置く
- 右下にゴールへ誘導するための情報を置く
といった配置が考えられます。
Ｆの法則
最近、スマホサイトなどでよく用いられているのが
- 左上からアルファベットのＦの形を大きく描くように視線が動く
という「Ｆの法則」です。
Amazonなどのショッピングサイトやニュースアプリでもこの法則が活用されています。
Fの法則では
- 最重要な情報は一番上に並べる
- 左側に並んだ情報はよく見られる
- 右側に並んだ情報は読み飛ばされる傾向がある
ということを踏まえると、
- 重要な情報を画面上にＦの形に配置する
ことで、訪問者に適切に情報を伝えられるでしょう。
ホームページやブログを作成するときには、ぜひこれらの視線の動きを意識して、タイトルや画像・本文などの配置を工夫してみてください。
なお、Ｆの法則だけで視線を動かすケースよりも、Ｚの法則で全体を把握してから、細かくＦの形に視線を動かすケースが多いとされています。
弊社で作成するホームページもその辺りのことを意識して、ページの中の見出し・文章・画像を配置しています。よろしければ以下のデザインサンプルを配置の参考にしてみてください。
▼デザインサンプル集
https://www.akibare-hp.jp/form/design/
最後になりますが、「グーテンベルク・ダイヤグラム」「Ｚの法則」「Ｆの法則」の３つの法則をベースとして、ホームページの画面設計は考えられてきました。
ところが、画面の小さいスマートフォンが普及したことにより、従来の法則だけにとらわれない視線の動きも考慮する必要が出てきています。
次回は、スマホサイトでの視線の動きを意識しながら、情報を伝えるための配置について考えてみたいと思います。お楽しみに。
