material-design-3-guide

Material Design 3 ガイド

概要

これは Material Design 3（M3）を実装するためのマスターガイドです。Material You の基盤から M3 Expressive の拡張まで、仕様全体を網羅しています。システムの全体像を説明し、各要素に特化したスキルを案内します。

キーワード：Material Design 3、M3、Material Design、デザインシステム、Google のデザイン、Material You、表現豊かなデザイン、UI デザイン、M3 Expressive、React、MUI、Angular Material、Vue、Vuetify、Svelte、SMUI、Tailwind CSS、Next.js、Flutter、Jetpack Compose、Web コンポーネント、Beer CSS、Ink、CLI、ターミナル UI

Material Design 3 とは？

Material Design 3 は、デジタル製品を制作するための Google のオープンソースデザインシステムです。これまでに、次の 2 つの主要なフェーズを経て進化してきました。

Material You（M3 ベースライン）

基盤となる M3 システムでは、次の要素が導入されました。

• ダイナミックカラー：ユーザーの壁紙や設定から導き出される適応型テーマ
• トーナルパレット：体系的なトーン生成に対応する 5 つの主要パレット
• タイプスケール：5 つの役割にわたる 15 種類のベースラインテキストスタイル
• シェイプシステム：なしから完全な丸みまでを定義する、意味に基づいた角丸のスケール
• エレベーションシステム：奥行きを表現する色調補正を備えた 5 段階
• コンポーネントライブラリ：アクセシビリティとテーマ設定に対応したコンポーネント一式
• トークンシステム：一貫したテーマ設定のための CSS カスタムプロパティ

M3 Expressive（最新の進化）

Material You を基盤として、M3 Expressive では次の要素が追加されました。

• 30 スタイルのタイプスケール：15 種類のベースラインスタイルに加え、強調スタイルを 15 種類追加
• 35 種類の表現豊かなシェイプ：滑らかなモーフィングに対応した装飾用シェイプライブラリ
• 物理法則に基づくモーション：従来のイージングに代わり、スプリングパラメーター（剛性、減衰、速度）を使用
• 固定アクセントカラー：ライトテーマとダークテーマで一定に保たれる色
• コントラストレベル：標準、中、高の標準化されたコントラストモード
• 新しいコンポーネント：分割ボタン、ボタングループ、フローティングツールバー、FAB メニュー
• 背景のぼかし：オーバーレイやナビゲーションに奥行きを与える効果
• ハプティクスの統合：スプリングアニメーションと連動した振動

Material Design 3 の 7 つの柱

Material Design 3 は、相互に関連する 7 つのデザインの柱を基盤としています。

1. 色とダイナミックテーマ

概要：26 以上の役割、適切なコントラスト、アクセシビリティを備えた、鮮やかで適応性の高い色のシステム
次の場合は material-design-3-color スキルを使用します：

• カラーパレットやテーマを設定するとき
• ダイナミックカラー（Material You）を実装するとき
• プライマリ、セカンダリ、ターシャリの色の役割を扱うとき
• 色のアクセシビリティとコントラストを確保するとき
• ライトテーマとダークテーマを作成するとき
• 色のトークンと変数を定義するとき
• 状態レイヤー（ホバー、フォーカス、押下）を適用するとき
• エレベーションの色調補正を実装するとき
• ブランド用の固定アクセントカラーを設定するとき（M3 Expressive）
• コントラストレベル（標準、中、高）を設定するとき（M3 Expressive）
• サーフェスコンテナの階層を定義するとき

主な概念：トーナルパレット、色の役割、ダイナミックカラー、アクセシビリティ、テーマ設定、固定アクセントカラー、コントラストレベル、サーフェスコンテナ

2. モーションとアニメーション

概要：注意を導き、フィードバックを提供する、物理法則に基づいた自然なアニメーション
次の場合は material-design-3-motion スキルを使用します：

• 画面や状態間のトランジションを追加するとき
• マイクロインタラクション（ホバー、フォーカス、押下）を実装するとき
• ページやビューのトランジションを作成するとき
• コンポーネントの状態をアニメーション化するとき
• ローディング状態や進行状況インジケーターを作成するとき
• リップル効果を実装するとき
• リストに段階的なアニメーションを作成するとき
• コンテナーやシェイプをモーフィングするとき
• Expressive モーションと標準モーションを選択するとき（M3 Expressive）
• アニメーションとハプティックフィードバックを統合するとき（M3 Expressive）

主な概念：スプリング物理、剛性／減衰／速度、イージングカーブ、継続時間、トランジション、ハプティクス

3. タイポグラフィ

概要：可変フォントと定義済みのスケールを使った、明確で読みやすい文字の階層構造です 次の場合は material-design-3-typography スキルを使用します：

• テキストスタイルと階層構造を設定するとき
• フォントファミリーとウェイトを定義するとき
• タイプスケール（ディスプレイ、ヘッドライン、タイトル、本文、ラベル）を実装するとき
• 可変フォントを扱うとき
• テキストの読みやすさとアクセシビリティを確保するとき
• 行の高さと文字間隔を設定するとき
• レスポンシブタイポグラフィを作成するとき
• 重要な場面で強調された文字スタイルを使用するとき（M3 Expressive）

主なコンセプト：タイプスケール（標準15種＋強調15種）、可変フォント、階層構造、読みやすさ、中程度のコントラスト

4. 形状と包含

概要：角丸、形状の変形、表現力豊かな装飾形状です 次の場合は material-design-3-shape スキルを使用します：

• コンポーネントの角丸を定義するとき
• カード、ボタン、ダイアログに角丸を設定するとき
• 形状トークンを実装するとき（更新版：Large 20dp、XL 32dp、XXL 48dp）
• 状態間で形状を変形させるとき
• コンテナーと包含を扱うとき
• ボタン、FAB、チップ、入力フィールドのスタイルを設定するとき
• 35種類の表現力豊かな形状ライブラリを使用するとき（M3 Expressive）
• 表現力豊かな形状の変形を実装するとき（M3 Expressive）

主なコンセプト：角丸、形状スケール、変形、包含、35種類の表現力豊かな形状、丸みを帯びた角

5. レイアウトとサイズの階層構造

概要：間隔、サイズ、包含、奥行きを戦略的に活用し、視覚的な流れを生み出します 次の場合は material-design-3-layout スキルを使用します：

• ページレイアウトとグリッドを設定するとき
• 間隔のシステムを定義するとき
• レスポンシブレイアウトを作成するとき
• サイズに基づく階層構造を実装するとき
• ブレークポイントを扱うとき
• コンポーネントを配置するとき
• サイズによって視覚的な強調を生み出すとき
• エレベーションと奥行きを実装するとき
• オーバーレイに背景ぼかしを使用するとき（M3 Expressive）
• 明示的な包含と暗黙的な包含を定義するとき
• インタラクション状態（ホバー、フォーカス、押下、無効）を実装するとき

主なコンセプト：間隔スケール、グリッドシステム、レスポンシブデザイン、視覚的階層構造、背景ぼかし、包含、状態レイヤー

6. コンポーネント

概要：アクセシビリティに配慮した、テーマ対応のUIコンポーネントの完全なライブラリです 次の場合は material-design-3-components スキルを使用します：

• ボタン、カード、ダイアログ、ナビゲーション、その他のUIコンポーネントを作成するとき
• コンポーネントの仕様（サイズ、間隔、色）を確認するとき
• 新しいM3 Expressiveコンポーネント（分割ボタン、ボタングループ、ツールバー）を実装するとき
• コンポーネントのインタラクション状態を理解するとき
• ユースケースに合ったコンポーネントを選ぶとき
• FAB、チップ、テキストフィールド、タブ、メニューを実装するとき

主なコンセプト：アクション、包含、コミュニケーション、ナビゲーション、選択、テキスト入力コンポーネント

7. アイコン

概要：2,500種類以上のアイコンを備えた、Material Symbolsの可変フォントアイコンシステムです 次の場合は material-design-3-icons スキルを使用します：

• インターフェースにアイコンを追加するとき
• Material Symbolsを設定するとき（塗りつぶし、ウェイト、グレード、光学サイズ）
• アイコンのアクセシビリティを実装するとき
• 選択状態のためにアイコンの塗りつぶしを切り替えるとき
• 各コンポーネントに適したサイズでアイコンを設定するとき
• アイコンスタイル（アウトライン、ラウンド、シャープ）を選ぶとき

主なコンセプト：Material Symbols、可変フォントの軸（FILL、wght、GRAD、opsz）、アイコンのアクセシビリティ

スキルの使い分け方

新しい Material Design 3 プロジェクトを始める

ステップ 1：カラーの基盤

• まず material-design-3-color を使用します
• カラーパレットとテーマを設定します
• すべてのカラートークン（プライマリ、セカンダリ、ターシャリ、サーフェス、固定アクセント）を定義します
• ライトテーマとダークテーマの両方を実装します
• コントラストレベルを設定します

ステップ 2：タイポグラフィシステム

• material-design-3-typography を使用します
• 文字のスケールとフォントファミリー（ベースライン＋強調）を定義します
• タイポグラフィトークンを設定します
• Roboto またはカスタムのブランドフォントを選択します

ステップ 3：シェイプシステム

• material-design-3-shape を使用します
• すべての角丸のシェイプトークン（更新された値）を定義します
• コンポーネント固有のシェイプを設定します

ステップ 4：アイコン

• material-design-3-icons を使用します
• Material Symbols を読み込みます（スタイルを 1 つ選択します）
• デフォルトの可変フォント軸を設定します

ステップ 5：レイアウトの基盤

• material-design-3-layout を使用します
• 余白のスケールとグリッドシステムを設定します
• レスポンシブデザイン用のブレークポイントを定義します
• コンテインメントパターンとインタラクション状態を設定します

ステップ 6：コンポーネントを構築する

• material-design-3-components を使用します
• 確立したトークンを使用して、すべての UI コンポーネントを構築します
• コンポーネント固有の仕様に従います

ステップ 7：モーションを追加する

• material-design-3-motion を使用します
• トランジションとアニメーションを実装します（エクスプレッシブまたは標準を選択します）
• インタラクティブな要素にマイクロインタラクションを追加します
• 適切な箇所にハプティックフィードバックを組み込みます

特定のコンポーネントに取り組む

ボタン：

• コンポーネント：material-design-3-components（仕様、バリエーション、ボタングループ）
• シェイプ：material-design-3-shape（全角丸、ピルシェイプ）
• カラー：material-design-3-color（プライマリ／セカンダリ／ターシャリ）
• タイポグラフィ：material-design-3-typography（label-large）
• モーション：material-design-3-motion（ホバー、フォーカス、押下の状態）
• レイアウト：material-design-3-layout（余白、サイズ）
• アイコン：material-design-3-icons（ボタンアイコン）

カード：

• コンポーネント：material-design-3-components（エレベーテッド、フィルド、アウトライン）
• シェイプ：material-design-3-shape（中程度の角丸、12dp）
• カラー：material-design-3-color（サーフェスコンテナのバリエーション）
• タイポグラフィ：material-design-3-typography（タイトル＋本文）
• モーション：material-design-3-motion（ホバー時のエレベーション変化）
• レイアウト：material-design-3-layout（パディング、コンテンツフロー）

ダイアログ／モーダル：

• コンポーネント：material-design-3-components（ダイアログの仕様）
• シェイプ：material-design-3-shape（特大の角丸、32dp）
• カラー：material-design-3-color（surface-container-high）
• タイポグラフィ：material-design-3-typography（見出し＋本文）
• モーション：material-design-3-motion（表示／非表示のアニメーション）
• レイアウト：material-design-3-layout（中央配置、最大幅、背景のぼかし）

ナビゲーション：

• コンポーネント：material-design-3-components（バー、レール、ドロワー、タブ）
• カラー：material-design-3-color（サーフェスバリアント、アクティブ状態）
• タイポグラフィ：material-design-3-typography（label-large）
• シェイプ：material-design-3-shape（インジケーター、ピル）
• モーション：material-design-3-motion（トランジションアニメーション）
• レイアウト：material-design-3-layout（ナビゲーション構造）
• アイコン：material-design-3-icons（塗りつぶしの切り替えに対応したナビゲーションアイコン）

フォーム／入力：

• コンポーネント：material-design-3-components（テキストフィールド、セレクター）
• シェイプ：material-design-3-shape（極小の角丸、4dp）
• カラー：material-design-3-color（サーフェスバリアント、アウトライン）
• タイポグラフィ：material-design-3-typography（本文、ラベル）
• モーション：material-design-3-motion（フォーカスアニメーション）
• レイアウト：material-design-3-layout（フィールド間の余白、配置）

よくあるシナリオ

「Material Design 3 のような見た目にする」：

1. material-design-3-color から始めます。カラ―システムを設定します
2. material-design-3-shape を適用します。角を丸くします
3. material-design-3-typography を使用します。文字サイズのスケールを実装します
4. material-design-3-icons を読み込みます。Material Symbols を設定します
5. material-design-3-components を使用して構築します。M3 コンポーネントの仕様を適用します
6. material-design-3-motion を追加します。スプリングアニメーションを実装します
7. material-design-3-layout を適用します。適切な間隔を確保します

「M3 Expressive にする」：

1. 上記の標準的な M3 セットアップに従います
2. material-design-3-typography の強調された文字スタイルを追加します
3. material-design-3-shape の表現力豊かな形状を、装飾的な場面で使用します
4. material-design-3-motion の表現力豊かなモーションモードに切り替えます
5. material-design-3-components の新しいコンポーネント（分割ボタン、ボタングループ、ツールバー）を実装します
6. material-design-3-color の固定アクセントカラーとコントラストレベルを追加します
7. material-design-3-layout の背景ぼかしを使用します

「Material Design のアニメーションを追加する」：

• 主に material-design-3-motion を使用します
• 状態レイヤーには material-design-3-color が必要になる場合があります
• 変形する形状には material-design-3-shape が必要になる場合があります

「Material Design のカラーを修正する」：

• material-design-3-color のみを使用します
• カラーロール、コントラスト、テーマ設定に重点を置きます

「このボタン／カード／ダイアログのスタイルを設定する」：

• 仕様を確認するため、material-design-3-components から始めます
• その後、必要に応じて形状、カラー、タイポグラフィを適用します

「レスポンシブにする」：

• 主に material-design-3-layout を使用します
• レスポンシブなテキストには material-design-3-typography が必要になる場合があります
• レスポンシブな角丸には material-design-3-shape が必要になる場合があります

「ダークモードを実装する」：

• テーマの切り替えには material-design-3-color を使用します
• 両方のテーマで、すべてのカラートークンが定義されていることを確認します
• material-design-3-icons を使って、ダークモード用にアイコンのグレードを調整します

「アイコンを追加する」：

• Material Symbols の設定には material-design-3-icons を使用します
• アイコンのカラートークンには material-design-3-color を使用します

統合の原則

すべてのスキルを組み合わせて使用する

Material Design 3 は包括的なシステムです。各スキルは組み合わせて使うように設計されています。

• カラーはパレットを定義します
• タイポグラフィはテキストを定義します
• 形状はフォームを定義します
• モーションは動作を定義します
• レイアウトは構造を定義します
• コンポーネントは構成要素を定義します
• アイコンは視覚言語を定義します

一貫性が重要です

複数のスキルを使用する場合：

• 各スキルで定義されているトークン／変数を使用します
• 値をハードコードしないでください
• すべてのデザイン要素で一貫性を保ちます
• 個別の要素だけでなく、組み合わせた結果をテストします

例：ボタンの完全な実装

/* Uses all seven pillars */
.md3-button {
  /* Shape */
  border-radius: var(--md-sys-shape-corner-full);
  
  /* Color */
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  
  /* Typography */
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  
  /* Layout */
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-6);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-spacing-2);
  
  /* Motion */
  transition: 
    background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.md3-button:hover {
  /* Color - state layer */
  background-color: var(--md-sys-color-primary);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  
  /* Motion */
  transform: translateY(-1px);
}

/* Icons in button */
.md3-button .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'opsz' 20;
}

クイックリファレンス

プロパティごとのスキル

プロパティ	スキル
color, background-color	material-design-3-color
font-size, font-family, line-height, font-weight, letter-spacing	material-design-3-typography
border-radius, clip-path	material-design-3-shape
transition, animation, @keyframes	material-design-3-motion
margin, padding, gap, width, height, display, grid	material-design-3-layout
box-shadow（エレベーション）	material-design-3-layout（トランジションには motion も使用）
backdrop-filter（ぼかし）	material-design-3-layout
font-variation-settings（アイコン）	material-design-3-icons
コンポーネント固有の仕様	material-design-3-components

コンポーネントごとのスキル

コンポーネント	主なスキル	補助スキル
ボタン	components	color, shape, typography, motion
カード	components	color, shape, layout
ダイアログ	components	color, shape, layout, motion
ナビゲーション	components	color, icons, layout, motion
テキストフィールド	components	color, shape, typography
FAB	components	color, shape, icons, motion
チップ	components	color, shape, typography
タブ	components	color, typography, icons, motion
リスト	components	color, typography, layout
メニュー	components	color, shape, layout

ファイル構成

M3 を実装する際は、コードを次のように整理します。

styles/
├── tokens/
│   ├── color.css          # From material-design-3-color
│   ├── typography.css     # From material-design-3-typography
│   ├── shape.css          # From material-design-3-shape
│   ├── motion.css         # From material-design-3-motion
│   ├── layout.css         # From material-design-3-layout
│   └── icons.css          # From material-design-3-icons
├── components/
│   ├── button.css         # Uses all skills
│   ├── card.css           # Uses all skills
│   ├── dialog.css         # Uses all skills
│   ├── navigation.css     # Uses all skills
│   └── text-field.css     # Uses all skills
└── main.css               # Imports all tokens

ベストプラクティス

推奨事項

1. ✅ 7 つすべての柱を活用する - すべての側面を実装すると、M3 の効果を最大限に引き出せます
2. ✅ トークンから始める - コンポーネントを作る前に、すべてのデザイントークンを定義します
3. ✅ 各スキルに従う - 各スキルには、検証済みで調査に裏付けられたガイドラインが用意されています
4. ✅ アクセシビリティをテストする - すべてのスキルにアクセシビリティ要件が含まれています
5. ✅ 両方のテーマに対応する - 常にライトモードとダークモードを実装します
6. ✅ セマンティックな名前を使う - ハードコードした値ではなく、トークン名を使います
7. ✅ 一貫性を保つ - すべてのコンポーネントに同じパターンを適用します
8. ✅ 仕様全体を網羅する - Material You のベースラインと M3 Expressive の追加要素を含めます

禁止事項

1. ❌ つまみ食いしない - 色だけを使い、形状やモーションを使わないのでは、M3 とは言えません
2. ❌ 値をハードコードしない - 常に定義済みのトークンと変数を使います
3. ❌ アクセシビリティを省略しない - コントラスト、サイズ、モーション設定は重要です
4. ❌ ダークモードを無視しない - ダークモードは M3 の中核部分です
5. ❌ 値を独自に決めない - 各スキルで提供されるスケールを使います
6. ❌ デザインシステムを混在させない - M3 を他のデザイン言語と組み合わせないでください
7. ❌ モーションを忘れない - 静的な M3 では「表現豊か」という要素が欠けてしまいます
8. ❌ アイコンを省略しない - Material Symbols は M3 のビジュアル言語に不可欠です

さまざまな Web スタック向けの Material Design 3

M3 はさまざまな Web スタックで実装できます。各フレームワークには、セットアップ、テーマ設定、コンポーネントの例を網羅したライブラリ固有の専用スキルがあります。プロジェクトに適したスキルを見つけるには、以下の概要表を参照してください。

Web スタックの概要

スタック	主なライブラリ	M3 のサポート	スキル
Vanilla CSS	CSS custom properties	フル（手動）	m3-web-vanilla
Web Components	@material/web (Lit)	M3 フル対応	m3-web-webcomponents
React / Next.js	MUI (@mui/material)	M3 のテーマ設定	m3-web-react
Angular	@angular/material	M3 フル対応（公式）	m3-web-angular
Vue	Vuetify 3	M3 フル対応	m3-web-vue
Svelte	SMUI / @material/web	M3 部分対応	m3-web-svelte
Tailwind CSS	tailwind-material-3 plugin	トークンベースの M3	m3-web-tailwind
Ink (React CLI)	ink + @inkjs/ui	トークンベースの M3	m3-web-ink
Flutter	material / m3e_design	M3 フル対応	m3-web-flutter
Android	Jetpack Compose Material 3	M3 フル対応 + Expressive	m3-web-android

適切なスタックの選び方

プロジェクトで使用しているもの	推奨スキル	理由
フレームワークなし（バニラ）	m3-web-vanilla	完全な制御が可能で、依存関係もありません
React または Next.js	m3-web-react	最大規模のエコシステムと SSR サポート
Angular	m3-web-angular	公式で、M3 との統合が最適です
Vue	m3-web-vue	エンタープライズ対応で、ドキュメントも充実しています
Svelte / SvelteKit	m3-web-svelte	Svelte で利用できる最適な選択肢です
Tailwind CSS	m3-web-tailwind	M3 トークンを活用したユーティリティファーストの設計です
任意のフレームワーク	m3-web-webcomponents	公式で、フレームワークに依存しません
CLI / ターミナル	m3-web-ink	React ベースで、テーマ設定が可能です
Flutter	m3-web-flutter	公式で、クロスプラットフォームに対応しています
Android	m3-web-android	公式で、M3 の実装が最も充実しています

選び方のヒント：

1. Angular プロジェクト：m3-web-angular を使用します。あらゆる Web フレームワークの中で、公式の M3 サポートが最も充実しています
2. React プロジェクト：MUI を使う場合は m3-web-react、Google 公式コンポーネントを使う場合は m3-web-webcomponents を使用します
3. Vue プロジェクト：m3-web-vue を使用します。Vuetify 3 は成熟しており、ドキュメントも充実しています
4. フレームワークに依存しない構成：m3-web-webcomponents または m3-web-vanilla を使用します
5. 素早くプロトタイプを作成する場合：m3-web-vanilla（Beer CSS）または CDN 経由の m3-web-webcomponents を使用します
6. Tailwind が必要な場合：M3 トークンを Tailwind の設定にマッピングするため、m3-web-tailwind を使用します
7. モバイルと Web の両方：クロスプラットフォームの M3 を利用するには、m3-web-flutter を使用します
8. CLI / ターミナル：M3 のカラー トークンをターミナルの色にマッピングして、m3-web-ink を使用します

リソース

Material Design 3 のコアスキル

• material-design-3-color - カラーパレット、テーマ設定、アクセシビリティ、固定アクセント、コントラストレベル
• material-design-3-motion - アニメーション、トランジション、マイクロインタラクション、バネ物理、触覚フィードバック
• material-design-3-typography - 文字スケール（30 スタイル）、フォント、階層、強調バリアント
• material-design-3-shape - 角丸、包含、モーフィング、35 種類の表現豊かなシェイプ
• material-design-3-layout - 間隔、グリッド、レスポンシブデザイン、背景のぼかし、インタラクション状態
• material-design-3-components - 仕様と実装を含む完全なコンポーネントカタログ
• material-design-3-icons - Material Symbols、可変フォントの軸、アイコンのアクセシビリティ

ライブラリ固有のスキル

• m3-web-vanilla - バニラ CSS カスタムプロパティ、Beer CSS、依存関係のない M3
• m3-web-webcomponents - Google 公式の @material/web Lit ベースコンポーネント
• m3-web-react - React / MUI / Next.js の M3 テーマ設定と SSR 統合
• m3-web-angular - Angular Material の M3 テーマ設定、SCSS ミックスイン、スケマティクス
• m3-web-vue - Vuetify 3 の M3 テーマ設定、コンポーネント、ダークモード
• m3-web-svelte - Svelte/SvelteKit での SMUI と @material/web の直接利用
• m3-web-tailwind - Tailwind CSS の M3 トークンマッピングとプラグイン設定
• m3-web-ink - @inkjs/ui を使った M3 テーマ設定に対応する Ink React CLI
• m3-web-flutter - Flutter の M3 テーマ設定、ダイナミックカラー、M3 Expressive パッケージ
• m3-web-android - Jetpack Compose Material 3、ダイナミックカラー、M3 Expressive

外部リソース

• 公式 M3 サイト: https://m3.material.io/
• M3 コンポーネント: https://m3.material.io/components
• M3 スタイル: https://m3.material.io/styles
• M3 ファンデーション: https://m3.material.io/foundations
• Web 向け M3: https://m3.material.io/develop/web
• Android 向け M3: https://m3.material.io/develop/android/jetpack-compose
• Flutter 向け M3: https://m3.material.io/develop/flutter
• M3 デザインキット（Figma）: https://www.figma.com/community/file/1035203688168086460 — スタイル、バリアント、ダイナミックカラー、表現力豊かな機能を備えた公式 M3 コンポーネントライブラリ
• Material Web Components (@material/web): https://github.com/material-components/material-web
• Material Color Utilities: https://github.com/material-foundation/material-color-utilities
• Material Theme Builder: https://github.com/material-foundation/material-theme-builder
• Material Design Tokens: https://github.com/material-foundation/material-tokens
• Angular Material: https://github.com/angular/components
• Material Symbols: https://fonts.google.com/icons
• MUI（React）: https://mui.com/material-ui/
• Vuetify（Vue）: https://vuetifyjs.com/
• SMUI（Svelte）: https://sveltematerialui.com/
• Beer CSS（CSS のみの M3）: https://www.beercss.com/
• Tailwind M3 プラグイン: https://github.com/rinturaj/tailwind-material-3

Material Design 3 プロジェクトのチェックリスト

新しい M3 プロジェクトを始めますか？このチェックリストに従ってください。

基盤

• このガイドを確認して、7 つの柱について理解する
• material-design-3-color を使ってカラーシステムを設定する
• material-design-3-typography を使ってタイポグラフィを定義する
• material-design-3-shape を使ってシェイプトークンを作成する
• material-design-3-icons を使って Material Symbols を読み込む
• material-design-3-layout を使ってスペーシング／レイアウトシステムを確立する

実装

• material-design-3-components の仕様に基づいてコンポーネントを構築する
• ライトテーマとダークテーマの両方を実装する
• material-design-3-motion を使ってモーションとトランジションを追加する
• 複数の画面サイズでテストする（レスポンシブ）
• アクセシビリティを確認する（コントラスト、サイズ、モーション設定）

M3 Expressive の拡張（任意）

• 重要な場面に強調された文字スタイルを追加する
• 表現力豊かなシェイプを使って、装飾的な楽しさを加える
• ヒーロー要素のインタラクションでは、表現力豊かなモーションモードに切り替える
• ブランディング用に固定アクセントカラーを実装する
• コントラストレベルへの対応を追加する
• 新しいコンポーネント（分割ボタン、ボタングループ、ツールバー）を使う
• オーバーレイやナビゲーションに背景のぼかしを追加する

品質保証

• すべての色にセマンティックトークンを使う（16 進数のハードコード値は使わない）
• すべてのテキストに文字スケールを使う（ベースラインまたは強調）
• すべてのシェイプにシェイプスケールを使う
• すべてのアニメーションにスプリング物理を使う
• すべてのスペーシングにスペーシングスケールを使う
• すべてのアイコンに、適切な軸を設定した Material Symbols を使う
• ダークモードが正しく動作する
• モーションの低減設定に従う
• タッチターゲットが最低 48×48dp である
• テキストのコントラストが WCAG AA（4.5:1）を満たす
• すべてのコンポーネントに適切なインタラクション状態がある
• 固定アクセントカラーがテーマ間で一貫している

まとめ

Material Design 3 は、Material You の基盤から M3 Expressive の拡張まで、仕様全体を網羅する完全なデザインシステムです。相互に連携する 7 つの柱を基盤としており、それぞれに専用のスキルがあります。

1. カラー - パレット、テーマ、アクセシビリティ
2. モーション - 振る舞い、物理特性、触覚フィードバック
3. タイポグラフィ - 表現、階層、強調
4. シェイプ - 個性、形状、表現
5. レイアウト - 構造、奥行き、包含
6. コンポーネント - 構成要素とインタラクション
7. アイコン - 視覚言語とシンボル

このガイドを使って、特定のニーズにどのスキルを適用すべきかを理解してください。また、M3 は 7 つの柱すべてが調和して連携するときに最も効果を発揮することを覚えておいてください。