無限スクロール vs ページネーション：どう使い分けるべき？

Webサイトのデザインに、無限スクロールを使うべきか、ページネーションを使うべきかと、悩むデザイナーは多いと思います。

この記事では、この2つの方法のメリット・デメリットを整理します。自分のプロジェクトにおいてどちらを使用するべきか判断するために、活用してみてください。

無限スクロールのメリット・デメリット

無限スクロールとは、画面を下にスクロールするたびにページを自動で更新させるテクニックのことです。ユーザーはWebサイトの一番下にたどりくことなく、大量のコンテンツをスクロールし続けます。魅力的に聞こえるかもしれませんが、どんなサイトやアプリにも適した万能なもの、というわけではありません。

メリット1：たくさんのコンテンツが目に触れるので、エンゲージメントが向上する

データ閲覧にスクロールを使うと、ユーザーをサイトにより長く滞在させ、エンゲージメントを高めることができます。特にここ最近では、ソーシャルメディアの人気に伴い、大量のデータが消費されるようになっています。無限スクロールを使ったWebサイトはページ読み込みの待ち時間が少ないため、膨大なデータを効率的に見ることができるのです。

無限スクロールのメリットを知るために、Facebookのニュースフィードを見てみましょう。フィード上のコンテンツはあまりにも頻繁にアップデートされるため、ユーザーはそのすべてを見ることはできません。しかし、無限スクロールによって Facebookはできる限り多くの情報を表示していて、ユーザーはこの情報の流れに目を通し、消費しているわけです。

メリット2：クリックよりも直感的なスクロール操作が使える

マウスホイールやタッチスクリーンが使えれば、スクロールはクリックよりも早く、簡単な動作になります。なので多くのユーザーにとっては、クリックするよりもスクロールする方が楽なのです。説明文章のような連続した長いコンテンツの場合、テキストを複数のページに分割するより、スクロールの方が使いやすさにおいて優れています。

▲出典：ZQOn

もしコンテンツのアップデートにクリックが必要な場合、クリックという動作に加え、ページの読み込みを待つという行為が必要がです。 スクロールの場合は、スクロールをするだけでコンテンツがアップデートされます。

メリット3：モバイルデバイスに適している

小さい画面ほど、長いスクロールに向いています。さまざまなモバイルデバイスでジェスチャーコントロールが使えるようになり、スクロールは今まで以上に直感的で使いやすくなりました。モバイルデバイスの普及が、スクロールブームに拍車をかけたともいえるでしょう。

デメリット1：ページの動作とデバイスのリソース

優れたユーザーエクスペリエンスを実現するには、ページの読み込み速度がとても重要です。読み込み速度が遅いと訪問者はサイトから離れたり、アプリを削除したりして、その結果コンバージョンが下がるということが多数のリサーチによって示されています。

無限スクロールを採用しているサイトは、ページの読み込み速度を特に注意しなければなりません。ページをスクロールダウンして多くのコンテンツを同じページ上に読み込むほど、ページの動作は遅くなるからです。

もうひとつの問題は、ユーザーのデバイスにおけるリソースが限られていることです。特に多数の画像を扱う無限スクロールサイトの多くは、リソースの限られたデバイスでの動作が遅くなる傾向にあります。たとえばiPadのような端末では、読み込む情報量が多すぎて遅くなってしまうでしょう。

デメリット2：アイテムの検索と位置

無限スクロールにおけるもうひとつの問題は、Facebookのタイムラインのようなストリームの特定の位置をブックマークできないことです。一度その位置を離れると、あとで戻ってくることが困難になります。たとえばサイトを離れてしまったとき、コンテンツの探索は振り出しに戻り、同じ位置に戻るためには再びスクロールダウンする必要があります。スクロールで目的の位置を見つけられないことは、ユーザーにとって苛立ちや混乱の原因となります。

2012年に、『Etsy』は無限スクロール型のインターフェイスの実装に多くの時間を費やしましたが、ページネーションを用いた場合ほど上手く機能していないことが判明しました。購買数はほぼ変わらなかったのですが、検索機能の利用率が減っていたのです。

無限スクロールを利用した『Etsy』現在のバージョンは、検索インターフェイスにページネーションを採用しています。

この件について、ドミトリー・ファデエフ氏は次のように指摘しています。

ユーザーの多くは、検索結果のリストを見るとき、今リストの下の方で見ているものと、さっきリストの上の方で見ていたものを比較したい、と思うものです。無限スクロールは、この性質を遮断するだけでなく、リストを上下移動することも困難にします。違う時間にページに戻ってきて、トップに戻ってしまっていることに気づき、もう一度リストをスクロールダウンして結果が読み込まれるのを待たなければならない場合など最悪です。このような場合において、無限スクロールはページネーションよりも実質的に遅くなってしまいます。

デメリット3：誤解を招くスクロールバー

もうひとつユーザーを苛立たせてしまうのは、スクロールバーが実際にスクロール可能なデータの量を反映していないことです。ユーザーはもう少しでページの終わりだと思って下までスクロールしますが、最後までたどり着いたと思ったところで再び読み込みが開始。ゴールが遠ざかってしまいます。利用のしやすさからいうと、このような誤解を招くスクロールバーはユーザーにとって非常に良くないことです。

デメリット4：フッターがなくなる

フッターには、ユーザーがたまに必要とする情報やリンクが含まれています。ユーザーは、何かを見つけることができないときや、追加で情報がほしいときに、大抵フッターを見ようとします。しかし無限スクロールの場合、ユーザーがページの終わりにたどり着くとすぐに新しいデータが読み込まれ、フッターはその都度視界の外へおしやられてしまいます。

▲2012年に『Linkedin』が無限スクロールを導入した際、新しい情報を読み込むまでのわずかな時間でフッターのリンクをクリックしなければならなかった。

無限スクロールを採用しているサイトでは、ユーザーがフッターを利用できるように固定させるか、リンクをトップかサイドバーに移した方が良いでしょう。Facebookの場合は、「言語」や「採用情報」などををフッターから右側のサイドバーに移動させました。

別の解決策としては、「さらに表示」のボタンを導入し、ユーザーの要求に応じてコンテンツの読み込みを行うことです。これにより、ユーザーがこのボタンをクリックしない間は、新しいコンテンツが自動的に読み込まれることはありません。この方法であれば、ユーザーはフッターに簡単にたどり着くことができるので、延々とスクロールをし続ける必要はありません。

▲Instagramでは「さらに表示」ボタンにより、ユーザーがフッターを利用しやすいようにしている。

ページネーションのメリット・デメリット

ページネーションとは、コンテンツを複数のページに分割するUI様式です。ページの一番下までスクロールしたときに見える数字の並び – それがそのサイト / アプリのページネーションです。

メリット1：コンバージョンを助ける

ユーザーが情報の流れをただ見ながら消費するのではなく、検索結果のリストの中から何か特定のものを探しているようなときに、ページネーションは役立ちます。

Google検索の例から、ページネーションのメリットを見てみましょう。求めている検索結果によっては、それが一瞬で見つかることもあれば、1時間かかることもあります。しかし、現在のGoogleのフォーマット上であれば検索結果の正確な数がわかります。なのでどこまでで検索を諦めるか、あるいはあと何件の検索結果見るか、自分で判断することができるわけです。

メリット2：コントロール感がある

無限スクロールは終わりのないゲームのようなもので、どれだけスクロールしても、終わりがないように思えます。しかし検索結果の全体数がわかるので、ユーザーは無限スクロールのリストで延々と迷わずに済みます。デイビッド・キーラによる「 Psychology in Human-Computer Interaction（人間とコンピューターの相互作用における心理学）」では、「終点にたどり着いたとき、ユーザーは自分がこのWebサイトをコントロールできていると感じる」と述べられています。さらには、ユーザーが限られていながらも関連した検索結果を前にするとき、自分の探しているものがその中にあるかどうかを簡単に見わけることができるということも、解明されています。

また、検索結果の総数を見れば、ユーザーは自分の探しているものを見つけるのにどれくらいの時間が必要なのかを見積もることができます。

メリット3：アイテムの位置がわかる

ページネーションによって、ユーザーはアイテムの位置を頭に留めておくことができます。たとえページの名前や位置を正確に覚えていなくても、どんな内容だったかをざっくりと思い出し、その特定のページのリンクを使って簡単にアクセスすることが可能です。

ページネーションは、Eコマースのサイトやアプリに向いています。オンラインで買い物をするときに、さっき見ていた製品のところまで戻り、比較をしたり購入をしたりすることができるからです。

▲MR Porterのサイトは、商品の表示画面にページネーションを利用している

デメリット：余分な動作がある

ページネーションにおいて次のページに進むには、ユーザーは「次へ」などリンクを見つけ、カーソルを合わせ、クリックし、そしてページが読み込まれるのを待たなければなりません。

これの問題点は、ほとんどのサイトでは１つのページにごく限られたコンテンツしか表示されていないということです。解決策としては、読み込み速度を妥協することなくページのコンテンツを多く、長くすることです。そうすれば、ページネーションのボタンをそれほど頻繁にクリックやタップする必要がなくなります。

どう使い分けるべきか？

無限スクロールが効果的となる事例はそう多くありません。ユーザー生成型コンテンツを含む（TwitterやFacebookなどの）サイトやアプリ、または（PinterestやInstagramなどの）ビジュアルコンテンツに最も適しています。延々と大量のデータを消費するようなサービスで役立つでしょう。一方ページネーションは、検索結果ページのようにある特定のものを探したり、それぞれのアイテムの位置に意味がある場面において有効です。ユーザーの目標指向型のサイトやアプリに向いています。

Googleはこの違いをうまく使い分けている例です。例えば、文章より画像の方がずっと早く目を通すことができるため、Google画像検索では無限スクロールが活用されています。それに対して、文章の検索結果を読むにはもっと長い時間がかかります。だから、通常のGoogle検索の検索結果画面では従来型のページネーションが使われているというわけです。

まとめ

デザイナーは、無限スクロールとページネーションのメリット・デメリットをよく検討した上で、どちらを採用するか決めるべきでしょう。その決断はどのような内容を、どのように伝えたいのか、ということにかかってきます。

正しい機能を実装して、使いやすいサービスを生み出してください。

（翻訳：Yutai Satake）