もっと読むボタン式ページネーション
「もっと読む」ボタン式のページネーションは、ページ番号で移動する従来型と違い、現在の一覧の下に続きを 追記 していくUIです。残り件数をボタンラベルに出すことで、あとどれだけあるかを利用者が把握しやすくなります。
このパーツの使いどころと実装ポイント
「もっと読む」ボタン式のページネーションは、ページ番号で移動する従来型と違い、現在の一覧の下に続きを追記していくUIです。残り件数をボタンラベルに出すことで、あとどれだけあるかを利用者が把握しやすくなります。リストは <ul> と <li> の素直なマークアップで、ボタンは id="pgLmBtn" を起点に追加読み込みを発火させる前提です。
向いている場面
- 記事が増え続けるブログやお知らせ一覧
- 商品を続けて眺めたいECのカテゴリページ
- 1ページ目を軽く保ちつつ続きを見せたいSPA
カスタマイズの勘所は、まず1回の追加で読む件数を内容に合わせて調整すること。テキスト中心なら多め、画像が重い一覧なら少なめが快適です。ラベルの「残り◯件」は実データと連動させ、最後まで読み切ったらボタンを非表示にするか「すべて表示しました」に切り替えます。
実装上の注意
無限スクロールと違いユーザー操作で読み込むため、フッターに到達できる利点があります。一方でSEOやブックマーク性を考えると、追加分のURLも辿れる作りにしておくと安心です。連打対策として読み込み中はボタンを disabled にし、追加した要素にフォーカスを移すとキーボード操作でも迷いません。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
無限スクロールとどちらが良いですか
フッターのリンクに到達させたい、ユーザーに読み込みのタイミングを委ねたい場合はボタン式が向きます。とにかく没入させて読み進めてほしいSNS的な体験なら無限スクロールが合います。記事サイトやECはボタン式が無難です。
残り件数はどう出していますか
ボタンのラベルにテキストとして埋め込んでいます。実装時はサーバーから返る総件数と表示済み件数の差を計算して書き換え、残りが0になったらボタンを隠すか文言を切り替える運用にすると親切です。