さて、今回は前回に続いて「ページ内の視線の動き」について解説していきます。
前回は、人の視線の動きについて、代表的な３つの法則「グーテンベル ク・ダイヤグラム」「Ｚの法則」「Ｆの法則」について解説しました。
従来、ホームページの画面設計はこの３つの法則をベースとして、考えられてきました。
ところが、近年はスマートフォンが普及し、場合によっては、ＰＣよりもスマホでのアクセスのほうが多いこともある状況です。
小さい画面の中で表現されるスマホサイトの設計では、従来の法則だけにとらわれない、スマホならではの視線の動きも検討する必要がありま す。
では、スマホサイトではどのような視線の動きを意識して、画像や文章、 見出しなどを配置すればよいのでしょうか？
◆スマホサイトならではの視線の動き
ＰＣは横長の画面であるのにたいし、スマホでは一般的に縦長の状態で画面を見ます。
小さい画面の中に情報が詰め込まれるため、縦に長くスクロールする画面構成が多くなります。
そのため、見る人の視線は自然と縦に動きます。ＰＣでの閲覧時のように水平の動きが少ない分、縦方向へ動くスピードが速くなります。
また、画面が小さく閲覧エリアが狭いため、画面内に表示された情報を一気にとらえることができます。そして目立ったポイントに視線を動かしていきます。
前回ご紹介した法則の中では「Ｆの法則」が最も、スマホ閲覧時の視線の動きに近いといえます。
こういったスマホならではの傾向は今後も強くなっていき、やがてＰＣサイトの閲覧時の視線の動きにも影響を与えていくでしょう。
従来の法則を踏まえつつ、スマホならではの特性を意識した画面設計が必要となります。
◆アイキャッチで視線を誘導する
そういった「縦に速いスクロール」「画面を一気にとらえる」という特徴を踏まえると、スマホサイトのページ作りでは、
「縦に動いている視線を留まらせるポイントを作る」
ことが大切になります。
コンテンツの中の「これを見て欲しい」という情報がある箇所に、「アイキャッチ」を置いて、縦に速く動いている視線とスクロールする指を止めましょう。
アイキャッチとは「最初に人の目線をとらえるもの」という意味で、画像やアイコン、見出しなどがアイキャッチにあたります。
アイキャッチのないページ、強弱あるいは濃淡のないページでは、どんどん縦にスクロールされて読み飛ばされてしまいます。
単調にならないよう注意し、ここに目を留めて欲しいんだ、ということを意識して、画像やアイコン、見出しを配置しましょう。
新しいページを作ったら、ＰＣでのプレビューだけでなく、必ずスマホでもページを開いて見ることが大切です。
スマホでどのように見えているか・視線の動きを上手くアイキャッチで留められているかなどを確認してみてくださいね。
以上、スマホサイトでの視線の動きを意識したページ作りについてお話しました。
ちなみに弊社のNextCmsでは、ＰＣサイトが自動でスマホ表示に最適化される仕組みになっています。
ＰＣ上からでも管理画面で簡単にスマホサイトのプレビューが見れるようになっているので、弊社NextCmsをお使いの方はぜひご活用いただき、 アイキャッチがとれているかなど、ご確認いただければと思います。