作成日: 2025年3月15日
紙と同様の質感と物理的特性を持つ表面と、その表面に表示されるコンテンツが基本です。
印刷デザインの基本(タイポグラフィ、グリッド、スペース、色、画像)がユーザー体験を導きます。
ユーザーの行動に対するフィードバックとして、自然で意味のあるアニメーションを提供します。
基本デザイン言語を維持しながら、ブランドの個性を表現できる柔軟なシステムです。
Material Designでは、影の大きさと強さで要素のエレベーション(高さ)を表現します。
dp 1
dp 3
dp 6
dp 12
dp 24
光源は常に画面の上から照射され、一貫した影を作り出します。
各UIコンポーネントは特定のエレベーションを持ちます:
Material Designでは体系的な色彩設計で視覚的一貫性を確保します。
ブランドを表すメインカラーとその派生色
アクセントとして使用し、主要なアクションを強調
背景色とエラー表示用の特殊カラー
HTML/CSSでのMaterial Design実装には、Googleの公式ドキュメントと提供されているコンポーネントライブラリを活用することをお勧めします。