UI Style
マテリアル系UI（Material-inspired UI）
紙の重なりや状態表現を参考に、カード、FAB、チップなどで階層を明確にするスタイルです。
カード、チップ、FABで階層と操作状態を表します。
30秒でわかる要点
紙の重なりや状態表現を参考に、カード、FAB、チップなどで階層を明確にするスタイルです。
視覚的特徴
- ・カードのレイヤー
- ・明快な状態表現
- ・丸みと余白の体系化
メリット
- ・画面構造を体系化しやすい
- ・モバイルUIに展開しやすい
- ・状態や操作が伝わりやすい
デメリット
- ・Googleらしさが強く出ることがある
- ・余白が大きく情報密度が下がる場合がある
向いている用途
- ・Androidアプリ
- ・Flutterアプリ
- ・フォーム中心のWebアプリ
避けた方がよい用途
- ・独自ブランドを強く出したいUI
- ・高密度な業務テーブル中心画面
関連コンポーネント
カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。
ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。
ボトムシート（Bottom Sheet）ボトムシート（Bottom Sheet）は、モバイルUIで画面下部からスライドアップするパネルコンポーネント。ドロワーのモバイル版に相当し、アクションメニューや詳細情報の表示に使われる。
トースト（Toast）トースト（Toast）は、画面の端に短時間表示されるフィードバックメッセージ。操作の成功・失敗・情報を短く伝える。一定時間後に自動的に消える。
タブナビゲーション（Tab Navigation）タブナビゲーション（Tab Navigation）は、ページレベルのコンテンツ切り替えを担うナビゲーション型タブ。URLルーティングと連動し、現在アクティブなセクションを示す。
関連画面
関連デザインシステム
AI実装プロンプト
React + Tailwind CSS
React + Tailwind CSSでマテリアル系のカードUIを作成してください。カード階層、FAB、チップ、明確なhover/focus状態を含め、余白は広めにしてください。
運営・更新・参照元
- 著者 / 運営
- Component Gallery 編集部
- 最終更新日
- 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
Material Designそのものとは違いますか？
ここでは公式仕様そのものではなく、カードや状態表現などMaterial Designに影響を受けた見た目の傾向として扱います。