ロングスクロールのWebサイトが増えているのはなぜ？その理由とポイントを解説

「できるだけストレスのないUXを実現したい・・・」

ホームページをデザインするときに、誰もがこのようなことを気にかけます。

しかし、どれだけクールなデザインになっても、あるいはどれだけ使いやすくて便利なUIを設計しても、必ずネックになることがあります。
それは、ローディング、つまり読み込みの問題です。

どれだけクライアント側でページを軽量化しても、回線が遅ければローディングスピードが落ちるので、ユーザーはページを読み込むたびにストレスが溜まってしまいます。

UXデザイナーたちは考えました。
できるだけページ遷移せずにさまざまなコンテンツを読み込む方法はないか、と。

そしてたどり着いたのが、ロングスクロールです。

これまでもロングスクロールをするアプリやホームページはありましたが、以上のようなUXの観点で改めて「ロングスクロール」や「無限スクロール」のコンテンツ画面が注目されています。
Facebookアプリをはじめとして、さまざまなアプリがこうしたコンテンツの見せ方を採用していますが、それはなぜなのでしょうか。

今回は、ロングスクロールを実装しているサイトが増えている理由と、ロングスクロールを実装するときのポイントを解説します。

ロングスクロールとは？

*ロングスクロール(long scrolling)*とは、その名の通りページの縦幅を長くして、スクロールすることを前提に作られている縦長のデザインやコンテンツのことを指します。
特にスマートフォンなどのモバイル端末は、デバイスの形状自体が縦長であり、デバイスの表示スペースが限られているため、できるだけ指を滑らせてスクロールして見られるようにしよう、というUX上のトレンドによって、ロングスクロールのサイトやアプリが採用されています。

また、スマートフォンのような小さなデバイスだと、タップして画面遷移するにもUIが小さく、タップするたびに余計なストレスがかかるので、シングルページのスクローリングに変えることでタップやクリックの数を極力減らして、気楽に情報をブラウジングできるようにするという意図もあります。

ロングスクロールの中でも、下底にたどり着いたら別のコンテンツを次々と読み込む*「無限スクロール」(infinite scroll)*は多くのアプリが取り入れています。
無限スクロールによって、ユーザーは１度もクリックすることなくさまざまなコンテンツを流すように読むことができるので、ユーザーはストレスなく情報を閲覧することができ、結果的にサイトの滞在時間が上がり、離脱率を下げる効果が期待できます。

ロングスクロール(無限スクロール)を実装している例

Facebookアプリ

Facebookアプリでフィードを次々に読み込みますが、ページ下部までいくとさらに次々と新着情報を読み込んでいきます。

Twitterアプリ

Twitterアプリも同様に、タイムライン上のツイートを流し読みしていくと、また次のツイートが自動的に読み込まれていきます。

Airbnbアプリ

Airbnbアプリも同じく、下部までスクロールしていくと別の地域やジャンルのおすすめ宿泊先を表示してくれます。
実際には無限ではなく何度か読み込むと止まってしまいますが、無限スクロールに近い形でコンテンツを読み込むのが確認できます。