マテリアルデザイン は何をしますか？
デジタル表面は、厚みと影を持つ紙のシートのように振る舞い、奥行きと動きがインターフェースの階層を説明します。
定義された高さに配置され、左上からのキーライトによって影を落とすフラットな色付き表面のシステム。大胆な色彩、8dpグリッド、目的を持った動きを特徴とします。Googleが2014年6月のI/Oで発表しました。
期間: 2014年〜現在 · 時代: タッチスクリーン · 分野: グラフィック＆UIデザイン · 別名: マテリアル、Googleマテリアル、マテリアル2
このスキルをロードするタイミング
ユーザーが次のように要求した場合にロードします: 「マテリアルデザイン」「マテリアルUI」「Googleマテリアル」「エレベーション」「フローティングアクションボタン」「FAB」「Androidスタイル」「リップルエフェクト」「アプリバー」「ペーパーアンドインク」「md2」。
適している用途: Androidアプリケーション、管理ダッシュボード、多くのコンポーネントを持つWebアプリ、デザインシステム、プロダクティビティツール。
使用すべきでない場合:
- ブランドに明確な個性が必要な場合（デフォルトの外観は明らかにGoogleのものになるため）
- ページがエディトリアルで、インタラクティブコンポーネントが少ない場合
- デザインに影が一切ない純粋な2Dルックが必要な場合
システムディレクティブ
マテリアルデザインでUIやグラフィックレイアウトを生成する場合、次のことを必ず実行しなければなりません:
- すべての表面を、決して曲がらず、引き伸ばされてサイズが変わらず、他の表面を通過しない、1dpの厚さの紙のシートとして扱うこと。
- 階層をdp単位のエレベーションで表現すること: ページは0、カードは1、アプリバーは4、フローティングボタンの通常状態は6、メニューは8、ナビゲーションドロワーは16、ダイアログは24。
- すべてのレイアウトを8dpグリッド上に構築すること。小さなテキストとアイコンの配置には4dp、タッチターゲットには48dpを使用すること。
- プライマリ色とアクセント色から大胆な色を使用し、ステータスバーにはプライマリ色の700シェード、アプリバーには500シェードを使用すること。
- Robotoで12、14、16、20、34、45、56spの定義されたスケールを持つ大きなタイポグラフィを使用すること。
- すべてのタッチに応答を与えること: タッチポイントから300msかけて成長する円形のリップル。
- 要素を曲線的なパスに沿って、高速で始まり低速で終わるイージングで移動させ、各動きがその要素がどこから来たのかを説明すること。
ガードレール
以下の各項目はスタイルを破ります。出力を返す前に、リストと照らし合わせて確認してください。
- 絶対に避けること: 表面のグラデーションとテクスチャ。
- 絶対に避けること: 一貫性のないエレベーションレベルや異なる光源方向を持つ影。
- 絶対に避けること: 同じ高さで重なる表面。
- 絶対に避けること: 48dp未満のタッチターゲット。
- 絶対に避けること: 4.5:1未満の、色付き背景上の色付きテキスト。
- 絶対に避けること: モーションやリップルフィードバックのない、瞬間的な状態変化。
- 絶対に避けること: 1つの画面に複数のフローティングアクションボタン。
ベクタープロファイル
| 軸 | スコア | 1の意味 | 5の意味 |
|---|---|---|---|
| 装飾性 | ■■□□□ 2/5 | 純粋なミニマル | マキシマリスト |
| 次元性 | ■■■□□ 3/5 | 厳密に2D | フル3D/空間的 |
| グリッドの厳密さ | ■■■■□ 4/5 | 混沌/有機的 | 厳密な数学的グリッド |
| スキューモーフィックなリアリズム | ■■□□□ 2/5 | 抽象的なデジタル | photorealisticな素材 |
| タイポグラフィの表現力 | ■■□□□ 2/5 | ニュートラル/不可視 | 実験的/イラスト的 |
これらのスコアを維持してください。リクエストがいずれかの軸を2ポイント以上動かした場合、スタイルから逸脱しています: 「系統的フォールバック」に進んでください。
空間＆グリッドロジック
- グリッドメカニクス: 8dpベースライングリッド、アイコンとタイプには4dp、16dpマージンの4カラム電話グリッド、24dpマージンの8カラムタブレットグリッド、12カラムデスクトップグリッド、アプリバーは電話で56dp、デスクトップで64dp。
- ホワイトスペース比率: 表面の25〜40%は空のまま。スペーシングスケールは4、8、16、24、32、48、56dp、カードのパディングは16dp。
- 配置ルール: アバターのあるリストでは、コンテンツは左端から72dpのキーラインに揃え、それ以外では16dpのキーラインに揃える。フローティングアクションボタンは右端と下端から16dpの位置に配置する。
- コンテナの形状: カードとボタンは2dpの角丸半径を使用。フローティングアクションボタンは56dpの円、ミニボタンは40dp。ダイアログは最小で280dp幅。
タイポグラフィ
- 分類: ネオグロテスクサンセリフ · ヒューマニストサンセリフ
- トラッキング: 34sp以上のディスプレイサイズは0em〜-0.01em。本文は+0.01em。ボタンは大文字で+0.09em。
- 行間: 見出し 1.2。本文 1.4〜1.5（14sp、20dp行上）。リストテキストは16spで24dp。
- 階層ルール:
- スケール12、14、16、20、34、45、56spを使用し、これらの値の間のサイズは使用しないこと。
- タイトルとボタンにはmedium（500）、本文にはregular（400）、45sp以上のディスプレイサイズにはlight（300）を使用すること。
- 表面上のテキストは、プライマリは87%黒、セカンダリは54%黒、無効は38%黒に設定すること。
- ボタンラベルは大文字で14sp、ウェイト500に設定すること。
フォントペアリング
| 表示 | 本文 | 備考 |
|---|---|---|
| Roboto | Roboto | マテリアル1および2のシステム書体。ウェイト300から900の単一ファミリーで使用。 |
| Roboto Condensed | Roboto | 密度の高いヘッダー用のコンデンスドディスプレイフェイス。標準テキストフェイスと組み合わせる。 |
| Noto Sans | Noto Sans | 非ラテン文字用のフォールバックファミリー。同じウェイトとメトリクス。 |
色彩＆照明
- パレット構造: 1つのプライマリ色相（500と700シェード付き）、1つのアクセント色相（A200〜A400範囲）、ニュートラルグレー。プライマリ色相はアプリバーと表面の10〜20%をカバー。
- コントラストルール: 本文テキストは少なくとも4.5:1、大きなテキストは少なくとも3:1を維持。Indigo 500上の白テキストは7.5:1、Pink A200上では3.4:1に達するが、これは18spテキストのみに十分。
- 表面処理: グラデーションやテクスチャのない、不透明でフラットな単色塗りつぶし。スクリムはダイアログの背後に32%不透明度の黒を使用。
- 光と影: 上部からのキーライトとソフトなアンビエントライト。各影には半影、本影、アンビエントレイヤーがあり、ぼかしとオフセットはエレベーションとともに増加。
パレット
| 名前 | 16進数 | 役割 |
|---|---|---|
| Surface | #FFFFFF | カードとシートの表面 |
| Background | #FAFAFA | ページ背景 |
| Indigo 500 | #3F51B5 | プライマリ色とアプリバー |
| Indigo 700 | #303F9F | ステータスバー |
| Pink A200 | #FF4081 | アクセント色とフローティングアクションボタン |
| Grey 900 | #212121 | 87%不透明度のテキスト |
マテリアリティ＆テクスチャ
- 表面シミュレーション: デジタルペーパー: 影を落とすが、木目、ベベル、テクスチャのない1dp厚のフラットシート。
- 境界ルール: 表面に輪郭線はない。区切り線は1px黒、12%不透明度で、端から72dpまたは16dpインセット。テキストフィールドは1pxの下線を持ち、フォーカス時に2pxに拡大。
- ぼかしとエレベーション: エレベーションシャドウ: 1dpは0 1px 3px（20%）+ 0 1px 1px（14%）、4dpは0 4px 5px（14%）+ 0 1px 10px（12%）、12dpは0 9px 12px（14%）。システムは0〜24dpの25段階を持つ。
装飾とアイコン
- アイコン: 20dpのライブエリア上の24dpのシステムアイコン、2dpのストロークウェイト、2dpの角丸の正方形端子、ソリッド塗りつぶし、54%黒の単色。
- イラスト: パレット内のフラットベクターシェイプ、20〜40%のスクリム下の全面写真。輪郭線とパースペクティブはなし。
- 装飾要素: フローティングアクションボタン · リップル · エレベーションシャドウ · カラーブロックアプリバー · 全面ヒーロー画像 · カード
モーション＆インタラクティビティ
- 画面上で生まれたか: はい
- トランジション物理: 表面はZ軸と画面平面に沿って曲線パスで移動。要素は高速で加速し、ソフトに減速する。共有要素は起点から終点へ移動。
- イージング: cubic-bezier(0.4, 0, 0.2, 1)
- 持続時間 (ms): 300
- ホバーとアクティブ: ホバーは4%黒のオーバーレイを追加。プレスはタッチポイントから300msかけて成長する12%黒のリップルを表示。持ち上げボタンはプレス時に2dpから8dpに浮上。
コード＆トークンプライマー
ルート要素に data-style="material-design" を設定し、トークンを貼り付けます。ファイル tokens.css には同じトークンと一連のリファレンスルールが含まれています。
[data-style="material-design"] {
--color-bg: #FAFAFA;
--color-surface: #FFFFFF;
--color-text: rgba(0, 0, 0, 0.87);
--color-muted: rgba(0, 0, 0, 0.54);
--color-primary: #3F51B5;
--color-accent: #FF4081;
--color-border: rgba(0, 0, 0, 0.12);
--font-sans: "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
--font-display: "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
--border-radius: 2px;
--border-width: 1px;
--shadow-elevation: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
--backdrop-filter: none;
--space-unit: 8px;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--duration: 300ms;
--color-primary-dark: #303F9F;
--shadow-1dp: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
--shadow-24dp: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
--touch-target: 48px;
--color-on-bg: #212121;
--color-on-surface: #212121;
--color-on-primary: #FAFAFA;
--color-on-accent: #212121;
--color-muted-on-bg: #737373;
--color-muted-on-surface: #757575;
--color-link: #3F51B5;
--color-link-on-surface: #3F51B5;
--display-weight: 300;
--subhead-weight: 500;
--body-weight: 400;
--strong-weight: 500;
--label-weight: 500;
--display-tracking: 0em;
--display-leading: 1.15;
--display-case: none;
--body-leading: 1.5;
--body-size: 16px;
--icon-stroke: 2;
}
Tailwind パターン:
| 要素 | クラス |
|---|---|
| ページ | min-h-screen bg-[#FAFAFA] font-sans text-black/[0.87] antialiased |
| アプリバー | flex h-14 md:h-16 items-center bg-[#3F51B5] px-4 text-xl font-medium text-white shadow-[0_2px_4px_-1px_rgba(0,0,0,0.2),0_4px_5px_0_rgba(0,0,0,0.14),0_1px_10px_0_rgba(0,0,0,0.12)] |
| カード | rounded-sm bg-white p-4 shadow-[0_1px_3px_0_rgba(0,0,0,0.2),0_1px_1px_0_rgba(0,0,0,0.14),0_2px_1px_-1px_rgba(0,0,0,0.12)] |
| ボタン | h-9 min-w-[64px] rounded-sm bg-[#3F51B5] px-4 text-sm font-medium uppercase tracking-[0.09em] text-white shadow-md transition-shadow duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:shadow-lg active:shadow-xl |
| FAB | h-14 w-14 rounded-full bg-[#FF4081] text-white shadow-[0_3px_5px_-1px_rgba(0,0,0,0.2),0_6px_10px_0_rgba(0,0,0,0.14),0_1px_18px_0_rgba(0,0,0,0.12)] |
ビジュアルパック
このスタイルの画像とアイコンはファイルです。そのまま使用するか、仕様として読み取り、同じ言語で独自に描画してください。
| ファイル | 内容 |
|---|---|
pack/hero.svg | ヒーロープレート、800 x 600。スタイルの視覚言語による抽象的な画像。 |
pack/pattern.svg | パターンタイル、80 x 80。両方向に繰り返します。 |
pack/icons.svg | アイコンスプライト: home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders。 |
- アイコン: ソリッド、24pxフィールド上でストローク2、バットキャップ、ラウンドジョイン、コンテナ: なし。使用法:
<svg class="icon"><use href="pack/icons.svg#home"/></svg>。アイコンはcurrentColorを継承します。 - アイコンファミリー: スプライトはGoogleのMaterial Symbols（Baseline, filled）から切り出されたもので、ライセンスはApache 2.0。理由: スタイル自体の塗りつぶしシステムセット、24dpグリッド上。デモ用のオープンソースの代替品です。製品では、ブランドのアイコンライブラリを使用し、以下のルールに従ってファミリーを選択してください。
- 表示タイプ: ウェイト300、トラッキング0em、行間1.15、ケース: なし。
- ウェイト: 表示300、小見出し500、本文400、テキスト内の太字500、ラベルとボタン500。このスタイルは3つのウェイト（300、400、500）のみを使用し、それ以外は使用しません。表示は本文より100軽く、サイズが階層を伝えます。アクセントはウェイト: より重い単語がアクセントとなるため、ウェイト間の段差は明確です。
- 本文タイプ: 16px、行間1.5。
- ページ: ヒーロー分割、左揃え、標準密度、アクセント傾き0°。
- テキストカラー:
--color-textはメインのリーディングフィールドのみに使用します。各フィールドでは、そのトークンを使用します:--color-on-bg、--color-on-surface、--color-on-primary、--color-on-accent。
アイコンパックの選び方
アイコンパックは絵のための書体です。テキストフェイスと同じ注意を払って選択してください。これらのルールは、オープンソースセットとライセンスライブラリの両方に適用されます。
- ストロークがステムと一致する。 アイコンをテキストサイズの本文テキストの隣に配置します。アイコンの線と文字のステムは同じウェイトを持ちます。
- 端子とコーナーは半径トークンに従う。 バットキャップとマイタージョインは半径ゼロに。ラウンドキャップとラウンドジョインはソフトな半径に。
- 塗りつぶしモードは時代のテクノロジーに従う。 印刷時代はソリッドフォームを切り抜きます。奥行きのあるスクリーン時代はフォームを塗りつぶし、シェーディングします。現在の製品インターフェースはアウトラインを描画します。
- メタファーはスタイルより新しいものであってはならない。 各画像はその時代が知っていたオブジェクトです。後の時代のメタファーを持つアイコンは時代を壊します。
- 1つのファミリー、1つのグリッド。 すべてのアイコンは1つのファミリーと1つのバリアントから、1つのフィールド上に描画されたものを使用します。1つの表面上でファミリーを混在させないでください。
- ファミリーは製品をカバーする。 コミットする前に、製品が必要とする各コンセプトをリストアップします。そのいずれかのアイコンを持たないファミリーは間違ったファミリーです。
- カラーはトークンである。 アイコンはcurrentColorを継承します。2番目のトーンはファイルではなくトークンから取得します。
- ライセンスが使用を許可する。 セットのライセンスを読みます。ライセンスが要求する場合はクレジットを記載します。ブランドを持つ製品はライセンスされたライブラリを使用し、同じルールを適用してファミリーを選択します。
系統的フォールバック
ユーザーがバリエーションを要求した場合、即興で作成しないでください。ここに名前のある隣接スタイルに向かってブレンドし、そのスキルをロードしてください。
- ユーザーがよりフラットを要求した場合:
flat-design（フラットデザイン）に向かって進みます。すべてのエレベーションシャドウを削除し、色のみで表面を分離し、カラーパレットと8dpグリッドを維持します。 - ユーザーがより触感的を要求した場合:
skeuomorphism（スキューモーフィズム）に向かって進みます。5〜10%のグラデーション、1pxのインナーハイライト、5%不透明度の表面テクスチャを追加し、エレベーションとレイアウトを維持します。 - ユーザーが...
...
[翻訳のため省略]