[デザイナー＆エンジニア向け]無限スクロールとページネーションの比較
株式会社ニュートラルでデザインエンジニアをしているりょーたです。
みなさん（デザイナーさんとエンジニアさん）は、無限スクロールとページネーションをどう使い分けているでしょうか？
私は前職で約３年間フロントエンドエンジニアだったのですが
無限スクロール：スマホでの操作との親和性高そう🙄けど実装めんどくさい
ページネーション：SEO的にもいいし、実装も慣れてるしサクッとやるかぁ
くらいに思っていました。ただ、現職でデザインも担当することになり、「ページネーションと無限スクロールはどの基準でデザイナーは選んでるんだ？」と気になり調べてみました。
この記事は、前半部分は主にデザイン領域の話をして、後半部分でエンジニアリング領域の話をします。自分のドメインしか興味ないぜ！という方はスキップしてお読みください🙃
デザイン領域のお話
Inifinite scroll vs Pagination のような記事はすでにたくさんあるので、自分なりに大切だと思った部分を記載します。他の記事も合わせて参照ください。
無限スクロール
無限スクロールは、コンテンツがある限り、ユーザーが下にスクロールするとオンデマンドにデータを取ってきて表示するものです。
無限スクロールの操作性は、スクロールがより直感的なモバイルデバイスを使用するユーザーにとっては良い体験です。
無限スクロールは、エンドレスにコンテンツが表示されていく感覚のため、ユーザーの集中を中断することなく作業が行えます。youtubeやticktockを見ていると時間が一瞬で溶ける現象は、自分が怠惰だからではなく、これが原因です（断言）😇
無限スクロールは、
”コンテンツを絞り込んで発見することでユーザーの目的を素早く達成する”
ことが目的のコンテンツでなく、
”できるだけたくさんのものを見て、その中から興味のあるものをピックアップしていく”
ことを目的としたコンテンツで用いることが推奨されています。
デメリットを挙げていきます。
まずは、フッターに到達できないことです。フッターに到達したいユーザーからしたら、スクロールしたらページが伸びて全然到達できなくなるので、イライラすることでしょう🤬
回避策としては、フッターに記載している情報を他のところにも記載してアクセスできるようにするか、フッターをやめて、その内容をグローバルメニューに持っていくという事例もあるようです。（いい事例があったら追加します or 教えてください🙇♂️）
また、限定的なシチュエーションかもしれませんが、ユーザーの集中を中断させないことが最大のメリットなので、ネットワークが遅い環境で使われる前提のアプリであれば、無限スクロールをすることで余計なストレスを与える可能性もあります。メリットが享受できない以上、ページネーションの方がいいかもしれません。
無限スクロールはSEOに弱いとも言われています。もし、自社のエンジニアにそう言われたのであれば、こう言ってください！
「Googleが無限スクロールのベストプラクティスを出しているみたいですよ？」
ソッ👇
ところで、無限スクロールは、いくつかの表現方法があります。
ページ下部にスクロールすると自動で読み込みが行われるhttps://infiniteajaxscroll.com/examples/articles/
ページ下部のボタンをクリックすると読み込みが行われる
https://infiniteajaxscroll.com/examples/button/最初の数ページはページ下部にスクロールすると自動で読み込みが行われ、それ以降はページ下部のボタンをクリックすることで読み込む
https://web.dev/patterns/web-vitals-patterns/infinite-scroll/infinite-scroll/demo.html
3.に関しては、Googleが「連続スクロール（Continuous Scroll）」と名付けており、Googleの検索ページにも導入されるようです。
Starting today, we’re bringing continuous scrolling to desktop in English in the U.S. so you can continue to see more search results easily. When you reach the bottom of a search results page, you'll now be able to see up to six pages of results. pic.twitter.com/xIuVP24FFm
— Google (@Google) December 5, 2022
この変更に関するSEOの観点から批評した記事が面白かったです
無限スクロールを採用するとしてもその表現方法が３つもあるのは驚きでした。
状況に応じて最適な体験を選択したら良さそうですね！
2023/5/16追記
「2.ページ下部のボタンをクリックすると読み込みが行われる」UIの表現方法は、「インレイ」と呼ぶようです。詳しくは以下を参照ください！
ページネーション
ページネーションは、コンテンツをブロックごとに分割し、それぞれをインデックスにしたがってWebページに表示します。
ページネーションは、先に述べたように「コンテンツを絞り込んで発見することでユーザーの目的を素早く達成する」ことと親和性が高いです。
例えば、食べログでお店を検索する時、あらかじめエリアや日にち、カテゴリを絞り込んだ上で検索をし、検索結果を１つずつ見て、行きたい店がない場合は、次の20件を見ます。
また、全体の件数のうち、自分がどの位置にいるかもわかりやすいため、進捗を知りたいというニーズがある場合は、ページネーションの方が適していると言えます。物件の検索をしたときに、今の検索条件だと〇件出てくるのか、といった使い方をしたことがある方もいるかと思います🙄
デメリットとして、スマホのサイズの画面幅の時に間違えた操作をする、と書いていた記事がありましたが、こちらはUIの工夫でなんとでもなると思うので、個人的にはそこまでデメリットに感じていません。というのも、実際に自分が使っていて不快に感じた記憶は残っていないので、それほど問題ないかと思います。先人のUIを真似しましょう🫶
エンジニアリング領域のお話
無限スクロール
無限スクロールを実装する際に、次のコンテンツをフェッチするイベントをどこで発火させますか？
僕はなんの迷いもなく「ページがブラウザの最下部に達したとき」でした。しかし、世に出てるサービスを見ていると、それは間違いです。
Youtubeはどうですか？Google検索の画像タブではどうですか？スクロール中に次のコンテンツを取得して、ユーザーが気づかないうちに表示されているはずです。（常識であればスミマセン ）
Whenever possible, new items are inserted into the page before the user reaches them. Because this insertion happens offscreen (and is not visible to the user), the user experiences no layout shifts.
(可能な限り、ユーザーがページに到達する前に新しいアイテムがページに挿入されます。この挿入は画面外で行われる (ユーザーには表示されない) ため、ユーザーはレイアウトの変化を経験しません。)
上記の引用元では、Intersection Observer APIを用いた具体的な実装方法も記載されていたのでぜひ参照ください。簡単にいうと、ページに設定した閾値より下に到達するとそれを検知して次のコンテンツを取得、ページ下部に到達すると取得済みの次のコンテンツを挿入というイメージでしょうか（間違っていたら指摘ください🙏）
もう一つ、無限スクロールはSEOが弱いと言われがちですが、Google先生によると実装でカバーできるようです。（知らなかった）
この記事のデモがわかりやすかったです。
↓デモ
http://scrollsample.appspot.com/items?hl=ja
無限スクロール時もURLのクエリでページの管理をしてね、というものです。これをすると、Google botによって適切にコンテンツをクロールできるので、SEOの観点から優れたものになります。
さらに、クエリで現在の場所を管理することができるので、ユーザーがリロードやブックマークをして、再訪問しても、その場所に戻ってくることができます。これは、無限スクロールのデメリットの１つを潰せるので、最高のソリューションです🎉🎉🎉
まとめると、無限スクロールの実装で注意すべき点としては
データをフェッチするトリガーはページ最下部より上にして、ユーザーにエンドレスでスクロールできるような体験を提供する
データをフェッチするトリガーをボタンのクリックイベントに設定する際は、あらかじめデータをとっておき、ボタンを押されたらデータを表示する実装が推奨されている
クエリによるページの管理を行う
です。知らない事ばかりだった😇
以上の話を踏まえて、無限スクロールもどきのサンプルを実装してみました。上の注意点を満たしていないところもありますがサンプルなのでご了承ください😣
実装するにあたって、Tanstack QueryとSWRを使用しました。どちらも無限スクロールのための関数を提供しており、比較してみたいと思ったためです。
Tanstack Query：
SWR：
作成したサンプルソースは以下です。
やってみた感想としては、クエリによる管理を行う方法を導入する場合は、SWRの方がその目的に沿った実装ができました。Tanstack Queryは、ライブラリの提供する機能ではできなかったので、ライブラリ外でいい感じにしてあげる必要がありました。
以前、ポーリングを利用する必要があった際にも同じように比較をしてSWRの方を選択したことがあるのですが、周辺の機能に関してはSWRの方が使いやすく設計されてるイメージがついちゃったのですが実際どうなんですかね🙄
ページネーション
ページネーションで気をつけるところは、２点です。
１つ目は、ページのインデックスをクエリでも管理することです。理由は、無限スクロールのところでお話ししたことと同じです。
２つ目は、スマホでの操作感を意識することです。UIライブラリを導入していたら問題ないかと思いますが、たまにクリックできる領域がめちゃくちゃ少ない（数字の部分しか押せない、押せる余白が極端に少ないなど）ケースがあります。デザイナーと相談しながら、良いUIを作りましょう！！
まとめ
デザイナーの方にとって、適切なUIを選択する一助になれば幸いです💪
エンジニアの方にとって、ベストプラクティスに沿った実装をするための一助になれば幸いです💪