Sparkle Design

ページネーションはページの切り替えるためのナビゲーションを提供するために使用するコンポーネントです。

Figma
Pagination の概要図

Anatomy: 解剖図

Paginationの構成要素を示す解剖図。1は先頭のページへ遷移するためのボタン要素を表すFirstButtonを、2は前のページへ遷移するためのボタン要素を表すPrevButtonを、3は任意のページへ遷移するためのボタン要素を表すPageButtonを、4はオーバーフローを表すテキスト要素を表すEllipsisを、5は次のページへ遷移するためのボタン要素を表すNextButtonを、6は末尾のページへ遷移するためのボタン要素を表すLastButtonを示します。1~6は左から順番に配置されています。
ItemNameDescriptionComponentOptional
1FirstButton先頭のページへ遷移するためのボタン要素Icon Button任意
2PrevButton前のページへ遷移するためのボタン要素Icon Button—
3PageButton任意のページへ遷移するためのボタン要素Icon Button任意
4Ellipsisオーバーフローを表すテキスト要素任意
5NextButton次のページへ遷移するためのボタン要素Icon Button—
6LastButton末尾のページへ遷移するためのボタン要素Icon Button任意

Options: 選択肢

isEdges:True

isEdges:False

isPages:True

isEdgesおよびisPagesがTrueのPagination。「最初へ」と「前へ」の移動ボタン、1から4までのページ番号、中略を示す省略記号、最後のページ番号である9、そして「次へ」と「最後へ」の移動ボタンが順に表示されています。

ページと両端へ遷移するボタンを表示する オプションです。

isEdgesがFalse、isPagesがTrueのPagination。「前へ」の移動ボタン、1から4までのページ番号、中略を示す省略記号、最後のページ番号である9、そして「次へ」の移動ボタンが順に表示されています。

ページへ遷移するボタンを表示する オプションです。

isPages:False

isEdgesがTrue、isPagesがFalseのPagination。ページ番号は表示されず、「最初へ」「前へ」「次へ」「最後へ」の移動ボタンのみが順に表示されています。

両端へ遷移するボタンを表示するオプションです。

isEdgesおよびisPagesがFalseのPagination。ページ番号は表示されず、「前へ」と「次へ」の移動ボタンのみが順に表示されています。

ページと両端へ遷移するボタンを表示しないオプションです。

States: 状態

Default

Default Enable状態のPagination。「前へ」の移動ボタン、1から3までのページ番号、そして「次へ」の移動ボタンが順に表示されています。

Enable

ユーザーがボタンを操作する前のデフォルトの状態。

Default Hover状態のPagination。「前へ」の移動ボタン、1から3までのページ番号、そして「次へ」の移動ボタンが順に表示されています。ページ番号「1」には白色の背景が適用されており、現在選択されているページであることを示しています。

Hover

ユーザーがボタンにマウスオーバーしている状態。

Default Active状態のPagination。「前へ」の移動ボタン、1から3までのページ番号、そして「次へ」の移動ボタンが順に表示されています。各ボタンは濃いグレーの背景で表示されており、現在選択されていることを示すページ番号「1」には薄いグレーの背景が適用されています。

Active

ユーザーがボタンを操作している状態。

Default Focus状態のPagination。「前へ」の移動ボタン、1から3までのページ番号、そして「次へ」の移動ボタンが順に表示されています。ページ番号「1」のボタンは青い枠線で囲まれており、フォーカスが当たっている状態であることを示しています。

Focus

ユーザーがタッチ操作や、キーボードや音声による操作を用いてボタンに注視している状態。

Current

Current Enable状態のPagination。「前へ」の移動ボタン、1から3までのページ番号、そして「次へ」の移動ボタンが順に表示されています。ページ番号「1」には白い背景と青い枠線が適用されており、現在表示されているページであることを示しています。

Enable

現在のページが選択されている状態。

Current Hover状態のPagination。「前へ」の移動ボタン、1から3までのページ番号、そして「次へ」の移動ボタンが順に表示されています。現在表示されているページ番号「1」のボタンには青い枠線と薄い青い背景が適用されており、マウスオーバーされている状態であることを示しています。

Hover

現在のページが選択されており、ユーザーがボタンにマウスオーバーしている状態。

Current Active状態のPagination。「前へ」の移動ボタン、1から3までのページ番号、そして「次へ」の移動ボタンが順に表示されています。現在表示されているページ番号「1」のボタンには青い枠線と、Hover時よりも濃い青色の背景が適用されており、現在選択している状態であることを示しています。

Active

現在のページが選択されており、ユーザーがボタンを操作している状態。

Current Focus状態のPagination。「前へ」の移動ボタン、1から3までのページ番号、そして「次へ」の移動ボタンが順に表示されています。現在表示されているページ番号「1」のボタンには青い枠線と青い背景が適用されており、フォーカスが当たっている状態であることを示しています。

Focus

ユーザーがタッチ操作や、キーボードや音声による操作を用いてボタンに注視している状態。

Behaviors: 振る舞い

切り捨て

ページ数が最大表示制限を超える場合、省略記号ellipsisを使用して残りのページを切り捨てます。

現在のページが最初のページと最後のページの両方から5ページ以上離れている場合は、前後に省略記号を使用する「二重切り捨て」を適用します。

ユーザーの現在地が常に中央に近く表示されるようにしましょう。

切り捨ての振る舞いを示す図。「最初へ」「前へ」の移動ボタン、1から4までのページ番号、中間のページ番号が切り捨てられていることを示す省略記号、最後のページ番号である9、そして「次へ」「最後へ」の移動ボタンが順に表示されています。
二重切り捨ての振る舞いを示す図。「最初へ」と「前へ」の移動ボタン、最初のページ番号である1、前半のページが切り捨てられていることを示す省略記号、中間のページ番号である5と6、後半のページが切り捨てられていることを示す省略記号、最後のページ番号である12、そして「次へ」と「最後へ」の移動ボタンが順に表示されています。

Metrics: 寸法

  • Vertical Resizing: Hug
  • Horizontal Resizing: Hug
  • Container Height: 32px
  • Item Spacing: 8px
寸法仕様を示す図。

Usage: 使い方

適切な使用例。「前へ」の移動ボタン、1から3までのページ番号、そして「次へ」の移動ボタンが順に配置されたPagination。ページ番号「1」には青い枠線と白い背景が適用されており、現在選択されているページであることが視覚的に正しく示されています。
Do

1ページに表示する結果が多い場合は、ページネーションを使用しましょう。ページ数が3ページ以上ある場合や、ページ数が多くユーザーが直接ページを指定する必要がある場合はisPagesVisibleを使います。

不適切な使用例。「前へ」の移動ボタン、ページ番号「1」、そして「次へ」の移動ボタンのみが表示されたPagination。ページ番号「1」が選択状態（青い枠線と白い背景）になっています。
Don’t

1ページしかない場合はページネーションを使用しないでください。

不適切な使用例。「最初へ」「前へ」の移動ボタン、1から4までのページ番号、そして「次へ」「最後へ」の移動ボタンが順に表示されたPagination。ページ番号「1」が選択状態（青い枠線と白い背景）になっていますが、ページ数が少なくすべての番号が表示されています。
Don’t

ページ数が8ページ以下の場合やスクロールや別の手段で簡単にページ移動できる場合はisEdgesVisibleは使用しないでください。

Related Components: 関連コンポーネント

Icon Button
Button

Change log: 変更履歴

DateChanges
2025/07/01ドキュメントを更新
2024/12/06ドキュメントを公開
2023/10/14Figmaを公開
小さな気づきや違和感があれば、お気軽に教えてください。
フィードバック
Chat illustration
前へ次へ