無限スクロール vs ページネーション：それぞれの特徴と使い分け

Webサイトにおけるページングを考える際、無限スクロールを使うべきか、それとも従来のページネーションを使用するべきなのか、悩むデザイナーは多いのではないでしょうか？

この記事では、この二つの方法の強みと弱みを整理し、各々のプロジェクトにおいてどちらを利用するべきかを判断していきましょう。

無限スクロール

無限スクロールとは、ユーザーが多量のコンテンツをスクロールし続けるテクニックで、その名の通り、終点が見えることはありません。下にスクロールするたびに、ページを自動でリフレッシュしていきます。魅力的に聞こえるかもしれませんが、全てのサイトやアプリにおいて万能なわけではありません。

無限スクロール

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

１．ユーザーを没頭させ、コンテンツを発見させる

データ探索の主要な手段としてスクローリングを使う場合、無限スクロールはユーザーをwebページにより長く滞在させ、よりエンゲージメントを高めることができます。ソーシャルメディアの人気に伴い大量のデータが消費されている中、無限スクロールは、ページが前もって読み込まれるのを待つことなく、膨大な情報を閲覧するための効率的な方法です。

無限スクロールは、「発見」のためのインターフェースであれば、ほぼ必須の機能です。ユーザーが特定のものを探していない場合、気に入った一つのものを探すために大量のアイテムを見る必要があります。

Pinterestのピン

Facebookのニュースフィードを例に、無限スクロールのメリットを評価しても良いでしょう。暗黙の了解ですが、フィード上はコンテンツが頻繁にアップデートされるため、ユーザーはその全てを見ることはできないでしょう。無限スクロールのおかげで、Facebookはできる限り多くの情報を見せることに最善を尽くしており、ユーザーはこの情報の流れに目を通し、そして消費しているのです。

Facebookのニュースフィードは、コンテンツアップデートのためユーザーに次々スクロールさせ続けます

２．クリックよりも優れている

ユーザーは、クリックするよりもスクロールするときの方が心地よく感じます。マウスホイールやタッチスクリーンのおかげで、スクロールはクリックより早くて簡単です。チュートリアルのような連続した長いコンテンツの場合、テキストを別の画面やページに分割するより、むしろスクロールをする方がユーザビリティにおいて優れています。

クリック：それぞれのコンテンツをアップデートするには、追加でクリックを行いページの読み込みを待つ必要があります。 スクロール：一度のスクロールでコンテンツをアップデートできます （出典：designbolts）

３．モバイルデバイスに適している

画面が小さいほど、より長いスクロールをすることができます。長いスクローリングが主流になった経緯としてはモバイルの普及があり、ジェスチャーによるコントロールは、直感的でより説明不要なスクロールを可能とします。その結果、ユーザーは利用デバイスに関係なく、すぐに素早い反応を体験することができます。

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

１．ページの動作とデバイスのリソース

優れたUXのためには、ページの読み込み速度が全てです。読み込み速度が遅いと、訪問者はサイトを離脱もしくはアプリを削除してしまい、その結果コンバージョンが下がるということが多数のリサーチによって示されています。

そしてこれは、無限スクロールを採用しているサイトにとって悪いニュースとなります。ユーザーがページをスクロールダウンすればするほど、より多くのコンテンツを同じページ上に読み込まなければなりません。その結果、ページの動作は非常に遅くなるでしょう。

もう一つの問題は、ユーザーのデバイスにおけるリソースが限られていることです。特に多数の画像を扱う無限スクロールサイトの多くでは、iPadのようなリソースの限られたデバイスは動作が遅くなり始めます。なぜならiPadは、非常に多くのアセットを読み込んでいるからです。

２．アイテムの検索と位置

無限スクロールの別の問題は、ストリームの中でユーザーがある特定の項目にたどり着いても、その場所をブックマークできず、後で戻ってくることが困難なことです。

サイトを離れてしまうと全ての進捗が失われ、同じ項目に戻るためにまたスクロールダウンする必要があるのです。ユーザーがスクロールする目的の位置を見つけられないことは、苛立ちや混乱の原因となるだけでなく、結果的に全体のUXに悪影響を及ぼします。

2012年、Etsyは無限スクロールインターフェイスの実装に時間を費やしましたが、結局ページネーションほど上手く機能しないことがわかりました。購買数はほぼ同数を保ちましたが、ユーザーのエンゲージメントは低下し、あまりこの機能はあまり使われることはありませんでした。

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

Dmitry Fadeyev氏は次のように指摘しています。

訪問者は、検索結果のリストに戻りたいのです。たった今見たアイテムをチェックし、リストの下の方に表示されるこれまでに見つけた他のものと比較するためです。

無限スクロールは、この動的な性質を遮断するだけでなく、リストを上下移動することも困難にします。特に、別の時間にページに帰ってきた際、トップに戻されていることに気づいたとき、もう一度リストをスクロールダウンして結果が読み込まれるのを待たなければならない場合です。この点において、無限スクロールはページネーションよりも実質的には遅くなってしまうのです。

３．意味のないスクロールバー

ユーザーを苛立たせてしまう要因の一つとして、スクロールバーが実際にスクロール可能なデータの量を反映しないことが挙げられます。

ユーザーはもう少しでページの終わりだと思って下までスクロールし（しかもそれによってもう少しスクロールしようという気にもさせるのですが）、最後までたどり着いたと思ったところでゴールが遠ざかってしまうのです。

アクセシビリティの観点から言うと、スクロールバーを無意味化してしまうことはユーザーにとって非常に良くないことです。

スクロールバーは実際のページの長さを反映するべきです

４．フッターがなくなる

フッターにはユーザーが時に必要とする内容が含まれており、その意義は確かに存在します。ユーザーが何かを見つけることができないときや、追加で情報がほしいときは、大抵フッターを見に行きます。

しかし、無限スクロールの場合、ユーザーがページの終わりにたどり着くとすぐに更なるデータが読み込まれ、フッターは都度視界の外へ押しやられてしまいます。

2012年にLinkedinが無限スクロールを導入した際、次の項目を読み込んでしまうまでのわずかな時間でリンクをクリックしなければなりませんでした。

無限スクロールを実施しているサイトは、ユーザーがフッターを利用しやすいように、固定するか、またはリンクをトップかサイドバーに移動させた方が良いでしょう。

Facebookは、全てのリンク（例えば「法務」や「採用情報」）をフッターから右側のサイドバーに移動させました。

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

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

ページネーション

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

ページネーション

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

１．優れたコンバージョン

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

Google検索の例から、ページネーションのメリットを見てみましょう。ユーザーが求める検索結果は、調査の内容によって一瞬で見つかるかもしれないし、１時間かかるかもしれません。ですが、検索をやめようと判断するとき、現在のGoogleのフォーマット上であれば検索結果の正確な数がわかります。そのため、どこでやめるべきか、また検索結果を何件より深く精査していくべきか判断することができます。

Google検索の結果データ

２．コントロール感がある

無限スクロールは終わりのないゲームのようなもので、どれだけ遠くまでスクロールしようと、終わりにたどり着くことができないように思えるでしょう。利用可能な検索結果の数がわかれば、ユーザーは無限スクロールのリスト内を探し回ることなく、より詳しい情報に基づいた決断をすることができます。

David Kieras氏は、自身の研究であるPsychology in Human-Computer Interactionの中で、「終点にたどり着くことで、ユーザーにコントロール感をもたらす」と述べています。更に、ユーザーが限られていながらも関連した検索結果を得たとき、探しているものが実際にその中にあるかどうかを簡単に判断できるということも、この研究により解明されています。

また、検索結果の総数を見れば（もちろん、データの総量が無限ではない場合）、ユーザーは実際に探しているものを見つけるまでにどれくらいの時間がかかるのかを見積もることができるでしょう。

３．アイテムの位置がわかる

ページネーションによって、ユーザーはアイテムの位置を頭に留めておくことができます。必ずしも正確なページ数をわかっているわけではないかもしれませんが、それが何だったかをおおよそで思い出し、ページネーションのリンクによってその場所へ簡単にアクセスすることができるでしょう。

ページネーションによって、どのページをクリックすれば元の場所に戻ることができるのかがわかるので、ユーザーはナビゲーション機能をコントロールできます。

ページネーションは、ECのサイトやアプリに向いています。オンラインで買い物するとき、ユーザーは一旦離れた場所に戻り買い物を続けられるようにしたいのです。

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

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

余分な動作が生じる

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

コンテンツへ進むためのクリック

この場合における主な問題点は、ほとんどのサイトがユーザーに対し、１ページにごく限られたコンテンツしか表示しないということです。

読み込み速度を妥協することなくページのコンテンツを長くすることで、ユーザーは１ページにつきより多くのコンテンツを見ることができます。これにより、ページネーションのボタンをそれほど多くクリック、またはタップする必要がなくなります。

どう使い分けるべきか？

無限スクロールが効果的となる事例はごく少数で、ユーザー生成型コンテンツを含むサイトやアプリ（TwitterやFacebook）、またはビジュアルコンテンツ（PinterestやInstagram）が最も適しています。

一方、ページネーションは無難な選択肢で、ユーザーの行動が目的志向のサイトやアプリにとって良い解決策です。

２つの手法を使い分けるGoogle

Googleにおける体験は、このポイントを示す良い実例です。Google画像検索では無限スクロールが活用されていますが、それは画像ならユーザーがテキストよりもはるかに早く目を通し、処理することができるからです。検索結果を読むにはもっと長い時間がかかります。

これが、Google検索の結果画面で従来型のページネーションテクニックが引き続き使われている理由なのです。

まとめ

デザイナーは、どちらを使うか決める前に、無限スクロールとページネーションのメリット・デメリットを検討した方が良いでしょう。どちらを選択するかは、対象のコンテキスト（文脈）とそのコンテンツを伝える方法に左右されます。

一般的に、無限スクロールは、Twitterのようにユーザーが特定のものを探すことなく、永遠に流れるデータストリームを消費するような場で効果を発揮します。対して、ページネーションは、検索結果ページのように訪問者が特定の項目を探したり、ユーザーがそれまでに閲覧したアイテムの位置を重要視する場合に有効です。