Compare
ページネーションのデザインシステム比較
ページネーション（Pagination）を、主要デザインシステムの思想・用途・実装の見方で比較します。
30秒でわかる要点
ページネーションを比較するときは、見た目だけでなく、どの画面で使うか、どの状態を持つか、OS標準とどれだけ近づけるかを見ます。
| デザインシステム | 参照先 | 見るポイント |
|---|---|---|
| Apple HIG | 公式を見る | iOS/macOS文脈での操作感、階層、アクセシビリティを確認する基準。 |
| Material 3 | 公式を見る | Android/Webでの状態表現、モーション、コンポーネント仕様を比較する基準。 |
| Fluent UI | 公式を見る | 業務アプリ、管理画面、Microsoft製品に近いUIの比較基準。 |
| shadcn/ui | 公式を見る | React + Tailwind CSSで実装する際の実用的な構成例。 |
デザインシステムごとの呼称差分
| デザインシステム | このページでの呼称 | 確認観点 |
|---|---|---|
| Apple Human Interface Guidelines | Apple HIG | iOS/macOS文脈での操作感、階層、アクセシビリティを確認する基準。 |
| Material Design | Material 3 | Android/Webでの状態表現、モーション、コンポーネント仕様を比較する基準。 |
| Microsoft Fluent UI | Fluent UI | 業務アプリ、管理画面、Microsoft製品に近いUIの比較基準。 |
| shadcn/ui | shadcn/ui | React + Tailwind CSSで実装する際の実用的な構成例。 |
次に見るページ
運営・更新・参照元
- 著者 / 運営
- Component Gallery 編集部
- 最終更新日
- 2026-07-16
- レビュー状態
- 未レビュー
参照元
- Apple Human Interface Guidelines参照確認日: 2026-07-16
- Material Design参照確認日: 2026-07-16
- Microsoft Fluent UI参照確認日: 2026-07-16
- shadcn/ui参照確認日: 2026-07-16
- W3C Web Content Accessibility Guidelines (WCAG)参照確認日: 2026-07-16
- WAI-ARIA Authoring Practices Guide参照確認日: 2026-07-16
- MDN Web Docs - Accessibility参照確認日: 2026-07-16
FAQ
ページネーションはどのデザインシステムを基準に比較すべきですか？
OS標準に寄せるならApple HIGやMaterial Design、業務WebアプリならFluent UIやshadcn/uiを合わせて確認します。
ページネーションの比較で見た目以外に確認することは？
状態、アクセシビリティ、キーボード操作、モバイル幅、実装ライブラリとの相性を確認します。
ページネーションを独自実装してもよいですか？
可能ですが、既存のOS標準やライブラリが担保している操作性とアクセシビリティを失わないようにします。