Material Designとは？
Googleが提供するデザインシステム。Material 3では色、形、状態、モーションを含む体系的なUI指針を提供する。
最終更新日: 2026-07-20 / レビュー状態: 未レビュー
30秒でわかる要点
Googleが提供するデザインシステム。Material 3では色、形、状態、モーションを含む体系的なUI指針を提供する。
強み
- ・状態表現が体系的
- ・Androidとの親和性
- ・Flutter実装に展開しやすい
関連コンポーネント
ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。
テキスト入力（Input）テキスト入力（Input）は、ユーザーがテキストを入力するための単行・複数行フォームフィールド。バリデーション状態（エラー・無効）の表現も含む。
カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。
ナビゲーション（Navigation）ナビゲーション（Navigation）は、サイトやアプリ内の主要な画面遷移を提供するナビゲーションバー。水平・垂直・サイドバー型などのレイアウトバリエーションを持つ。
ボトムシート（Bottom Sheet）ボトムシート（Bottom Sheet）は、モバイルUIで画面下部からスライドアップするパネルコンポーネント。ドロワーのモバイル版に相当し、アクションメニューや詳細情報の表示に使われる。
トースト（Toast）トースト（Toast）は、画面の端に短時間表示されるフィードバックメッセージ。操作の成功・失敗・情報を短く伝える。一定時間後に自動的に消える。
設計・実装リソース
FAQ
Material DesignはどんなUI設計で参考にするとよいですか？
Android、Flutter、Webで、状態、余白、色、モーションを体系的に揃えたいときに参考になります。
Material 3と従来のMaterial Designは何が違いますか？
Material 3では動的カラー、形状、状態表現、コンポーネント仕様がより現在のAndroid体験に合わせて整理されています。
Material Designを業務アプリに使うときの注意点は？
情報密度が高い画面では余白やカード表現が大きくなりすぎないように、Fluent UIやCarbonなどの業務UI系ガイドと比較して調整します。
運営・更新・参照元
- 著者 / 運営
- Component Gallery 編集部
- 最終更新日
- 2026-07-20
- レビュー状態
- 未レビュー
参照元
- Material Design参照確認日: 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