Webデザインにおける"スクローリング"とは！基本情報とポイントを解説

2017年9月5日

ニュース

これまでWebデザインでは「スクローリング」がタブーとされていましたが、最近では多くのデザインに活用され、人気の手法となっています。

そこで今回は、スクローリングの基本情報とそのポイントについてご紹介します。

スクローリングが注目を集めるようになった経緯から、スクローリングを実際に取り入れるコツまでわかりやすく解説していきますので、デザイントレンドに乗り遅れないように、ぜひ目をとおしてみてください。
　　

なぜスクローリングが再び注目を集めたのか

画像引用元：https://twitter.com/ferretplus

近年、再びスクローリングが注目を集めるようになった要因として"モバイルデバイスの普及"が挙げられます。以前はインターネットといえばPCが基本でしたが、今ではスマートフォン（スマホ）からの利用が当たり前になっています。

スクリーンの幅が小さければ当然画面に集約できる情報量は少なくなり、どんどんスクロールが長くなります。情報を分割してたくさんのページで見せることもできますが、わざわざクリックを繰り返すよりも、サッとスクロールするほうが情報に素早くアクセスすることが可能です。特に画面の小さいスマホのような端末の場合、タップして画面遷移するだけでもストレスになるため、シンプルなスクローリングにすることで快適にブラウジングすることができます。

最近では「無限スクロール」と呼ばれる、次々にコンテンツを表示していくスタイルも、多くのホームページで取り入れられています。 Twitter も、ツイートを読んでいくと自動的に新たなツイートを読み込みます。

無限スクロールではクリック無しでもたくさんの情報を読むことができるため、ユーザーが他のコンテンツを見るためのクリック回数も当然減らすことができます。
　　

スクローリングのメリット

http://www.ashinari.com/2011/10/23-352100.php

便利とはいえ、多くのホームページがスクローリングを取り入れているのはなぜでしょうか。

ここでは、スクローリングを活用した際のメリットとデメリットについてご紹介します。
　　

メリット1. 素早くページ閲覧ができる

多くの情報をバラバラのページでわけて見せると、ユーザーが情報にアクセスするまでの流れが複雑になってしまいます。何度もクリックしたり、どこに何があるかわからないよりも、ただスクロールする方が情報へのアクセスが早いと感じてもらうことができます。

また、画面を移動する必要がないということは、その分ナビゲーションがシンプルになるということでもあります。
　　

メリット2. 関連コンテンツに興味を持ってもらえる

スクローリングしてもらうことにより、目的のコンテンツ以外にも接触してもらうことができます。中でも「無限スクロール」と呼ばれる、多量のコンテンツをスクロールするデザインの場合、ユーザーが新しいコンテンツを発見できる機会となります。

画面の小さいスマホ端末では提供できる情報量が限られるというイメージがありますが、スクローリングを採用すれば大量の情報提供ができます。結果的に、ユーザーがホームページに滞在する時間を長くすることが可能です。

また、スクロールに伴って様々な変化があるデザインの場合、ユーザーの反応を促進することも可能です。
　　

メリット3. 複数デバイスに対応しやすい

スマホ、PC、タブレットとデバイスが多様化している昨今では、デバイスごとにデザインを調整したり何かと面倒な点があります。しかし、シンプルなスクローリングのデザインであれば、複数デバイスへの対応がより簡単です。
　　

スクローリングのデメリット

http://www.ashinari.com/2012/12/24-374416.php
　　

デメリット1. スピードの問題

スクローリングを取り入れたデザインの中には、多くの動画や写真を使ったものも見受けられます。（パララックスデザインなど）あまりに動画などを取り入れてしまうと、スピードに問題が出てしまいますので注意が必要です。
　　

デメリット2. SEO の面で不利

情報を1ページに集約してしまっているため、 SEO 的には不利な可能性があります。
　　

デメリット3. フッターがないこと

無限にスクロールできるデザインでフッターがない場合、ユーザーが戸惑ってしまう可能性もあります。
　　

スクローリング実践のコツ

画像引用元：http://www.decasrl.biz/en/products?go=node-54

近年、再評価されているスクローリングですが、必ずしも全てのWebデザインに効果的とは限りません。闇雲に実践するのではなく、本当にスクローリングを取り入れるべきか検討する必要があります。

そこで、ここからはスクローリングを効果的に実践するためのコツと、スクローリングに適したホームページについてご紹介します。
　　

スクローリングを上手く取り入れる方法

スクローリングの取り入れ方が適切でなければ、訪れたユーザーを混乱させかねません。効果的に取り入れるためには、いくつかのコツを知っておきましょう。

コツ1. ボタンなどを取り入れてわかりやすく
ユーザーが快適にページを閲覧できるよう、ボタンや矢印などを適時取り入れましょう。「すぐ始める」「もっとスクロールして見る」といったボタンを活用したり、クリックするとどこに飛ぶかなどを明確にすることで、ユーザーはページの仕組みを早く理解できるようになります。

ユーザーがページ内をどのように動くか調査し、結果に応じて調整していくと、適切なスクローリングになるのではないでしょうか。
　　
コツ2. 長くしすぎない
スクローリング＝永遠にコンテンツをスクロールすることではありません。目的に沿った長さにすること、ユーザーを導き現在位置を知らせるナビゲーションを配置することをオススメします。

画像でご紹介しているDecaのホームページは、効果的にスクローリングを取り入れている事例の1つです。スクローリングは最低限の数ページというボリュームで、商品を分類するナビゲーションをページ上部で固定しているため、途中でもユーザーを迷わせることはありません。
　　

スクローリングに適したホームページ

先にご紹介したとおり、スクローリングにはメリット・デメリット両方があります。

スクローリングに適しているホームページがどのようなものか挙げるとすれば、以下のようなものが該当するでしょう。

・新規
                  コンテンツ
                の追加、アップデートが多い
・モバイルからの通信が多い、大半のアクセスがモバイルからの場合
・大量の情報を単一の方法で表示している（インフォグラフィックなど）
・ローディングに時間がかかる要素を含んでいない

上記のような特徴を持つホームページであれば、スクローリングを効果的に取り入れることができる可能性が高いです。そうでない場合には、スクローリングにするかどうか十分検討する必要があるでしょう。
　　

スクローリングの今後

http://www.ashinari.com/2017/01/16-394747.php

近年、スマホが広く普及したことも要因となり、スクローリングのホームページが増えています。

スクローリングを取り入れることで、ナビゲーションがわかりやすくなったり、小さな画面でもユーザーにストレスなく大量のコンテンツを提供できるなどのメリットがあります。ユーザーが快適にホームページを利用できれば、滞在時間を伸ばすことができ、目的としている成果につなげることができます。

各種デバイスの画面サイズはバラツキがあるものの、基本的には小さいものが主流です。小さな画面のデバイスには当然長いスクロールが必要ですので、今後もスクローリングのデザインは無くならないでしょう。
　　

まとめ

以上、Webデザインの「スクローリング」について基本情報をご紹介しました。いかがだったでしょうか。

スマホからのインターネット利用が普及している今、小さい画面でも大量の情報発信と快適さを提供できるスクローリングは、注目すべきデザイントレンドといえます。

ご紹介したとおり全てのホームページにとって必ず効果的とはいえませんが、コンテンツ量が多い場合にはぜひ検討したい手法です。ぜひこの機会に、一度自社のホームページにスクローリングを取り入れることはできないか、検討してみてはいかがでしょうか。
　　