Microsoft
Fluent UIとは？
Microsoft製品群で使われるデザインシステム。業務アプリ、管理画面、情報密度の高いUIの参考になる。
最終更新日: 2026-07-16 / レビュー状態: 未レビュー
30秒でわかる要点
Microsoft製品群で使われるデザインシステム。業務アプリ、管理画面、情報密度の高いUIの参考になる。
強み
- ・業務UIとの相性
- ・情報密度の高い画面
- ・React実装の参照性
関連コンポーネント
ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。テーブル（Table）テーブル（Table）は、構造化されたデータを行と列で表示するコンポーネント。ソート・フィルタ・ページネーション機能と組み合わせて使用される。サイドバー（Sidebar）サイドバー（Sidebar）は、画面左右に配置する縦型のナビゲーションメニュー。多階層メニューの展開や折りたたみに対応し、管理画面・ダッシュボードで多用される。ナビゲーション（Navigation）ナビゲーション（Navigation）は、サイトやアプリ内の主要な画面遷移を提供するナビゲーションバー。水平・垂直・サイドバー型などのレイアウトバリエーションを持つ。ツールチップ（Tooltip）ツールチップ（Tooltip）は、要素にホバーまたはフォーカスしたときに表示される補足情報。短いテキストで要素の説明や補足を行う。モーダル（Modal）モーダル（Modal）は、メインコンテンツの上に重なって表示される、フォーカスを要求するダイアログ。確認・入力・情報提示に使用される。
設計・実装リソース
FAQ
Fluent UIはどんなUI設計で参考にするとよいですか？
管理画面、業務アプリ、Microsoft 365に近い情報密度の高いUIを設計するときに参考になります。
Fluent UIとMaterial Designはどう使い分けますか？
Material DesignはAndroidやFlutterの標準体験に強く、Fluent UIは業務アプリやテーブル中心の操作画面で参照しやすい設計です。
Fluent UIで特に見るべきコンポーネントは何ですか？
Table、Sidebar、Dialog、Tooltip、Buttonなど、業務アプリで頻出する操作と情報整理に関わるコンポーネントを優先して確認します。
運営・更新・参照元
- 著者 / 運営
- Component Gallery 編集部
- 最終更新日
- 2026-07-16
- レビュー状態
- 未レビュー
参照元
- Fluent 2 Design System参照確認日: 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