material-3-expressive

Material 3 Expressive（Android UI/UX）

概要

Material 3 Expressive を使用して、Android の UI/UX を設計およびレビューします。ダイアログ、シート、モーダル、ツールバー、ボタンのコンポーネントトークンに関するリクエストを優先し、通常はガイダンスとトークンの参照情報を提示します。

ヒアリング項目

• 対象デバイスの種類（スマートフォン、タブレット、折りたたみ式、Wear OS）
• ウィンドウサイズクラス（Compact、Medium、Expanded）
• ブランド上の制約とダイナミックカラーの使用
• 主なアクションと、目を引く見せ場の希望（最大1～2個）
• モーションの制約と、モーション低減への期待
• アクセシビリティの目標（コントラスト、タッチターゲット）

デフォルトの前提条件

• 強度レベル：Foundational
• ウィンドウサイズクラス：Compact
• ダイナミックカラー：有効
• 標準のナビゲーションパターンを維持

クイックワークフロー

1. 強度レベルと、目を引く見せ場を確認します
2. デバイスの種類とウィンドウサイズクラスを確認します
3. Tier 1 のインデックスと出力テンプレートを読み込みます
4. コンポーネントの概要とトークン仕様ファイルを読み込みます
5. テーマ設定が必要な場合は、Tier 3 の基盤トークンを読み込みます
6. 出力：ガイダンスとトークン参照（テンプレートを参照）

デフォルトの出力形式（ガイダンスとトークン参照）

references/m3-component-token-output-template.md をベースとなる出力ひな形として、そのまま使用します。

• コンテキストと意図（1～2行）
• 強度レベルと、目を引く見せ場（数と配置）
• ウィンドウサイズクラスとデバイスの種類
• コンポーネントとバリアント
• トークン参照：使用するファイルパスとトークングループ（必要な場合のみ、主要な値を最小限引用）
• Compose マッピングの参照（任意）：references/compose-mapping.md
• 動作またはインタラクションの制約（概要に基づく）
• モーション低減時の代替動作に関する注記
• アクセシビリティとパフォーマンスの確認項目
• 任意：Compose マッピングに関する注記

Expressive の手法

手法	適用方法
形状のコントラスト	プライマリには大胆な角、セカンダリには控えめな角を使います
豊かな色使い	強調にはプライマリ／セカンダリコンテナを使います
タイポグラフィの階層	サイズとウェイトに変化をつけます
モーション	押下／選択時に形状を変形させます

制約： 1つのフローにつき、目を引く見せ場は最大1～2個です

Expressive の強度レベル

• Foundational： 明瞭さと親しみやすさを最優先します
• Excellent： パターンを維持しながら、色、タイポグラフィ、形状をより強調します
• Transformative： ユーザビリティとアクセシビリティを厳格に保ちながら、大胆なレイアウトとモーションを採用します

よくある間違い

間違い	修正方法
「よりすっきりした」見た目にするためにテキストラベルを削除する	ラベルは維持します。ラベルがないとユーザビリティが低下します
画面内に目を引く見せ場を多く配置しすぎる	1つのフローにつき1～2個に制限します
ナビゲーションパターンを崩す	標準のナビゲーション動作を維持します
モーション低減時の代替動作がない	システムのアニメーションスケールに従います。スケールが0の場合は、モーション低減または即時遷移を提供します
トークン値をハードコードする	セマンティックトークン（md.sys.color.*）を使用します
ウィンドウサイズクラスを無視する	Compact、Medium、Expanded をテストします

Android 固有のガイダンス

• ナビゲーションとコンポーネントの動作を維持します
• タッチターゲットに十分な大きさを確保し、プラットフォームの標準に合わせます
• システムのアニメーションスケールに従います。モーション低減の代替手段、またはスケールが0の場合の即時遷移を提供します
• タブレットと折りたたみ式デバイスにはウィンドウサイズクラスを適用します

レビューチェックリスト

階層

• 主なアクションを2秒以内に判別できる
• 画面内の目を引く見せ場は最大1～2個
• すべてのインタラクティブ要素のラベルを維持している

アクセシビリティ

• 色のコントラスト：テキストは4.5:1、テキスト以外は3:1
• タッチターゲット：最小48dp
• モーション：モーション低減時の代替手段を提供している
• スクリーンリーダー：コンテンツの説明が設定されている

Expressive への準拠

• 機能全体で強度レベルに一貫性がある
• 標準パターンを維持している
• ダイナミックカラーのトークンを使用している
• ウィンドウサイズクラスをテストしている

参照ティア（必要に応じて順番に読み込む）

Tier 1：最初に必ず読み込む

必要な情報	ファイル
コンポーネントトークンの検索	references/m3-expressive-specs-tokens-index.md
出力形式のテンプレート	references/m3-component-token-output-template.md
新規／更新コンポーネント	references/m3-expressive-components.md

Tier 2：コンポーネント固有（リクエストに応じて読み込み）

コンポーネント	概要	トークン
ボタン	m3-buttons.md	m3-buttons-specs-tokens.md
ボタングループ	m3-button-groups.md	m3-button-groups-specs-tokens.md
ダイアログ	m3-dialogs.md	m3-dialogs-specs-tokens.md
シート	m3-sheets.md	m3-bottom-sheets-specs-tokens.md / m3-side-sheets-specs-tokens.md
ツールバー	m3-toolbars.md	m3-toolbars-specs-tokens.md
FAB	m3-fabs.md	m3-fabs-specs-tokens.md
拡張 FAB	m3-extended-fab.md	m3-extended-fab-specs-tokens.md
FAB メニュー	m3-fab-menu.md	m3-fab-menu-specs-tokens.md
アイコンボタン	m3-icon-buttons.md	m3-icon-buttons-specs-tokens.md
分割ボタン	m3-split-button.md	m3-split-button-specs-tokens.md
ナビゲーションバー	m3-navigation-bar.md	m3-navigation-bar-specs-tokens.md
ナビゲーションレール	m3-navigation-rail.md	m3-navigation-rail-specs-tokens.md
アプリバー	m3-app-bars.md	m3-app-bars-specs-tokens.md
カルーセル	m3-carousel.md	m3-carousel-specs-tokens.md
プログレスインジケーター	m3-progress-indicators.md	m3-progress-indicators-specs-tokens.md
ローディングインジケーター	m3-loading-indicator.md	m3-loading-indicator-specs-tokens.md

Tier 3：基盤トークン（テーマ設定時に読み込み）

基盤	ファイル
カラーシステム	m3-color-system.md、m3-color-foundation-tokens.md
タイポグラフィ	m3-typography.md、m3-typography-foundation-tokens.md、m3-typography-fonts.md、m3-typography-type-scale-tokens.md
シェイプ	m3-shape.md、m3-shape-foundation-tokens.md、m3-shape-corner-radius-scale.md、m3-shape-morph.md
モーション	m3-motion-physics.md、m3-motion-foundation-tokens.md、m3-motion-specs.md
エレベーション	m3-elevation.md、m3-elevation-specs-tokens.md
状態	m3-state-foundation-tokens.md

Tier 4：根拠と調査（正当化のために読み込み）

リソース	ファイル
調査結果	references/expressive-research.md
テストガイダンス	references/m3-testing-material-3.md
Expressive ブログ	references/m3-expressive-blog.md
Expressive ガイドライン	references/m3-expressive-guidelines.md
UX 記事	references/medium-ux-article.md

Tier 5：Wear OS（ウェアラブルの場合のみ読み込み）

リソース	ファイル
メリット	references/wear-expressive-benefits.md
表現のレベル	references/wear-levels-of-expression.md
デザイン言語	references/wear-expressive-design-language.md
ブログ	references/wear-expressive-blog.md
Compose Material3	references/wear-compose-material3.md

補足リソース

リソース	ファイル
Android UI デザインハブ	references/android-ui-design-hub.md
Expressive カタログ	references/expressive-catalog.md
Compose マッピング	references/compose-mapping.md

メンテナンス

• skills/material-3-expressive/scripts/update_m3_expressive_refs.py で参照情報を更新します。
• Playwright と Chromium が必要です（必要に応じて .venv/bin/python -m playwright install chromium を実行してください）。
• CI は毎週実行されます。ローカルでの実行は緊急の変更向けです。

検索のヒント

• トークンのプレフィックスを検索：rg "md.comp.button" skills/material-3-expressive/references/m3-buttons-specs-tokens.md
• ナビゲーションのトークンを検索：rg "md.comp.navigation" skills/material-3-expressive/references/m3-.*navigation.*.md

例

• Compose の出発点として assets/examples/ui/ExpressiveHomeScreen.kt を使用します
• 標準ボタンと Expressive ボタンの違いを確認するには assets/examples/ui/ExpressiveButtonComparison.kt を使用します
• 避けるべき一般的な間違いを知るには assets/examples/ui/ExpressiveAntiPatterns.kt を使用します
• Expressive UX ブリーフの作成には assets/examples/ux/expressive-ux-brief-template.md を使用します
• 例は参考用です。サイズや色は、Expressive トークンとプロジェクトの制約に合わせて調整してください。