あきばれホームページ作成
小さく始めて大きく育てるホームページ作成サービス

WEBマーケティング総合研究所

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

簡単ホームページ作成メルマガ

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

関連情報:初心者でも簡単!【ホームページの作り方講座】

バックナンバー: 2017年7月25日配信

この記事を読むのにかかる時間:約 5 分

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

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つの法則をベースとして、ホームページの画面設計は考えられてきました。

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

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

お客様を増やせる、低価格なホームページ作成サービスのサービス・料金

いよいよ4月21日、Googleのスマホ対応アルゴリズム変更が実施されます

大きな話題となっているのでご存知の方もいると思いますが、 いよいよ4月21日、Googl…続きを読む

ページの一番上へ | このページを印刷

着手可能数(12月19日現在)

  12月 1月 2月 3月
残り 20件 75件 80件 80件
12月は残り20件!申込みはお早めに

お申込みはこちら

※上記は標準パックの申込み状況表です。

※お急ぎの方はお電話(03-5957-1610)でお問合せ下さい。