本文へスキップ

ページネーション・無限スクロール・もっと見る

一覧の続きを、ページ番号・無限スクロール・「もっと見る」のどれで出す?

判断表

判断軸ページネーション
番号で狙った位置へ飛ぶ
無限スクロール
下に着くと勝手に足される
高さ auto の開閉アニメ
押した分だけ続きが出る(開閉で代用)
向く一覧検索結果・アーカイブ。総件数と現在地が要るタイムライン・フィード。終わりが無い流し読み数十件で止まる一覧。少し先まで見たい
現在地の把握「3 / 12 ページ」で分かる。URL にも残せる分からない。戻ると位置を失いやすい分からないが、量が少ないので困らない
フッターへの到達常に届く届かない(読み込みが続く限り手前に来ない)届く。押さなければ伸びない
操作回数ページごとに1クリック。飛び越えも1回0回。スクロールだけ続きごとに1クリック
検索エンジン・共有各ページに URL があり、クロールも共有もできる初期表示分しか見えない隠れている分は DOM にあれば読まれる

迷ったらこれ

迷ったら「もっと見る」。フッターに届き、操作の主導権が利用者にあり、実装も軽い。ただし特定の位置へ戻る・共有する用途(検索結果・記事一覧)ならページ番号、終わりの無いフィードだけ無限スクロールにする。

図鑑に「もっと見る」ボタンの見本は無いので、押して続きが現れる開閉の見本で代用した。無限スクロールの見本も、一定件数で「もっと見る」に切り替えるハイブリッド型を解説で勧めている。

候補の見本

  • クリック

    ページネーション解説あり

    Pagination

    前へ/次へと番号ボタンで構成する定番ページャ。ページ数が多いときは「…」で省略し、現在のページを藍色で示す。クリックでページが切り替わる。

  • スクロール

    無限スクロール解説あり

    Infinite Scroll

    コンテナ内を下までスクロールすると自動でアイテムを追加読み込み。IntersectionObserverでsentinelを監視。

  • クリック

    高さ auto の開閉アニメ

    Animate Height Auto (grid-rows)

    grid-template-rows を 0fr → 1fr にトランジションさせて、中身の高さを測らずに開閉する。JS は aria-expanded を切り替えるだけで、高さの計算をしない。