無限スクロールとは何ですか？

ページの下部に到達すると自動的に次のコンテンツが読み込まれ、スクロールが延々と続くUIパターンです。SNSのタイムラインなどで広く使われています。

無限スクロールのポイントは？

スクロールするだけで次のコンテンツが自動読み込みされるUI。ページ遷移が不要。SNSや画像ギャラリーなど「流し見」するコンテンツと相性が良い。フッターにアクセスしづらい・現在位置が分かりにくいといったデメリットもある

【むげんすくろーる】

💡 終わりのないスクロール、止まらないコンテンツの川下り

📌 このページのポイント

無限スクロールとページネーションの使い分け

ひよこ

無限スクロールって、TwitterとかInstagramでよく見るやつだよね？

ペンギン先生

そうだよ。下にスクロールしていくと自動的に新しい投稿が読み込まれて、いつまでもスクロールできる仕組みだね

ひよこ

便利だけど、なんか止められなくなる気がする…

ペンギン先生

まさにそこが狙いでもあり問題点でもあるんだよ。ユーザーの滞在時間は伸びるけど、「ダークパターン」として批判されることもあるんだ

ひよこ

ページネーションとどっちがいいの？

ペンギン先生

コンテンツの性質によるよ。SNSのタイムラインや画像ギャラリーは無限スクロール向き、検索結果やECの商品一覧はページネーション向きだね。無限スクロールだとフッターにたどり着けなかったり、特定の位置に戻りにくかったりするんだ

ひよこ

実装するときに気をつけることってある？

ペンギン先生

Intersection Observer APIを使って「画面下部が見えたら次を読み込む」のが定番だよ。あと、ブラウザの戻るボタンで元の位置に戻れるようにスクロール位置を保存しておくのが大事だね。これを忘れると「さっき見てたところに戻れない！」ってユーザーが怒るよ

まとめ：ざっくりこれだけ覚えればOK！

「無限スクロール」って出てきたら「スクロールだけでどんどんコンテンツが出てくるUI」と思えればだいたいOK！

📖 おまけ：英語の意味

「Infinite Scroll」＝無限のスクロール

💬 スクロールが無限に続くように感じることからこの名前がついたんだよ。別名「エンドレススクロール」とも言うよ