反応率アップ!視線の動きを意識して、配置を考えよう(その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をお使いの方はぜひご活用いただき、アイキャッチがとれているかなど、ご確認いただければと思います。以下にスマホサイトの作り方をまとめておりますので、もしよろしければご一読ください(^^)。