material-design-3-color

Name: material-design-3-color
Author: shelbeely

github.com/shelbeelyデザイン・UI536 回インストール36 週間前に更新

material-design-3-color について

Material Design 3 Expressive の色彩とテーマ設計を UI に適用するための、デザイナーや開発者向けガイドです。ダイナミックカラー、セマンティックトークン、アクセシビリティを扱い、CSS トークンとサンプルも含みます。

主な機能

015 種のトーンパレットと色の役割
02ライト・ダークテーマの指針
03固定アクセント色とサーフェス階層
04標準・中・高コントラストの指針
05CSS 色トークンとサンプル素材

活用シーン

01UI の M3 色トークンを統一する
02ソースカラーから動的配色を設計する
03テキストや操作要素のコントラストを確認する

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/shelbeely/shelbeely-agent-skills --skill material-design-3-color

インストール後、Claude Code で/material-design-3-colorを入力して読み込まれたか確認します。

同梱ファイルexamples/color-roles.svgtokens.css

詳細

Material Design 3 のカラーとダイナミックテーマ

概要

このスキルでは、Material Design 3（M3）の表現豊かなカラーとテーマ設定の原則を適用し、鮮やかでアクセシブル、かつ感情に訴えるユーザーインターフェースを作成する方法を説明します。

キーワード：Material Design 3、M3、ダイナミックカラー、テーマ設定、カラーパレット、Material You、アクセシビリティ、カラートークン、サーフェスカラー、アクセントカラー、固定アクセントカラー、強調カラー、コントラストレベル

基本原則

ダイナミックカラーシステム

Material Design 3 のカラーシステムはダイナミックカラーの概念に基づいており、ユーザーの好みや状況に応じてインターフェースを適応させられます。

トーンパレット：複数のトーン（0～100）を持つ5つの主要なトーンパレット（Primary、Secondary、Tertiary、Neutral、Neutral Variant）を使用します
カラーロール：26以上のカラーロールをUI要素に割り当てます（例：primary、onPrimary、primaryContainer、onPrimaryContainer）
アダプティブテーマ：適切なコントラストを備えたライトテーマとダークテーマの両方をサポートします
ユーザーによるパーソナライズ：ユーザーの壁紙や好みに応じて配色を適応させます（Material You）
固定アクセントカラー：ブランドアイデンティティのため、ライトテーマとダークテーマで一貫して保たれるカラートークンを用意します
強調カラー：主要なUI要素に、より大胆で鮮やかなカラーロールを使用して、明瞭さと感情的な訴求力を高めます

カラーパレットの構成

カラーパレットを作成する際は、次の構成に従います。

Primary パレット（主要なブランドカラー）：

Primary：主要なインタラクティブ要素（ボタン、アクティブ状態）
On Primary：Primary カラー上のテキスト／アイコン
Primary Container：主要なコンポーネント向けの目立つ塗りつぶし色
On Primary Container：Primary Container 上のテキスト／アイコン
Primary Fixed：ライトテーマとダークテーマで一定に保たれます
On Primary Fixed：Primary Fixed 上のテキスト／アイコン
Primary Fixed Dim：固定サーフェス上で二次的な強調に使う暗めのバリエーション

Secondary パレット（補完的なアクセント）：

Secondary：目立ちにくいコンポーネント
On Secondary：Secondary 上のテキスト／アイコン
Secondary Container：色味を加えた背景
On Secondary Container：Secondary Container 上のテキスト／アイコン
Secondary Fixed：ライトテーマとダークテーマで一定に保たれます
On Secondary Fixed：Secondary Fixed 上のテキスト／アイコン
Secondary Fixed Dim：固定サーフェス向けの暗めのバリエーション

Tertiary パレット（対照的なアクセント — 現在はブランディングやハイライトに使う、目立つ表現豊かなアクセント）：

Tertiary：対照的なアクセントとハイライト
On Tertiary：Tertiary 上のテキスト／アイコン
Tertiary Container：入力要素
On Tertiary Container：Tertiary Container 上のテキスト／アイコン
Tertiary Fixed：ライトテーマとダークテーマで一定に保たれます
On Tertiary Fixed：Tertiary Fixed 上のテキスト／アイコン
Tertiary Fixed Dim：固定サーフェス向けの暗めのバリエーション

Neutral パレット（サーフェスと背景）：

Surface：コンポーネントのデフォルトの背景
On Surface：Surface 上のテキスト
Surface Variant：代替サーフェスカラー
On Surface Variant：Surface Variant 上のテキスト
Surface Dim：強調を抑える暗めのサーフェス
Surface Bright：強調を高める明るめのサーフェス
Surface Container Lowest：最も強調度の低いコンテナサーフェス
Surface Container Low：強調度の低いコンテナサーフェス
Surface Container：デフォルトのコンテナサーフェス
Surface Container High：強調度の高いコンテナサーフェス
Surface Container Highest：最も強調度の高いコンテナサーフェス
Outline：境界線と区切り線
Outline Variant：装飾要素
Inverse Surface：コントラスト要素向けの反転サーフェス（例：スナックバー）
Inverse On Surface：Inverse Surface 上のテキスト
Inverse Primary：反転サーフェス上で使用するPrimaryカラー

Error／Warning／Success（フィードバックカラー）：

Error、Warning、Successと、それぞれに対応する「On」カラーおよびコンテナ

アクセシビリティガイドライン

コントラストレベル（M3 Expressive では3段階のレベルが標準化されています）：
- 標準：ほとんどのユーザーに適したデフォルトのコントラスト
- 中：読みやすさを向上させるコントラスト
- 高：弱視のユーザーや高コントラストを好むユーザー向けの最大限のコントラスト
- 3段階すべてがトークン化されているため、簡単に実装できます
コントラスト要件：
- テキストのコントラスト：本文テキストは最低4.5:1、大きなテキストは最低3:1（WCAG AA）
- インタラクティブ要素：背景に対して最低3:1のコントラスト
- 適切なコントラストを確保するために「On」カラーを使用します
色に依存しない設計：
- 情報の伝達に色だけを頼らないでください
- 色と併せてアイコン、テキストラベル、またはパターンを使用します
- 色覚に配慮した組み合わせにします
ダイナミックレンジ：
- ライトテーマ：サーフェスには高いトーン（90〜99）、強調には低いトーン（10〜40）を使用します
- ダークテーマ：サーフェスには低いトーン（10〜20）、強調には高いトーン（80〜90）を使用します

実装ガイドライン

カラートークンシステム

すべての色に CSS カスタムプロパティ（変数）を使用します。M3 Expressive では、26以上のカラー役割が導入されています。

:root {
  /* Primary */
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EADDFF;
  --md-sys-color-on-primary-container: #21005D;
  
  /* Primary Fixed (consistent across themes) */
  --md-sys-color-primary-fixed: #EADDFF;
  --md-sys-color-on-primary-fixed: #21005D;
  --md-sys-color-primary-fixed-dim: #D0BCFF;
  --md-sys-color-on-primary-fixed-variant: #4F378B;
  
  /* Secondary */
  --md-sys-color-secondary: #625B71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E8DEF8;
  --md-sys-color-on-secondary-container: #1D192B;
  
  /* Secondary Fixed */
  --md-sys-color-secondary-fixed: #E8DEF8;
  --md-sys-color-on-secondary-fixed: #1D192B;
  --md-sys-color-secondary-fixed-dim: #CCC2DC;
  --md-sys-color-on-secondary-fixed-variant: #4A4458;
  
  /* Tertiary */
  --md-sys-color-tertiary: #7D5260;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFD8E4;
  --md-sys-color-on-tertiary-container: #31111D;
  
  /* Tertiary Fixed */
  --md-sys-color-tertiary-fixed: #FFD8E4;
  --md-sys-color-on-tertiary-fixed: #31111D;
  --md-sys-color-tertiary-fixed-dim: #EFB8C8;
  --md-sys-color-on-tertiary-fixed-variant: #633B48;
  
  /* Surface and Surface Containers */
  --md-sys-color-surface: #FEF7FF;
  --md-sys-color-on-surface: #1D1B20;
  --md-sys-color-surface-variant: #E7E0EC;
  --md-sys-color-on-surface-variant: #49454F;
  --md-sys-color-surface-dim: #DED8E1;
  --md-sys-color-surface-bright: #FEF7FF;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F2FA;
  --md-sys-color-surface-container: #F3EDF7;
  --md-sys-color-surface-container-high: #ECE6F0;
  --md-sys-color-surface-container-highest: #E6E0E9;
  
  /* Inverse */
  --md-sys-color-inverse-surface: #322F35;
  --md-sys-color-inverse-on-surface: #F5EFF7;
  --md-sys-color-inverse-primary: #D0BCFF;
  
  /* Outlines */
  --md-sys-color-outline: #79747E;
  --md-sys-color-outline-variant: #CAC4D0;
  
  /* Error */
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;
  
  /* Scrim and Shadow */
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

[data-theme="dark"] {
  /* Primary */
  --md-sys-color-primary: #D0BCFF;
  --md-sys-color-on-primary: #381E72;
  --md-sys-color-primary-container: #4F378B;
  --md-sys-color-on-primary-container: #EADDFF;
  
  /* Primary Fixed (same as light — these don't change) */
  --md-sys-color-primary-fixed: #EADDFF;
  --md-sys-color-on-primary-fixed: #21005D;
  --md-sys-color-primary-fixed-dim: #D0BCFF;
  --md-sys-color-on-primary-fixed-variant: #4F378B;
  
  /* Secondary */
  --md-sys-color-secondary: #CCC2DC;
  --md-sys-color-on-secondary: #332D41;
  --md-sys-color-secondary-container: #4A4458;
  --md-sys-color-on-secondary-container: #E8DEF8;
  
  /* Secondary Fixed (same as light) */
  --md-sys-color-secondary-fixed: #E8DEF8;
  --md-sys-color-on-secondary-fixed: #1D192B;
  --md-sys-color-secondary-fixed-dim: #CCC2DC;
  --md-sys-color-on-secondary-fixed-variant: #4A4458;
  
  /* Tertiary */
  --md-sys-color-tertiary: #EFB8C8;
  --md-sys-color-on-tertiary: #492532;
  --md-sys-color-tertiary-container: #633B48;
  --md-sys-color-on-tertiary-container: #FFD8E4;
  
  /* Tertiary Fixed (same as light) */
  --md-sys-color-tertiary-fixed: #FFD8E4;
  --md-sys-color-on-tertiary-fixed: #31111D;
  --md-sys-color-tertiary-fixed-dim: #EFB8C8;
  --md-sys-color-on-tertiary-fixed-variant: #633B48;
  
  /* Surface and Surface Containers */
  --md-sys-color-surface: #141218;
  --md-sys-color-on-surface: #E6E0E9;
  --md-sys-color-surface-variant: #49454F;
  --md-sys-color-on-surface-variant: #CAC4D0;
  --md-sys-color-surface-dim: #141218;
  --md-sys-color-surface-bright: #3B383E;
  --md-sys-color-surface-container-lowest: #0F0D13;
  --md-sys-color-surface-container-low: #1D1B20;
  --md-sys-color-surface-container: #211F26;
  --md-sys-color-surface-container-high: #2B2930;
  --md-sys-color-surface-container-highest: #36343B;
  
  /* Inverse */
  --md-sys-color-inverse-surface: #E6E0E9;
  --md-sys-color-inverse-on-surface: #322F35;
  --md-sys-color-inverse-primary: #6750A4;
  
  /* Outlines */
  --md-sys-color-outline: #938F99;
  --md-sys-color-outline-variant: #49454F;
  
  /* Error */
  --md-sys-color-error: #F2B8B5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8C1D18;
  --md-sys-color-on-error-container: #F9DEDC;
  
  /* Scrim and Shadow */
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

固定アクセントカラー

固定アクセントカラーは、M3 Expressive で新たに導入されました。ライトテーマとダークテーマで同じ値を維持するため、ブランドアイデンティティを示す要素に適しています。

/* Fixed colors remain identical in both themes */
.brand-banner {
  background-color: var(--md-sys-color-primary-fixed);
  color: var(--md-sys-color-on-primary-fixed);
}

.brand-accent {
  background-color: var(--md-sys-color-tertiary-fixed);
  color: var(--md-sys-color-on-tertiary-fixed);
}

/* Fixed Dim for secondary emphasis on fixed surfaces */
.brand-banner-secondary {
  background-color: var(--md-sys-color-primary-fixed-dim);
  color: var(--md-sys-color-on-primary-fixed);
}

コントラストレベルシステム

M3 Expressive では、アクセシビリティのために3段階のコントラストレベルが標準化されています。

/* Standard contrast (default) */
:root {
  --md-sys-color-contrast-level: 0;
}

/* Medium contrast */
[data-contrast="medium"] {
  --md-sys-color-primary: #5640A0;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #7B68BA;
  --md-sys-color-on-primary-container: #FFFFFF;
}

/* High contrast */
[data-contrast="high"] {
  --md-sys-color-primary: #2D0F6E;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #4E3A87;
  --md-sys-color-on-primary-container: #FFFFFF;
}

色の適用

インタラクティブ要素：
- 塗りつぶしボタン：プライマリカラーと、on-primary テキストを使用します
- アウトラインボタン：アウトラインと、プライマリテキストを使用します
- テキストボタン：プライマリテキストのみを使用します
- FAB：primary-container と on-primary-container を使用します
- ボタングループ：surface-container と on-surface テキストを使用します
サーフェスとコンテナ：
- メインの背景：surface
- 浮き上がったコンポーネント（カード、ダイアログ）：surface-container の各バリエーション
- 入力フィールド：surface-container-highest
- スナックバー：inverse-surface と inverse-on-surface テキスト
- ボトムシート：surface-container-low
状態レイヤー：
- ホバー：on-surface のレイヤーを不透明度8%で適用します
- フォーカス：on-surface のレイヤーを不透明度12%で適用します
- 押下：on-surface のレイヤーを不透明度12%で適用します
- ドラッグ：on-surface のレイヤーを不透明度16%で適用します
強調とブランド：
- 一貫性を維持する必要があるブランド要素には、固定アクセントカラーを使用します
- 色相だけでなく、彩度とコントラストによって強調します
- オンボーディング、ハイライト、ブランディングには、表現力のあるアクセントとしてターシャリカラーを使用します

ダイナミックカラーの生成

ソースカラーからカラースキームを生成する場合：

基本色相を抽出する：ソース（例：ユーザーの壁紙）から支配的な色相を特定します
トーンパレットを生成する：HCT（色相、彩度、トーン）色空間を使用して、5つのトーンパレットを作成します
カラー役割を割り当てる：生成したトーンをセマンティックなカラー役割（26以上）にマッピングします
固定バリエーションを生成する：テーマ間で変わらない固定アクセントカラーを作成します
サーフェスコンテナを生成する：5段階のサーフェスコンテナ階層を作成します
コントラストバリエーションを生成する：標準、中、高のコントラストバージョンを生成します
コントラストを検証する：すべての役割の組み合わせがアクセシビリティ要件を満たしていることを確認します
テーマに対応する：ライトとダークの両方のバリエーションを生成します

ベストプラクティス

意味に基づく命名：色の値（例：blue、red）ではなく、意味に基づくカラートークン（例：primary、error）を常に使用します
一貫した適用：すべてのコンポーネントで色を一貫して適用します
エレベーションの色付け：エレベーションされたサーフェスには、primary カラーを非常に低い不透明度で使い、控えめな色合いを加えます
カラーの階層：メインのアクションには primary、重要度の低いアクションには secondary、表現力豊かなアクセントには tertiary を使用します
両方のテーマでテスト：ライトモードとダークモードの両方で必ずテストします
鮮やかな表現：M3 Expressive では、アクセシビリティを維持しながら、より豊かで鮮やかな色を積極的に取り入れます
コンテキストの考慮：アプリのコンテキストやユーザーの好みに応じて、色の強度やパレットを調整します
ブランドには固定色を使用：テーマが変わっても変わってはならないロゴの色や要素には、固定のアクセントトークンを適用します
コントラストレベルへの対応：アクセシビリティのため、標準、中、高のコントラストバリエーションを実装します
サーフェスコンテナの階層：5段階のサーフェスコンテナを使用して、明確な視覚的奥行きを作ります

ツールとリソース

tokens.css：オレンジをベースにしたパレット（#FF9800）を基にした、すぐに使えるM3カラートークン（ライト＋ダーク）です。このスキルのディレクトリに含まれています。プロジェクトにコピーしてカスタマイズしてください。
examples/color-roles.svg：M3のカラーロール（primary、secondary、tertiary、error）、サーフェスコンテナのトーン、プライマリのトーンパレットを示す視覚的な参考用SVGです。関係者向けの参考資料やドキュメント素材として使用してください。
material-theme-builder skill：任意のソースカラーから、完全なトークンセットをプログラムで生成するために使用します。
Material Color Utilities：https://github.com/material-foundation/material-color-utilities — HCT色空間、パレット生成、ダイナミックカラーアルゴリズム
Material Theme Builder：https://material-foundation.github.io/material-theme-builder/ — カラースキームを生成するインタラクティブなWebツール
公式M3 CSSトークン：https://github.com/material-foundation/material-tokens — ベースラインとなるCSSトークンファイル（色、タイポグラフィ、シェイプ、モーション、状態、エレベーション）
M3カラーシステム：https://m3.material.io/styles/color/overview
M3デザイントークンの概要：https://m3.material.io/foundations/design-tokens/overview
カラーコントラストチェッカー：すべてのテキストやインタラクティブ要素について、WCAGへの準拠を検証します
HCT色空間：知覚的に均一な色の生成に活用します
CSSカスタムプロパティ：CSS変数とデータ属性を使ってダイナミックなテーマを実装します

避けるべきよくある落とし穴

❌ トークンを使わずに色の値をハードコードする
❌ すべての状態で同じ色だけを使用する（ホバー、フォーカス、押下時のバリエーションがない）
❌ ダークテーマを無視する、または後回しにする
❌ テキストと背景のコントラストが不十分
❌ アクセントカラーを使いすぎる（強調のために控えめに使用するべきです）
❌ 実際にユーザーが作成したカラースキームでテストしない
❌ 状態や情報を伝えるために色だけに頼る
❌ ブランド要素に固定のアクセントカラーを定義し忘れる
❌ アクセシビリティのための複数のコントラストレベルを実装しない
❌ 適切なサーフェスコンテナのバリエーションではなく、サーフェスを使用する

カラー実装のチェックリスト

M3 カラーシステムを実装する際は、次の点を確認してください。

Markdown 対応

ログインしてコメント

基本情報

作者: shelbeely
リポジトリ: shelbeely/shelbeely-agent-skills
カテゴリ: デザイン・UI
インストール数: 36
GitHub スター: 5

問題を報告