経営者向けのメルマガ『経営塾』

反応率アップ!視線の動きを意識して、配置を考えよう(その1)

今回は「視線の動きを意識したページ作り」について解説していきます。

WEBデザイナーでなくても、ホームページやブログの記事を作るとき、チラシや文書を作るときなどに

「この画像はどっち側に配置したら良いだろう」
「どんなふうに見出しや本文を配置したら、見やすくなるだろう」

と配置で迷うことがあるのではないでしょうか?

最適な配置に迷ったとき参考にしたいのは、見る人の「視線の動き」です。これを意識して画像や文章を配置すると、反応率が大きく変わることもあります。

ホームページやチラシに限らず、書籍や店舗の陳列棚などを見る人の視線の動きにはいくつかの法則があります。なかでも代表的なのは、次の3つです。

  1. グーテンベルク・ダイヤグラム
  2. Zの法則
  3. Fの法則

それでは、この代表的な3つの法則を詳しくご紹介します。 

グーテンベルク・ダイヤグラム

「グーテンベルク・ダイヤグラム」は、

均一に配置された情報を見る時、視線は左上から右下に流れていく

という考え方で、特に、雑誌などの紙媒体でよく使われています。

横書きの文章を読むとき、人間はまず、左上に目線を持っていき、そこがスタート地点となります。そしてゴール地点は右下です。

これは例えば、複数の画像がマス目のように均等に並んでいるページでも同様です。

大きく左上から右下に向かってななめに誘導される目線の動きを意識すると、

  • 重要な情報は、左上・真ん中・右下のいずれかに配置する

のが良いと言えます。

Zの法則

「Zの法則」は、

左上→右上→左下→右下といった順番で視線が動く

という法則です。

チラシをはじめとした紙の広告や、雑誌などから提唱され、ホームページやブログのデザインでもよく使われる法則です。

スーパーやコンビニの陳列棚・自動販売機などでもこの法則が取り入れられています。

Zの法則を意識すると、

  • 左上にコンテンツに引き込むための重要な情報を置く
  • 右上、左下に視線を止めるようなポイントとなる情報を置く
  • 右下にゴールへ誘導するための情報を置く

といった配置が考えられます。

Fの法則

最近、スマホサイトなどでよく用いられているのが

  • 左上からアルファベットのFの形を大きく描くように視線が動く

という「Fの法則」です。

Amazonなどのショッピングサイトやニュースアプリでもこの法則が活用されています。

Fの法則では

  • 最重要な情報は一番上に並べる
  • 左側に並んだ情報はよく見られる
  • 右側に並んだ情報は読み飛ばされる傾向がある

ということを踏まえると、

  • 重要な情報を画面上にFの形に配置する

ことで、訪問者に適切に情報を伝えられるでしょう。

ホームページやブログを作成するときには、ぜひこれらの視線の動きを意識して、タイトルや画像・本文などの配置を工夫してみてください。

なお、Fの法則だけで視線を動かすケースよりも、Zの法則で全体を把握してから、細かくFの形に視線を動かすケースが多いとされています。

弊社で作成するホームページもその辺りのことを意識して、ページの中の見出し・文章・画像を配置しています。よろしければ以下のデザインサンプルを配置の参考にしてみてください。

  ▼デザインサンプル集
  https://www.akibare-hp.jp/form/design/

最後になりますが、「グーテンベルク・ダイヤグラム」「Zの法則」「Fの法則」の3つの法則をベースとして、ホームページの画面設計は考えられてきました。

ところが、画面の小さいスマートフォンが普及したことにより、従来の法則だけにとらわれない視線の動きも考慮する必要が出てきています。

次回は、スマホサイトでの視線の動きを意識しながら、情報を伝えるための配置について考えてみたいと思います。お楽しみに。

ページの一番上へ

初めてのホームページ作成

初めての方へ

初めてのホームページを作成する際に失敗しない勘所をご紹介。自作であれ、制作会社に依頼する場合であれ、ここだけは押さえて欲しいポイントをまとめました。

費用を抑えたホームページ制作

低コストでHP作成をしたい

ホームページを作成予定の方に、低料金でホームページを作る方法をご説明します。なるべく低料金でホームページ作成をしたい方は、ぜひご覧ください。

お問合せ・ご相談はこちら

経営塾

ホームページ作成入門
ホームページ改善
コンテンツ作成ポイント
コンテンツの考え方
反応アップ文章術
デザインテクニック
更新テクニック
ホームページ集客術
アクセスアップ入門
SEOノウハウ
SEO事例集
メルマガ活用ノウハウ
ソーシャル活用
インターネットのトレンド情報
検索エンジンニュース
経営ノウハウのポイント
年度別バックナンバー

ホームページでお客さんを増やせる!
初心者むけガイドブック無料プレゼント

無料PDF

HP初心者むけ
集客できる
ホームページの作り方

本ガイドブックでは、初心者の方を対象に以下の3つをお話ししています。

  • どうすれば苦手な営業をせずに済むのか
  • どんなホームページを作れば、お客さんを増やすことができるのか
  • 低価格でホームページを作るにはどうすればよいか

集客でお悩みの方、ホームページ活用でお困りの方は、ぜひご一読ください。