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

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

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

前回は、人の視線の動きについて、代表的な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/

ページの一番上へ

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

初めての方へ

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

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

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

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

ホームページ制作サービスのご案内

サービスのご案内

・初期費用:54,780円(税込)
・月額費用:5,390円(税込)
電話での操作サポート付きで、パソコン操作が苦手な方も安心。
自分で更新できるHPを運用できます。

サービス案内資料

資料請求

SEOに強い理由
・更新しやすいCMSの解説
・最短10日で完成する流れ
・初心者でも安心のHP制作
これらの内容を資料に詳しくまとめました。

資料請求

経営塾

ホームページ作成入門
ホームページ改善
コンテンツ作成ポイント
コンテンツの考え方
反応アップ文章術
デザインテクニック
更新テクニック
ホームページ集客術
アクセスアップ入門
SEOノウハウ
SEO事例集
メルマガ活用ノウハウ
ソーシャル活用
インターネットのトレンド情報
検索エンジンニュース
経営ノウハウのポイント
年度別バックナンバー
お問合せ・ご相談はこちら
資料請求
初めてHPを作る方へ
低コストなHPの作り方
あきばれホームページサービスはこちら

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

無料PDF

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

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

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

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