使い分けが重要！ページネーションと無限スクロール【無限スクロール編】

いかにユーザーがストレスなく、Webサイトを閲覧できるか。

これは作り手側で常に意識しているわけですが、1ページあたりの情報量が多くなると、閲覧の際に読み込みが遅くなったり、ユーザーが知りたい情報を見失う恐れもあるので、何か対策を考える必要があります。

その際に実装できるUI様式として、ページネーションと無限スクロールの2つがあります。どちらが良い・悪いというものではなく、重要なのは使い分けです。

前回はページネーションについて紹介しましたが、今回は後編として、無限スクロールの特徴と使用する際のポイントを見ていきましょう。

※前編の「ページネーション編」はこちら。

使い分けが重要！ページネーションと無限スクロール【ページネーション編】

無限スクロールとは

無限スクロールとは、ユーザーが画面を下までスクロールすると新しい情報を自動で読み込ませるUIの様式のことです。

無限スクロールのポイントは、ボタンやリンクをクリックする必要がない点です。リンクをクリックしてページ遷移する場合、遷移先のページを丸ごと読み込む必要がありますが、無限スクロールの場合は次のコンテンツ部分を読み込むだけで済むので、ユーザーはもっと情報がほしければそのままスクロールを続ければいいわけですし、サイト側もサーバーへの負担が少なくなります。

この無限スクロールがよく見られるのはFacebook、Instagram、TwitterといったSNSです。

スクロールに従って、記事が次々に読み込まれます。

SNSではユーザーによってコンテンツが頻繁に追加・更新されるため、スクロール1つですぐにページが読み込まれる、無限スクロールがぴったりハマります。

それに、ページの切り替わりがないので、コンテンツへの没入感をより高めてくれる利点もあるんです。

また、無限スクロールはモバイル端末との相性が良いとされています。リンクをタップして次のページを読み込むのと、指を上下にずらして（スクローリング）して情報を流し読みするのとどちらが快適ですか？やはり後者ですよね。

スクローリングはフリックやスワイプと同じで直感的に画面を操る動作であるのに対し、タップはタップしたい位置まで指を移動させて押さなければいけません。ちょっと押す位置がズレたり、ボタンが小さすぎたりすると、自分の意図したものではないページが開いたり、広告が開いたりするので、ストレスになります。

そういう意味でも、無限スクロールはモバイルとの相性がバツグンです。

使用の際のポイント

無限スクロールを実装する際は、以下の点に注意してください。

読み込みの速度に注意

サイズが大きめの画像がある場合は、読み込みに数秒かかることがあり、この数秒の間にユーザーが待ちきれず離脱する可能性があります。

調子よくスクロールしていたのに、急に止まるとフリーズしたんじゃないか？と不安になりませんか。

そうした不安を和らげるためには、ページの読み込み中であることを伝えるグラフィックを使い、表示を工夫しましょう。

フッターを確保する

無限スクロールで絶え間なく新しい情報を読み込んでくれるのは良いものの、ページの一番下にたどり着くのは容易ではありません。フッターをページ最下部に置いていると見えては押し下げられを繰り返すことになってしまい、それをストレスに感じるユーザーも少なからずいます。

• フッターは画面下部に固定して表示させる
• フッターの情報を固定のサイドバーに表示しておく
• ある程度のところで一度「もっとみる」「さらに表示する」などのボタンを組み込む

などの対策を行いましょう。

クリップ機能の実装を検討

ECサイトで検索結果一覧ページに無限スクロールを採用しているケースも稀に見かけますが、これには注意点があります。

例えばECサイトで検索結果を見ているとき、「さっき見かけた商品と比較したい」と考えることはよくありますよね。

商品の詳細を読んで、また検索結果に戻り、少し前に見かけた商品を選択し、商品の詳細を読んで・・・という操作が予想されますが、この検索結果一覧ページが無限スクロールだった場合、スクロール途中でページを離れると検索結果の位置がリセットされてしまうことがあります。

つまり、一つ目の商品をまた探しスクロール、別の商品をまた一番最初から探しスクロール、でやっと比較するという行動になるわけです。ページャーであれば大体2ページ目だったな、とある程度は目星をつけられますが、無限スクロールではそうはいきません。

これはユーザにとって非常にストレスになります。

頻繁にページを行き来するようなコンテンツはそもそも無限スクロール向きではない場合が多いですが、どうしても無限スクロールを使う場合には「お気に入り」「保存」「あとで見る」などのクリップ機能の実装を検討すべきでしょう。

まとめ

以上、無限スクロール編でした。

ページネーションも無限スクロールも、使用されるデバイスや、実装する際の対策によってかなり使い勝手が変わってきます。それぞれの特徴をしっかり理解することが大切ですね。

ぜひ前編の【ページネーション編】も合わせてご覧ください。

使い分けが重要！ページネーションと無限スクロール【ページネーション編】