ブログ記事
- Next.js
- ページネーション
- ブログ設計
- UX
- Tips
ブログ一覧を15件ずつページ送りにする目安（Next.js）
"記事数が増えてきたNext.jsブログで、ページネーションの件数をどう決めるか迷ったことはありますか。テキスト中心の一覧なら15件が無難な出発点です。定数化の方法と判断基準を実測をもとに解説します。"
記事が増えてくると、一覧を全件スクロールさせるのが少し辛くなってきます。
「何件ずつ区切ればいいの？」という問いに、明確な正解はありません。ただ、判断の出発点になる目安はあります。
この記事の結論
- テキスト中心のブログ一覧は 15件/ページ が無難な出発点
- サムネカード型は 10〜12件 が目安（縦スクロールが長くなりやすいため）
- 件数は
BLOG_PAGE_SIZEのような定数に切り出し、一覧・ページリンクで共有する
なぜ「全件表示」より「ページ送り」が安定しやすいか
記事数が20〜30件を超えてくると、全件スクロールにはいくつかの問題が出てきます。
- モバイルで一覧の末尾まで届きにくい
- ページ読み込みサイズが増えてくる（静的生成でも props のサイズは膨らむ）
- 「あの記事どこだっけ」という探しにくさが増す
ページ送りを入れると、ユーザーが「今どのあたりにいるか」を把握しやすくなります。
件数をどう決めるか
一覧の見た目で変わる
| 一覧タイプ | 目安の件数 | 理由 |
|---|---|---|
| テキスト中心（タイトル＋日付） | 15件 | 1行が短く、スクロール量が増えにくい |
| サムネカード型 | 10〜12件 | カードの縦高さがあり、ページが長くなりやすい |
| 混在（アイキャッチあり＋なし） | 10〜12件 | 視覚的なリズムを崩さないよう少なめに |
ToolArcの場合、現時点ではテキスト中心のシンプルな一覧のため、15件を採用しています（執筆時点 2026-06-05）。
記事数でページ数の目安を確認する
| 記事数 | 10件/ページ | 15件/ページ | 20件/ページ |
|---|---|---|---|
| 30件 | 3ページ | 2ページ | 2ページ |
| 60件 | 6ページ | 4ページ | 3ページ |
| 100件 | 10ページ | 7ページ | 5ページ |
ページ数が増えすぎると「ページを送る操作」自体がユーザーの負担になります。
記事数の増加ペースと、どこまでページを送ってもらえるかを念頭に置いて件数を決めると判断しやすいです。
実装：定数で一元管理する
件数をハードコードすると、後で変えたいときに複数箇所を直す羽目になります。
定数ファイルに切り出しておくのが無難です。
// lib/blog/pagination.ts
export const BLOG_PAGE_SIZE = 15;
一覧ページと next/prev リンクの両方でこの定数を参照します。
// lib/blog/list-articles.ts（抜粋）
import { BLOG_PAGE_SIZE, getBlogTotalPages } from "./pagination";
const start = (page - 1) * BLOG_PAGE_SIZE;
const pageSlugs = sortedSlugs.slice(start, start + BLOG_PAGE_SIZE);
定数を1箇所にまとめておくと、「やっぱり12件にしよう」と思ったときに1行直すだけで済みます。
チェックリスト
- 一覧がテキスト中心かサムネカード型かを確認した
- 現時点の記事数と想定ページ数を計算した
- 件数を定数（
BLOG_PAGE_SIZEなど）として1箇所に切り出した - 一覧・前後リンクで同じ定数を参照している
次に読む
ページ送りを実装したあと「ページを送ったのに画面が上に戻らない」ことがあります。
→ App Routerでページ送り後に#all-articlesへスクロールする
本記事の内容はNext.jsの仕様変更により古くなる可能性があります。実装時は公式ドキュメントもあわせてご確認ください。掲載情報は執筆時点（2026-06-05）のものです。