スマホでは大切　目指せ！スクロールされるデザイン

あなたのWebサイトに訪れるユーザーはどのようなデバイスを利用していますか。現代では、toCのサイトだけではなくBtoBのサイトでもいまやスマホで訪れる人が大半ではないでしょうか。

このようなテーマでお話しするずいぶん前からスマートフォン対策の重要性は叫ばれています。PCサイトをスマートフォンサイズにすると縦の長さがどうしても長くなります。実際に、Web担当者としてユーザーに下の方の情報まで見てもらうためにはどのようなことをしていますか？たとえば、次のような対策を行っている方は多いでしょう。

• 縦に長くなりすぎないようにする
• 縦に長いページをいかにスクロールさせてページ下部までみてもらうか

スマホで見る人が多い今、長いページが当たり前になってきていますが、スマホ対策の中でも「ページ下部まで情報を見てもらうには」という課題について、上記2点の実践方法をわかりやすく解説していきます。Webサイトにおけるスマホレイアウトのひとつのアイデアとして共有していきますのでぜひご参考にしてください。

縦に長くなりすぎないようにする

Web上のスマホレイアウトを考える場合、縦に長くなりすぎないようにする方法としては、次の3つの方法が有効です。

アコーディオン対応

長いコンテンツは、タップで表示するアコーディオン対応にしてしまいましょう。アコーディオン対応にすれば、連続して続く長いコンテンツでも、ポイントを押さえながら全体像を先に伝えることができます。

コンテンツの全体像の開き方としては、任意の場所をタップすることで開示されます。しかし、タップによって任意の場所が開くことで全体的に縦に長くなってしまう場合、他の開示されていたコンテンツが閉じるといった動作の工夫が必要です。

詳細情報は別ページにする

トップページで全体像を伝えようとして、縦に長いページレイアウトになっているWebサイトを多く見かけます。確かに、トップページでは伝えたいことを伝える必要があるのですが、詳細については、別ページに移動してもらって見てもらうようにしましょう。

詳細情報は、別ページにした方が縦長になることを防ぎ、コンテンツの内容に集中してもらいやすくなります。

同種のカセットはフリックにする

Webサイト上でたくさんの実績を紹介したいと思うことはないでしょうか。その場合は、フリックを利用したレイアウトを採用してみましょう。パソコン上でデザインを考えていると、どうしてもフリックがなじみのないものに思えてしまいます。しかし、利用デバイスがスマホであることを考えた場合、全く違和感がありません。

フリックの特徴として覚えておきたいのは、その動作を行わなければ次のコンテンツは表示されないということです。そのため、コンバージョンコンテンツでの採用には向いてないということです。

縦スクロールをうながす工夫

スマホレイアウトでスクロールを促すにはどうすればよいのでしょうか。次に、スクロールを促す4つの有効な方法についてご説明します。

視線誘導を意識して下へ下へのレイアウトを考える

視線誘導とは、コンテンツを正しく閲覧してもらうためにユーザーの視線を誘導するための技術のことです。たとえば、文章を読む際、大見出しを見て、小見出しを閲覧しないでしょうか？これは、大きなものから小さなものへと目が動いてく視線誘導の技術が採用されています。

そのため、視線誘導を意識して下へ下へのレイアウトを考えることで、自然とスクロールしてもらえるようになります。

目次＆アンカーリンク

目次やアンカーリンクは、ユーザーが欲しい情報にたどり着けるために有効な技術です。ユーザーは、決してコンテンツのすべてが知りたいわけではありません。たとえば、ツールの使い方を知りたい人もいれば、具体的な実例を見たい人もいるでしょう。

そのため、コンテンツの最初に目次やアンカーリンクを設置しておくことで、目的の場所に素早くユーザーが移動できるようになります。

スクロールダウンのマーク、アニメーション

ユーザーの中には、今以上にコンテンツが続いているにもかかわらず、“自分はすべてを読み終えた”と思って離脱してしまう方もいます。そのため、画像のようにスクロールを促すパーツを設置することで、最後まで読んでもらいやすくなります。

スクロールエフェクトを使用して、能動的にスクロール支度させる

スクロールエフェクトとは、ユーザーが操作することによっておこるアニメーションのことです。スクロールエフェクトについては、過去にブログでも取り上げましたので詳細はこちらをご覧ください。

スクロールエフェクトがあれば、自然と最後までスクロールを行ってみたくなります。

まとめ

スマホレイアウトの工夫の仕方は、今回ご紹介した方法以外にもたくさんの方法があります。そして、情報が多ことが売りのサイトでは、今回の工夫とは真逆に、無限にスクロールできる情報を掲載しているサイトもあります。

新しい技術を採用して解決する方法も有効ですが、他サイトではどのような技術が有効に採用されているのか、なぜこのようなレイアウトになっているかということを考えることもアイデア収集の参考になるため、できることから始めてみましょう。