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

これまで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デザインの「スクローリング」について基本情報をご紹介しました。いかがだったでしょうか。

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

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