material-design-3

Material Design 3（Material You）スキル

🎯 目的

このスキルでは、パーソナライズ、アクセシビリティ、Angular アプリケーション向けの最新 UI パターンを重視する、Google の最新デザインシステムである Material Design 3（Material You とも呼ばれます）について、包括的なガイダンスを提供します。

📦 Material Design 3 とは？

Material Design 3 は Google の最新デザイン言語で、次の要素を導入しています。

• ダイナミックカラー：ユーザー設定に基づいて変化するカラーパレット
• アクセシビリティの強化：デフォルトで WCAG 2.1 AA に準拠
• 柔軟なテーマ設定：トークンベースのテーマ設定システム
• モダンなコンポーネント：カスタマイズ性が向上したコンポーネントデザイン
• パーソナライズ：ユーザーの好みに合わせて変化する、ユーザー中心のデザイン

🎨 このスキルを使用する場面

次のような場合に、Material Design 3 のガイダンスを使用します。

• Material Design を採用した新しい Angular アプリケーションを実装する場合
• Material Design 2 から Material Design 3 に移行する場合
• Material Design 3 のトークンを使用してカスタムテーマを作成する場合
• ダイナミックカラーによるテーマ設定を実装する場合
• アクセシブルでモダンな UI コンポーネントを構築する場合
• Material You のデザイン原則に従う場合
• Material Design 3 のタイポグラフィとスペーシングシステムを使用する場合

🛠️ 主なコンセプト

1. カラーシステム

Material Design 3 では、高度なカラーシステムが導入されています。

カラーの役割：

• プライマリ：目立たせたいアクションに使用するメインのブランドカラー
• セカンダリ：目立たせる必要のないアクションを支えるカラー
• ターシャリ：強調やコントラストに使用するアクセントカラー
• エラー：エラー状態を示すカラー
• サーフェス：コンポーネントの背景色
• オンカラー：コントラストを確保するテキスト／アイコンの色（on-primary、on-secondary など）

カラーのバリエーション：

• コンテナカラー（例：primary-container）
• オンコンテナカラー（例：on-primary-container）
• サーフェスのバリエーション（surface-dim、surface-bright、surface-container）

2. ダイナミックカラー

Material Design 3 を代表する機能です。

• 元となるカラーからカラースキームを生成します
• ライトテーマとダークテーマの両方に対応します
• コントラストを自動的に調整します
• システムレベルでカラーを抽出します（対応プラットフォームでは壁紙から抽出）

3. タイポグラフィ

5 つのタイポグラフィスケールがあります。

• ディスプレイ：最も大きなテキスト（display-large、display-medium、display-small）
• ヘッドライン：セクション見出し（headline-large から headline-small まで）
• タイトル：サブセクションのタイトル（title-large から title-small まで）
• ボディ：メインコンテンツ（body-large、body-medium、body-small）
• ラベル：UI のラベル（label-large から label-small まで）

4. エレベーション

エレベーションには 3 つの方法があります。

• シャドウ：従来の、影によるエレベーション
• オーバーレイ：色調を重ねるサーフェスオーバーレイ
• 組み合わせ：シャドウとオーバーレイを組み合わせて、奥行きの知覚を高めます

5. シェイプ

角丸のシステムには、次の 6 つのスケールがあります。

• なし：0dp（角丸なし）
• 極小：4dp
• 小：8dp
• 中：12dp
• 大：16dp
• 極大：28dp

📚 Angular での実装

Material Design 3 テーマの設定

// Define your theme using M3 tokens
@use '@angular/material' as mat;

// Include core Material Design 3 styles
@include mat.core();

// Define your color palette
$my-primary: mat.define-palette(mat.$azure-palette);
$my-accent: mat.define-palette(mat.$blue-palette);
$my-warn: mat.define-palette(mat.$red-palette);

// Create the theme
$my-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $my-primary,
    tertiary: $my-accent,
  ),
  typography: (
    brand-family: 'Roboto',
    bold-weight: 700
  ),
  density: (
    scale: 0
  )
));

// Apply the theme
@include mat.all-component-themes($my-theme);

// Dark theme variant
$my-dark-theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: $my-primary,
    tertiary: $my-accent,
  )
));

// Apply dark theme when needed
.dark-theme {
  @include mat.all-component-colors($my-dark-theme);
}

カラートークンの使用

// Access theme colors in your components
.my-component {
  background-color: var(--mat-sys-primary);
  color: var(--mat-sys-on-primary);
  
  &:hover {
    background-color: var(--mat-sys-primary-container);
    color: var(--mat-sys-on-primary-container);
  }
}

// Surface variants
.surface {
  background-color: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
}

.surface-container {
  background-color: var(--mat-sys-surface-container);
}

タイポグラフィの使用

// Using typography tokens
.heading {
  font: var(--mat-sys-headline-large);
}

.body-text {
  font: var(--mat-sys-body-medium);
}

.label {
  font: var(--mat-sys-label-small);
}

エレベーションとシャドウ

.elevated-card {
  // Level 1 elevation
  box-shadow: var(--mat-sys-level1);
  
  &:hover {
    // Level 2 elevation on hover
    box-shadow: var(--mat-sys-level2);
  }
}

🎯 ベストプラクティス

1. テーマの一貫性

• ハードコードした値ではなく、デザイントークンを使用します
• コンポーネント間で一貫したカラーの使い方を保ちます
• Material Design 3 のカラーの役割に関するガイドラインに従います

2. アクセシビリティ

• テキストのコントラスト比を最低 4.5:1 にします
• 意味に基づくカラーの役割（プライマリ、セカンダリ、エラー）を使用します
• ライトテーマとダークテーマの両方に対応します
• 十分なタッチターゲットサイズ（最小 48x48dp）を確保します

3. レスポンシブデザイン

• Material Design 3 のブレークポイントを使用します
• 画面サイズに応じてレイアウトを調整します
• モバイル、タブレット、デスクトップの各ビューポートでテストします

4. ダイナミックなテーマ設定

// Example: Dynamic theme switching in Angular
export class ThemeService {
  private isDark = signal(false);
  
  toggleTheme() {
    this.isDark.update(dark => !dark);
    document.body.classList.toggle('dark-theme', this.isDark());
  }
  
  applyCustomColors(sourceColor: string) {
    // Generate M3 palette from source color
    const palette = this.generateM3Palette(sourceColor);
    this.applyCSSVariables(palette);
  }
}

🔧 よく使われるパターン

M3 トークンを使用したカスタムコンポーネント

@Component({
  selector: 'app-custom-button',
  template: `
    <button class="m3-button" [class.filled]="variant === 'filled'">
      <ng-content></ng-content>
    </button>
  `,
  styles: [`
    .m3-button {
      padding: 10px 24px;
      border-radius: var(--mat-sys-corner-full);
      font: var(--mat-sys-label-large);
      border: none;
      cursor: pointer;
      
      &.filled {
        background-color: var(--mat-sys-primary);
        color: var(--mat-sys-on-primary);
        
        &:hover {
          background-color: var(--mat-sys-primary-container);
          color: var(--mat-sys-on-primary-container);
        }
      }
      
      &.outlined {
        background-color: transparent;
        border: 1px solid var(--mat-sys-outline);
        color: var(--mat-sys-primary);
      }
    }
  `]
})
export class CustomButtonComponent {
  @Input() variant: 'filled' | 'outlined' = 'filled';
}

🐛 トラブルシューティング

問題	解決策
色が適用されない	最初に @include mat.core() が呼び出されていることを確認してください
テーマトークンが未定義	Angular Material のバージョンを確認してください（v15 以降が必要です）
ダークテーマが機能しない	親要素に .dark-theme クラスが適用されていることを確認してください
カスタムカラーが機能しない	適切な Material カラーパレットを指定して define-palette() を使用してください
タイポグラフィが読み込まれない	index.html に Material Design フォント（Roboto）を含めてください
アクセシビリティのコントラストに関する問題	カスタムカラーではなく、Material に組み込まれたカラーの役割を使用してください

📖 参考資料

• Material Design 3 公式ガイドライン
• Angular Material テーマ設定ガイド
• Material Design カラーシステム
• Material Design タイポグラフィ
• アクセシビリティガイドライン

💡 Material Design 2 からの移行

M2 から M3 に移行する際の主な変更点：

1. カラーパレットをテーマタイプ方式に置き換える
2. コンポーネントのスタイルを更新し、デザイントークンを使用する
3. カスタムテーマを新しいテーマ設定 API に移行する
4. タイポグラフィを mat-typography-level から M3 トークンに更新する
5. エレベーションミックスインを CSS カスタムプロパティに置き換える
6. 新しいコントラスト要件に照らしてアクセシビリティをテストする

---

📂 推奨される配置場所

プロジェクトレベルのスキル：

/.github/skills/material-design-3/skill.md

個人用のグローバルスキル：

~/.github/skills/material-design-3/skill.md

Material Design 3 に関するトピックが言及されると、Copilot はこのスキルを自動的に読み込みます。