material-design-3-ui

Material Design 3 UI/UX

目的

単に角を丸くしたり「Google 風」に見せたりするのではなく、Material Design 3 のように振る舞うインターフェースを作成します。

M3 をシステムとして扱います。

ユーザーの目標 → 情報アーキテクチャ → 階層 → アダプティブレイアウト → セマンティックトークン → コンポーネント → 状態 → インタラクション → モーション → アクセシビリティ → 視覚表現

M3 Expressive の使用は任意です。階層、使いやすさ、認識のしやすさ、感情の明確さを高めるために活用します。ただし、すべての要素を目立たせるための口実にしてはいけません。

信頼できる情報源

1. 最新の公式 Material 3 ガイダンス（https://m3.material.io/）を優先します。
2. Android の実装詳細については、https://developer.android.com/ を優先します。
3. デザインガイダンスと実装ライブラリ／API の状況は分けて扱います。
4. 正確な寸法、依存関係のバージョン、試験的な API 名、最近変更された動作を断言する前に、最新の公式ガイダンスを確認します。
5. Material 2 のルールを Material 3 に黙って混在させないでください。
6. Pixel や Google アプリのスクリーンショットは一例であり、仕様ではありません。

基本ルール

必ず行うこと

• スタイリングの前に、ユーザーのタスク、コンテンツ、階層、プラットフォームを起点にします。
• あちこちに個別の値を散在させるのではなく、セマンティックデザイントークンを使用します。
• 見た目の類似性ではなく、目的と動作に基づいてコンポーネントを選びます。
• インタラクションを解決できる場合は、確立された M3／プラットフォームコンポーネントを優先します。
• 重要な状態を定義します。該当する場合は、デフォルト、押下中、フォーカス、ホバー、選択済み、無効、読み込み中、エラー、空、成功の状態を含めます。
• 想定上のデバイスカテゴリではなく、利用可能なウィンドウに合わせて設計します。
• アクセシブルなコントラスト、ターゲットサイズ、フォーカス、セマンティクス、拡大縮小、色以外による状態の伝達を確保します。
• 該当する場合は、システムバー、安全領域、カットアウト、キーボード／IME、折りたたみ式端末のヒンジ、エッジツーエッジ動作に配慮します。
• プライマリアクションを、セカンダリアクションや破壊的アクションと見分けられるようにします。
• カスタムコンポーネントには、システムのトークン、状態、モーション、アクセシビリティのロジックを継承させます。
• 製品要件により M3 から意図的に外れる場合は、その理由を説明します。

必ず避けること

• 大きな角丸、パステルカラー、影、Material Symbols を追加するだけで画面を「マテリアル化」しないでください。
• セマンティックな役割を使用できる場合に、画面全体へ生の色の値をハードコードしないでください。
• 意味や状態を色だけで伝えないでください。
• すべてのセクションやリスト行をカードで囲まないでください。
• すべてのコンポーネントの角丸を最大にしないでください。
• 重要度の低いアクション、破壊的アクション、曖昧なアクションに FAB を使用しないでください。
• チップを汎用ボタンやプライマリナビゲーションとして使用しないでください。
• 関連性のない最上位の遷移先にタブを使用しないでください。
• すべてのコンポーネントを同じように強く表現しないでください。
• 確立された M3／プラットフォームのコントロールでインタラクションを解決できる場合に、新しいコントロールを考案しないでください。
• 視覚的な構成を保つためにアクセシビリティを犠牲にしないでください。
• コンパクト／モバイル向けのレイアウトを、変更せずに幅の広いウィンドウへ引き伸ばさないでください。

段階的に開示するリファレンス

現在のタスクに必要なリファレンスのみを読み込みます。デフォルトですべてのリファレンスを読む必要はありません。

必要な内容	読むリファレンス
色の役割、サーフェス、ダークテーマ、ダイナミックカラー	references/color-system.md
タイポグラフィの階層、スケーリング、表現豊かな文字組み	references/typography.md
形状、カード、包含、エレベーション	references/shape-and-elevation.md
余白、配置、読みやすい幅、安全領域	references/spacing-and-layout.md
ボタン、FAB、カード、チップ、選択、入力、フィードバック	references/component-selection.md
ナビゲーションバー／レール／ドロワー、タブ、アプリバー	references/navigation.md
フォーム、バリデーション、設定、テキスト入力	references/forms-and-input.md
スナックバー、ダイアログ、シート、読み込み、空／エラー状態	references/feedback-and-overlays.md
レスポンシブ、タブレット、折りたたみ式、デスクトップ、マルチペイン	references/adaptive-design.md
アクセシビリティ監査または最終的なUIレビュー	references/accessibility.md
トランジション、フィードバックアニメーション、形状の変化	references/motion.md
Material 3 Expressive	references/m3-expressive.md
最終監査／「Materialらしく見える」UIの疑わしい箇所	references/anti-patterns.md

広範囲にわたるエンドツーエンドのデザインでは、判断が必要になった段階でリファレンスを順次読み込みます。最終承認の前には、必ずアクセシビリティのリファレンスを確認してください。

ワークフロー

タスクの範囲が特定の段階に限定されていない限り、次の順序で進めます。

1. プロダクトを理解する

プラットフォーム、主なユーザーの目標と操作、最上位の移動先、コンテンツ階層、データ密度、入力方法、ブランド上の制約、必要な状態とエッジケース、対象ウィンドウサイズ、M3 Expressiveが適切かどうかを特定します。

不足している情報が作業を妨げない場合は、保守的なM3準拠の前提を置き、その旨を明記します。不足情報によってアーキテクチャや操作方法が大きく変わる場合に限り、質問します。

2. 情報アーキテクチャを確立する

スタイルを決める前に、次の作業を行います。

• 関連する情報をグループ化し、画面ごとの主なタスクを特定します。
• ナビゲーションとアクションを分け、破壊的なアクションを区別します。
• 重複するコントロールを取り除き、段階的な開示の方法を定義します。
• 余白があるという理由だけで情報を表示することは避けます。

3. 適応型の構造を選ぶ

複数のウィンドウサイズやナビゲーション形式が関係する場合は、references/adaptive-design.md と references/navigation.md を読みます。

コンテンツに適している場合は、リストと詳細、補助ペイン、フィード、適応型ナビゲーションなどの標準的なパターンを優先します。

広いスペースは、コンテンツを単に引き伸ばすのではなく、コンテキストや生産性の向上に役立てます。

4. 意味に基づいてテーマを構築する

関連する色、タイポグラフィ、形状／エレベーション、余白のリファレンスを読みます。

次の階層を使用します。

リファレンス／システムトークン → セマンティック／システムロール → コンポーネントトークン

画面では、散在するリテラル値ではなく、セマンティックロールを参照します。

5. コンポーネントを選択する

references/component-selection.md と、必要に応じてナビゲーション、フォーム、フィードバックの各専門リファレンスを読みます。

重要なコントロールごとに、意味上の目的、強調度、即時処理かトランザクション処理か、インタラクション状態、アクセシビリティの動作、適応時の動作を判断します。

6. 状態とフィードバックを定義する

該当する読み込み、空、エラー、成功、無効、選択、押下、フォーカス、ホバー、処理中／送信中の各状態を網羅します。

エラー状態には、復旧するための手段を用意します。

7. アクセシビリティを適用する

references/accessibility.md を読みます。

アクセシビリティはリリース要件です。見た目を整える段階まで後回しにしてはいけません。

8. モーションを追加する

モーションがタスクに含まれる場合にのみ、references/motion.md を読みます。

モーションは、状態、階層、空間的な関係、または応答を説明するものでなければなりません。見せることだけを目的にアニメーションを使わないでください。

9. 適切な場合は M3 Expressive を適用する

references/m3-expressive.md を読みます。

意図を持たせた表現豊かな演出を、いくつか取り入れます。通常の閲覧、フォーム、設定、情報量の多い生産性向け画面は、強い表現によって使いやすさが向上する場合を除き、落ち着いたデザインにします。

10. 承認前に監査する

references/anti-patterns.md を読み、以下のセルフ監査を実施します。

セルフ監査

デザインを納品する前に、該当する各カテゴリを 0、1、2 で評価します。

• 0 = 不適切／不足
• 1 = 部分的に適切／改善が必要
• 2 = そのまま使用可能

カテゴリ	確認項目
タスクの明確さ	ユーザーの主な目的と操作が明確である
情報階層	グループ化と強調に一貫性がある
コンポーネントの意味	コントロールが実際の動作に合っている
トークンの一貫性	セマンティックロールが一貫して使われている
適応性	関連するウィンドウに応じてレイアウトが改善される
状態とフィードバック	重要な状態と復旧方法が網羅されている
アクセシビリティ	ターゲット、コントラスト、セマンティクス、フォーカス、拡大縮小、モーションの低減
表現の抑制	ノイズを生み出すことなく、表現によって階層が向上している

コンポーネントの意味、状態とフィードバック、アクセシビリティのいずれかに 0 があるデザインは、承認できる状態ではありません。

ユーザーの要望に合わせるために、評価を水増ししないでください。具体的な問題と修正内容を明示してください。

引き継ぎの要件

UI のデザイン、再デザイン、監査、または引き継ぎを依頼された場合、別のデザイナーや開発者が判断内容を再現できるだけの詳細を提示します。

ユーザーが別の形式を指定しない限り、該当する項目を含めてください。

1. デザインの意図 — ユーザーの目的と階層。
2. レイアウト — 領域、ペイン、ナビゲーション、適応動作。
3. テーマのロール — セマンティックカラー、タイポグラフィ、形状、エレベーション。
4. コンポーネントマップ — 重要なコントロールに使用する M3 コンポーネントの種類とバリアント。
5. 状態 — インタラクション、読み込み中、空の状態、エラー、成功、無効。
6. アクセシビリティ — ターゲットサイズ、コントラスト、名前、フォーカス、キーボード、拡大縮小。
7. モーション — 意味のある遷移や状態変化に限ります。
8. 実装上の注意 — プラットフォーム固有の注意点、実験的または未サポートの API。
9. セルフ監査 — ユーザーがレビュー、監査、または本番環境への対応状況の確認を求めた場合に含めます。

実際のコードや成果物を作成する場合は、説明だけで終わらせず、これらの判断を適用してください。

セマンティックな引き継ぎの例

次のようにします。

Screen background: surface
Primary text: onSurface
Secondary text: onSurfaceVariant
Primary CTA: filled button / primary + onPrimary
Secondary CTA: outlined button
Section container: surfaceContainer
Subtle separator: outlineVariant
Error container: errorContainer + onErrorContainer

プロジェクトのトークンシステムに含まれている場合を除き、任意のリテラルに基づく引き継ぎは避けてください。

プラットフォームの実装上の注意

Android / Jetpack Compose

• 新しい M3 の実装では androidx.compose.material3 を優先します。
• アルファ版／実験的な依存関係が明示的に許可されている場合を除き、本番環境では安定版 API を優先します。
• すべての M3 Expressive API が安定版だと想定しないでください。
• 生の色値ではなく、Material のテーマロールを使用します。
• サイズ変更可能なウィンドウや大画面での利用には、最新の Android のアダプティブデザインのガイダンスに従います。
• エッジツーエッジ表示とシステムインセットは、レイアウト上の課題として扱います。
• Wear OS では、モバイル向けコンポーネントを混在させず、Wear Material 3 を使用します。

生成する実装にライブラリのバージョン番号をハードコードする場合は、現行の公式リリースノートで確認してください。

Web／その他のプラットフォーム

公式の実装ライブラリがすべてのコンポーネントを提供していなくても、Material 3 のガイダンスを設計の参考にできます。

• Android 固有の癖ではなく、セマンティクスとトークンの関係を再現します。
• プラットフォーム標準のアクセシビリティと入力規則を維持します。
• カスタム実装であることを明確に示します。
• 確認せずに、公式にそのプラットフォームで利用できると主張しないでください。

最終原則

Material Design 3 は、セマンティックで、適応性とアクセシビリティに優れたデザインシステムです。

ブランドカラーの変更、ウィンドウのサイズ変更、ダークテーマの有効化、テキストの拡大、タッチからキーボードへの切り替え、または表現豊かなスタイルの抑制があっても、一貫性を保てることが、優れた M3 インターフェースの条件です。

すべてのサーフェスが丸く、色鮮やかであるからこそ成り立つデザインは、堅牢な Material 3 デザインではありません。