Material UI（MUI）は React で最も成熟した Material Design の実装であり、深くカスタマイズできる汎用コンポーネントライブラリとしても広く使われています。Material の魂はそのままに、エレベーションシャドウ、リップルフィードバック、4px の角丸を保ちます。Roboto の字階は 14px の本文とウェイト 500 のボタンで表現され、主色の青（#007FFF）が白のキャンバスと #F5F5F5 のサーフェスを覆い、余白は 8px グリッドに従います。高密度のデータテーブル、Chip、フローティングアクションボタンは標準装備です。管理画面と Android 風プロダクトに適しています。
Material UIフロントエンドフレームワーク
プロンプトテンプレート
基本テンプレート
Design a Material UI (MUI)-inspired interface. - Material Design with React: elevation shadows, ripple feedback, and 4px corner radii; - Roboto type scale with 14px body and 500-weight buttons; - Default palette #007FFF primary over #FFFFFF canvas with #F5F5F5 surfaces; - 8px spacing grid, contained buttons with sentence-case labels; - Dense data tables, chips, and floating action buttons for primary actions. Colors: #007FFF, #F5F5F5, #FFFFFF, #121212 with #007FFF accent. Typography: Roboto.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Material UI aesthetics. Use Material UI color identity with #007FFF accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Material UI style. Use Material UI color identity with #007FFF accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Material UI design language. Use Material UI color identity with #007FFF accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Material UI visual identity. Use Material UI color identity with #007FFF accents. Compelling, conversion-focused.
使用例
Material UI ダッシュボード
ダッシュボードBuild an admin dashboard with Material UI style: dense data tables, status chips, elevation cards, and #007FFF accent color.
Material UI アプリシェル
WebCreate a web app shell with Material UI design language: app bar, navigation drawer, elevated cards, and Roboto typography.
✅ 適した用途
- React プロジェクト
- エンタープライズアプリ
- Material Design プロダクト
❌ 適さない用途
- 反 Material スタイルのブランドデザイン
- 軽量で依存のない静的ページ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。