Material Design は Google のクロスプラットフォーム設計システムで、「マテリアル」のメタファーで UI を組織します。コンポーネントは層をなして積み重なる紙片であり、エレベーションのシャドウが階層を表現し、ダイナミックカラー（Material You）がユーザーの壁紙からテーマカラーを導出します。トークン体系はライト／ダークテーマとモーションの規範を貫き、角丸、状態レイヤー、リップルフィードバックに明確な取り決めがあります。Android エコシステム、クロスプラットフォーム製品、体系的な規範が必要な中～大規模チームに適しています。
Materialプロフェッショナルとエンタープライズ
プロンプトテンプレート
基本テンプレート
Design a Material Design-inspired interface. Colors: #C8B3FD, #16A34A, #D97706, #DC2626 with #16A34A accent. Typography: #6442D6.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Material Design aesthetics. Use Material Design color identity with #16A34A accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Material Design style. Use Material Design color identity with #16A34A accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Material Design design language. Use Material Design color identity with #16A34A accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Material Design visual identity. Use Material Design color identity with #16A34A accents. Compelling, conversion-focused.
使用例
Material アプリ
WebBuild a web app with Material Design design language and #16A34A color system.
Material ダッシュボード
ダッシュボードCreate a dashboard using Material Design style with data visualization and #6442D6 typography.
✅ 適した用途
- エンタープライズ製品
- クロスプラットフォーム製品の一貫した UI 体系
- Android エコシステムのアプリと公式サイト
❌ 適さない用途
- 洗練を拒むブルータリズムのサイト
- 強いブランド個性が必要なアートページ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。