Compare
モーダルのデザインシステム比較
モーダル（Modal）を、主要デザインシステムの思想・用途・実装の見方で比較します。
30秒でわかる要点
モーダルを比較するときは、見た目だけでなく、どの画面で使うか、どの状態を持つか、OS標準とどれだけ近づけるかを見ます。
Visual Dictionary
見た目で選べるUIプレビュー
モーダルを複数のデザイン思想で並べた自前HTML/CSSプレビューです。外部スクリーンショット転載ではなく、Component Gallery側で作成した見本として、実装したい方向性をすぐ比較できます。
Apple系
半透明・余白・控えめな階層
モーダル
確認内容を短く伝え、操作を2つに絞る。
iOS/macOSアプリのように、面の重なりと丸みで状態を伝える見せ方。
状態見本
React / Tailwind CSS
Tailwind CSS環境に貼り付けて、文言・色・状態名をプロダクトに合わせて調整します。
Material系
色面・状態レイヤー・明確な操作対象
モーダル
確認内容を短く伝え、操作を2つに絞る。
Android/Web向けに、トーナルカラーとタッチしやすい面で構造を見せる。
状態見本
React / Tailwind CSS
Tailwind CSS環境に貼り付けて、文言・色・状態名をプロダクトに合わせて調整します。
Fluent系
業務UI・細い境界・情報密度
モーダル
確認内容を短く伝え、操作を2つに絞る。
管理画面やSaaSで、表組み・コマンド・状態を静かに整理する。
状態見本
React / Tailwind CSS
Tailwind CSS環境に貼り付けて、文言・色・状態名をプロダクトに合わせて調整します。
shadcn系
中立・実装しやすい・Tailwind向き
モーダル
確認内容を短く伝え、操作を2つに絞る。
Reactで組みやすい余白、境界、フォーカス状態を優先した見せ方。
状態見本
React / Tailwind CSS
Tailwind CSS環境に貼り付けて、文言・色・状態名をプロダクトに合わせて調整します。
| デザインシステム | 参照先 | 見るポイント |
|---|---|---|
| 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-20
- レビュー状態
- 未レビュー
参照元
- Apple Human Interface Guidelines参照確認日: 2026-07-20
- Material Design参照確認日: 2026-07-20
- Microsoft Fluent UI参照確認日: 2026-07-20
- shadcn/ui参照確認日: 2026-07-20
- W3C Web Content Accessibility Guidelines (WCAG)参照確認日: 2026-07-20
- WAI-ARIA Authoring Practices Guide参照確認日: 2026-07-20
- MDN Web Docs - Accessibility参照確認日: 2026-07-20
FAQ
モーダルはどのデザインシステムを基準に比較すべきですか？
OS標準に寄せるならApple HIGやMaterial Design、業務WebアプリならFluent UIやshadcn/uiを合わせて確認します。
モーダルの比較で見た目以外に確認することは？
状態、アクセシビリティ、キーボード操作、モバイル幅、実装ライブラリとの相性を確認します。
モーダルを独自実装してもよいですか？
可能ですが、既存のOS標準やライブラリが担保している操作性とアクセシビリティを失わないようにします。