【むげんすくろーる】

無限スクロール とは?

最終更新:
💡 終わりのないスクロール、止まらないコンテンツの川下り
📌 このページのポイント
無限スクロール vs ページネーション 無限スクロール 投稿 1 投稿 2 投稿 3 読み込み中... ↓ スクロールで自動読み込み ↓ SNS・画像ギャラリー向き ⚠ フッターに到達しづらい VS ページネーション 商品 1 商品 2 商品 3 1 2 3 ... 10 検索結果・EC商品一覧向き ✓ 現在位置が明確・SEO◎
無限スクロールとページネーションの使い分け
ひよこ ひよこ
無限スクロールって、TwitterとかInstagramでよく見るやつだよね?
ペンギン先生 ペンギン先生
そうだよ。下にスクロールしていくと自動的に新しい投稿が読み込まれて、いつまでもスクロールできる仕組みだね
ひよこ ひよこ
便利だけど、なんか止められなくなる気がする…
ペンギン先生 ペンギン先生
まさにそこが狙いでもあり問題点でもあるんだよ。ユーザーの滞在時間は伸びるけど、「ダークパターン」として批判されることもあるんだ
ひよこ ひよこ
ページネーションとどっちがいいの?
ペンギン先生 ペンギン先生
コンテンツの性質によるよ。SNSのタイムラインや画像ギャラリーは無限スクロール向き、検索結果やECの商品一覧はページネーション向きだね。無限スクロールだとフッターにたどり着けなかったり、特定の位置に戻りにくかったりするんだ
ひよこ ひよこ
実装するときに気をつけることってある?
ペンギン先生 ペンギン先生
Intersection Observer APIを使って「画面下部が見えたら次を読み込む」のが定番だよ。あと、ブラウザの戻るボタンで元の位置に戻れるようにスクロール位置を保存しておくのが大事だね。これを忘れると「さっき見てたところに戻れない!」ってユーザーが怒るよ
ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「無限スクロール」って出てきたら「スクロールだけでどんどんコンテンツが出てくるUI」と思えればだいたいOK!
📖 おまけ:英語の意味
「Infinite Scroll」 = 無限のスクロール
💬 スクロールが無限に続くように感じることからこの名前がついたんだよ。別名「エンドレススクロール」とも言うよ
← 用語集にもどる