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

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

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

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

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

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

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

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

ロングスクロールとは？

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

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

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

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

Facebookアプリ

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

fb.png

Twitterアプリ

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

tw.png

Airbnbアプリ

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

ab.png

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

さまざまなアプリやホームページで採用されているロングスクロールや無限スクロールですが、なぜこれだけ多くのアプリやサイトが採用しているのでしょうか。
ロングスクロールを採用するメリットとは、果たして何なんでしょうか。
ここでは、ロングスクロールを取り入れることによって得られるメリットを確認していきましょう。

1. ナビゲーションがシンプルになる

余計な画面遷移をしないということは、ページ遷移を行うためのナビゲーションメニューがシンプルになったり、場合によっては不要になったりします。
あるページから次のページに遷移するためのボタンがないので、その分ナビゲーション部分がすっきりするのです。

2. コンテンツ全体のダウンロード時間を短くすることができる

ボタンやリンクをクリックしてページ遷移を行う場合、次のページ全体を読み込む必要がありました。
無限スクロールの場合は、コンテンツ部分だけをダウンロードすればいいのと、次のコンテンツを読み込んでいる間もユーザーは今すでに表示されているコンテンツに目を通しておけばいいので、ストレスが軽減されます。

3. 小さなデバイスでも大量の情報を提供することができる

これまで、モバイルスクリーンでは表示できる情報量に限界があると思われていました。
しかし、こうした限界を取っ払って思い切って無限スクロールを採用した結果、パソコンで閲覧するのと同じく大量の情報を提供できるようになりました。

ロングスクロールが殺した2つの遺失物

一方で、ロングスクロールや無限スクロールが流行していくにつれて、だんだんと失われていく２つのデザイントレンドがあります。

1. アバブザフォールドデザイン

ひとつは、*「アバブザフォールド」のデザインです。
「アバブザフォールド」とは、直訳すると「折り目より上の部分」で、ホームページをスクロールしなくても見える「ファーストビューの部分」*を指します。

以前は、ファーストビューこそが大切で、ファーストビューにこそ情報を詰め込むべきだ、という考え方もありました。
第一印象がそのホームページやアプリの印象を決めると信じられていたからです。

しかし、ロングスクロールの考え方からすると、ファーストビューで満足してもらっては困ります。
むしろ、スクロールしたい、もっと次を読みたい、と思わせるようなデザインこそ、優等生だとみなされるのです。

参考：
あなたはいくつ知っていますか？2016年に最も話題になったWebデザイントレンド17選

2. ページネーション

そしてもうひとつ、ロングスクロールの普及によって失われたものがあります。
それがページネーションです。

コンテンツを次々に読み込む手段としてロングスクロールが採用されれば、必然的にページをクリックして移動するページネーションは消えていくことになります。
確かに、ページネーションによっていまどのあたりにいるのかが分かり、もっと先々までジャンプすることも可能です。

しかし、ページ数が多くなれば多くなるほどページ遷移数が増え、同時にクリック数も増えてしまいます。

デメリットだけでなくメリットも多いページネーションですが、ロングスクロールの流行によって淘汰されようとしているのです。

まとめ

ロングスクロールを採用することで、サイトやアプリの滞在時間が長くなり、結果的にエンゲージメント率が高くなります。
また、ソーシャルメディアの人気とともに、大量のデータが消費されることになり、ロングスクロールがそうした大量のデータをブラウジングするのに最適な手段だったので、現在も次々と採用されています。

コンテンツ量が多い場合には、ぜひロングスクロールを取り入れてみてください。