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

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

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

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

お客さまを増やせるデザインサンプル

初心者むけHP作成サービス【あきばれホームページ】では、お客さまを増やせるデザインに力を入れています。

以下のページで、「お客さまを増やせるデザインサンプル」をいくつかご紹介しております。ぜひご確認ください。

部品型CMS【Buddy】というツールを利用していますので、ページの下の方もビジネスらしい、信頼感のあるデザインのホームページが作成可能です。

お客さまを増やせるデザインサンプル

10分で読める、身につく! ホームページ作成&活用術が、毎週届く!
8500社超の制作実績から生まれたノウハウが手に入るメールマガジンです。

ネット集客がみるみる分かる『経営塾』登録
無料

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

ライフネット生命の出口会長から学んだこと

ライフネット生命の出口会長 さて、先日、ライフネット生命の出口会長に当社までお越し頂…続きを読む

ページの一番上へ

自分で更新できる集客ホームページのサービス・料金
サービス申込前にお試しでトップページを作成します

お問合せ・ご相談をお気軽におよせください

このようなお問合せをお待ちしています

  • 他にどんなデザインがありますか?
  • デザインを自分で変更できますか?
  • 費用はいくらかかりますか?
  • 私の業種の事例はありますか?

こんな方はお気軽にご相談下さい

  • サイトが素人っぽいのできちんとしたHPを作りたい
  • いつまでたってもHPができなくて、困っている
  • サイトがあるだけで、ちっとも役に立っていない
  • Jimdo、Wix、WordPressが使いにくい
サイト内のページを検索