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

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

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

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

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

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

バックナンバー: 2017年8月3日配信

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

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

前回は、人の視線の動きについて、代表的な3つの法則「グーテンベルク・ダイヤグラム」「Zの法則」「Fの法則」について解説しました。

  ▼前回の内容
  https://www.akibare-hp.jp/ml/think-about-reaction-up-placement1/

従来、ホームページの画面設計はこの3つの法則をベースとして、考えられてきました。

ところが、近年はスマートフォンが普及し、場合によっては、PCよりもスマホでのアクセスのほうが多いこともある状況です。

小さい画面の中で表現されるスマホサイトの設計では、従来の法則だけにとらわれない、スマホならではの視線の動きも検討する必要があります。

では、スマホサイトではどのような視線の動きを意識して、画像や文章、見出しなどを配置すればよいのでしょうか?

スマホサイトならではの視線の動き

PCは横長の画面であるのにたいし、スマホでは一般的に縦長の状態で画面を見ます。

小さい画面の中に情報が詰め込まれるため、縦に長くスクロールする画面構成が多くなります。

そのため、見る人の視線は自然と縦に動きます。PCでの閲覧時のように水平の動きが少ない分、縦方向へ動くスピードが速くなります。

また、画面が小さく閲覧エリアが狭いため、画面内に表示された情報を一気にとらえることができます。そして目立ったポイントに視線を動かしていきます。

前回ご紹介した法則の中では「Fの法則」が最も、スマホ閲覧時の視線の動きに近いといえます。

こういったスマホならではの傾向は今後も強くなっていき、やがてPCサイトの閲覧時の視線の動きにも影響を与えていくでしょう。

従来の法則を踏まえつつ、スマホならではの特性を意識した画面設計が必要となります。

アイキャッチで視線を誘導する

そういった「縦に速いスクロール」「画面を一気にとらえる」という特徴を踏まえると、スマホサイトのページ作りでは、

「縦に動いている視線を留まらせるポイントを作る」

ことが大切になります。

コンテンツの中の「これを見て欲しい」という情報がある箇所に、「アイキャッチ」を置いて、縦に速く動いている視線とスクロールする指を止めましょう。

アイキャッチとは「最初に人の目線をとらえるもの」という意味で、画像やアイコン、見出しなどがアイキャッチにあたります。

アイキャッチのないページ、強弱あるいは濃淡のないページでは、どんどん縦にスクロールされて読み飛ばされてしまいます。

単調にならないよう注意し、ここに目を留めて欲しいんだ、ということを意識して、画像やアイコン、見出しを配置しましょう。

新しいページを作ったら、PCでのプレビューだけでなく、必ずスマホでもページを開いて見ることが大切です。

スマホでどのように見えているか・視線の動きを上手くアイキャッチで留められているかなどを確認してみてくださいね。

以上、スマホサイトでの視線の動きを意識したページ作りについてお話しました。

ちなみに弊社のCMSでは、PCサイトが自動でスマホ表示に最適化される仕組みになっています。

PC上からでも管理画面で簡単にスマホサイトのプレビューが見れるようになっているので、弊社CMSをお使いの方はぜひご活用いただき、アイキャッチがとれているかなど、ご確認いただければと思います。

また、以下にスマホサイトの作り方をまとめておりますので、もしよろしければご一読ください(^^)。

  ▼スマホサイトの作り方~スマートフォンサイト作成入門~
  https://www.akibare-hp.jp/smartphone/

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

ミクシー(mixi)は、商売に利用できるのか?

今週は、いま話題の「mixi(ミクシー)」を取り上げてみます。 ミクシーとは? 先日、…続きを読む

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

着手可能数(10月23日現在)

  10月 11月 12月 1月
残り 15件 68件 80件 80件
10月は残り15件!申込みはお早めに

お申込みはこちら

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

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