ページネーション・無限スクロール・もっと見る
一覧の続きを、ページ番号・無限スクロール・「もっと見る」のどれで出す?
判断表
| 判断軸 | ページネーション 番号で狙った位置へ飛ぶ | 無限スクロール 下に着くと勝手に足される | 高さ auto の開閉アニメ 押した分だけ続きが出る(開閉で代用) |
|---|---|---|---|
| 向く一覧 | 検索結果・アーカイブ。総件数と現在地が要る | タイムライン・フィード。終わりが無い流し読み | 数十件で止まる一覧。少し先まで見たい |
| 現在地の把握 | 「3 / 12 ページ」で分かる。URL にも残せる | 分からない。戻ると位置を失いやすい | 分からないが、量が少ないので困らない |
| フッターへの到達 | 常に届く | 届かない(読み込みが続く限り手前に来ない) | 届く。押さなければ伸びない |
| 操作回数 | ページごとに1クリック。飛び越えも1回 | 0回。スクロールだけ | 続きごとに1クリック |
| 検索エンジン・共有 | 各ページに URL があり、クロールも共有もできる | 初期表示分しか見えない | 隠れている分は DOM にあれば読まれる |
迷ったらこれ
迷ったら「もっと見る」。フッターに届き、操作の主導権が利用者にあり、実装も軽い。ただし特定の位置へ戻る・共有する用途(検索結果・記事一覧)ならページ番号、終わりの無いフィードだけ無限スクロールにする。
図鑑に「もっと見る」ボタンの見本は無いので、押して続きが現れる開閉の見本で代用した。無限スクロールの見本も、一定件数で「もっと見る」に切り替えるハイブリッド型を解説で勧めている。
候補の見本
- クリック
ページネーション解説あり
Pagination
前へ/次へと番号ボタンで構成する定番ページャ。ページ数が多いときは「…」で省略し、現在のページを藍色で示す。クリックでページが切り替わる。
- JS
- スクロール
無限スクロール解説あり
Infinite Scroll
コンテナ内を下までスクロールすると自動でアイテムを追加読み込み。IntersectionObserverでsentinelを監視。
- JS
- クリック
高さ auto の開閉アニメ
Animate Height Auto (grid-rows)
grid-template-rows を 0fr → 1fr にトランジションさせて、中身の高さを測らずに開閉する。JS は aria-expanded を切り替えるだけで、高さの計算をしない。
- JS