material-design-3

Material Design 3

Material 3 のセマンティクス、コンポーネント、トークン、インタラクション状態、プラットフォームの動作を活用して、一貫性のあるプロダクトインターフェースを構築します。目指すのは、なんとなく Material に見えるだけの画面ではありません。優れた Android または Web のプロダクトとして動作し、表現を加えるのは階層や理解を向上させる場合に限ります。

まずコンテキストを把握する

UI を変更する前に、プロジェクトを十分に確認し、次の点を把握してください。

• 対象はどれですか：Android Compose、Android Views、Wear OS、Web のいずれですか？
• すでに導入されている Material ライブラリとバージョンは何ですか？
• 要求された API は対象プラットフォームで安定版、試験運用版、または利用不可のどれですか？
• 既存のテーマ、コンポーネント、ナビゲーションモデル、間隔の規則、アセットは何ですか？
• 画面の主なタスク、主なアクション、コンテンツの階層、状態モデルは何ですか？
• コンパクト、中程度、拡張、デスクトップ、折りたたみ式デバイス、入力方法のうち、どのシナリオが重要ですか？

既存のプロダクトアイデンティティとアーキテクチャを維持してください。タスクで明示的に再設計または移行が求められていない限り、既存のテーマと再利用可能なコンポーネントを優先してください。スタイル変更に便乗して、依存関係をアップグレードしたり、アルファ版をオプトインしたり、Views から Compose に移行したりしないでください。

関連するリファレンスを読む

• 視覚的な階層、色、タイポグラフィ、形状、エレベーション、レイアウト、コンポーネントの選択については、references/design-foundations.md を読んでください。
• Android ライブラリ、Compose の実装、テーマ設定、システム UI、Views の境界については、references/android.md を読んでください。
• Material 3 Expressive が求められている場合、または実質的に有用な場合は、references/expressive.md を読んでください。
• レスポンシブ／アダプティブな動作、アクセシビリティ、キーボード、フォーカス、検証については、references/adaptive-accessibility.md を読んでください。
• HTML、CSS、Web コンポーネント、Angular Material、またはその他の Web フレームワークについては、references/web.md を読んでください。
• 依存関係の選択やアップグレード、API の利用可否の検証、ガイダンスの引用を行う場合は、references/sources.md を読んで、バージョンに依存する情報を公式ソースで確認してください。

現在の対象に必要なリファレンスだけを読んでください。

デザインルール

装飾より先に階層を定める

1. 主要なタスクを一つ特定し、必要最小限の補助アクションを定めます。
2. まず配置、間隔、タイポグラフィ、背景の役割によってコンテンツをグループ化します。
3. 所有関係、操作、選択、スクロールの動作を明確にする場合にのみ、コンテナを追加します。
4. コンポーネントの強調バリエーションを使って、アクションの優先度を表します。
5. 基本的な階層が機能してから、表現力のある形状、色、モーションを追加します。

任意の値ではなく Material のロールを使う

• 色、形状、文字サイズ、エレベーションをリテラル値でばらばらに指定するのではなく、MaterialTheme のロールまたは Material Web のシステムトークンを使用します。
• コンテンツを surface、surfaceContainer、primary、onSurfaceVariant、outlineVariant、error などのセマンティックロールに割り当てます。
• ライトモード、ダークモード、動的カラー、コントラスト、無効状態の一貫性を保ちます。
• プロダクトで定められた間隔のリズムを再利用します。個別のカスタム値は、コンテンツまたはプラットフォームの制約によって正当化される場合にのみ使用します。

サーフェスを控えめに保つ

• すべてのセクション、行、指標、コントロールを枠線付きカードで囲まないでください。
• カードを入れ子にしたり、同じコンテンツの周囲に装飾的なコンテナをいくつも重ねたりしないでください。
• 入れ子になったコンテナやサーフェスで、同じ所有関係、グループ分け、強調を繰り返さないでください。レビュー時の目安として、親サーフェス内の意味のあるコンテンツ単位3つにつき、作成者が明示的に設ける入れ子コンテナは1つまで（1:3）にしてください。
• コンテンツ単位に独自の境界が必要で、親の1:3の上限を超える場合は、入れ子にするのではなく、独立した兄弟コンテナまたはサーフェスに昇格させてください。リージョンサーフェスからその単位まで、作成者が明示的に設ける包含階層は最大2段階にしてください。フレームワーク内部の要素とレイアウト専用ノードは数に含めません。
• 余白、サーフェスの役割の変更、または1本の区切り線で境界を伝えられる場合は、アウトラインを使わないでください。
• 永続的な境界がコンポーネントの役割の一部である場合に限り、公式のアウトライン付きコンポーネントとデフォルトのボーダートークンを使用してください。コンポーネントやその親の周囲に、2つ目のアウトラインを追加しないでください。
• コンポーネントや状態を識別するために必要な境界にはoutlineを使用し、強調度の低い必須ではない区切りにのみoutlineVariantを使用してください。装飾目的のコントラストが低い線だけで、フォーカス、エラー、選択、コントロールの境界を示さないでください。
• 装飾としてシャドウを使わないでください。実際に重なりがある場合、モーダルを分離する場合、または浮遊要素の奥行きを判別できる必要がある場合に限り、シャドウによるエレベーションを使用してください。
• 通常の階層表現には、色調によるエレベーションとサーフェスコンテナの役割を優先してください。
• 製品や提供されたリファレンスで明示的に求められていない限り、グラデーション、グロー、ぼかし、ガラス効果、装飾的なボーダーは避けてください。
• デフォルトのパレットを透明、不透明度の低いもの、または「リキッドグラス」にしないでください。Materialのサーフェスには、壁紙、画像、下位レイヤーが透けるのではなく、安定して読みやすい色の役割を持たせてください。
• 奥行きを演出するために、backdrop-filter、すりガラスのパネル、不透明度の高いサーフェス塗りつぶし、半透明のボーダー、ガラス風のハイライトを使わないでください。
• 安定したテーマ付きサーフェスによって読みやすさが向上する場合、重要なテキスト、コントロール、フォーム、ナビゲーションを透明な画像処理の上に配置しないでください。
• システムサーフェス、メディアオーバーレイ、イマーシブビューアー、または提供されたブランドリファレンスで半透明が本当に必要な場合は、適用範囲を限定し、意味上のコントラストを維持し、ライトモードとダークモードおよびダイナミックカラーでテストし、不透明な代替表示も用意してください。
• すべてのサーフェスに同じ大きな角丸を適用しないでください。形状によって、コンポーネントのファミリー、グループ分け、状態、強調度を伝えてください。
• 業務用の画面をランディングページのようにしたり、大きすぎるヒーローコピーを追加したり、プレミアム感を演出するためだけに空白を設けたりしないでください。

コンポーネントは本来の用途に使う

• 最も強調度の高い塗りつぶしアクションは、主な完了アクションに使用してください。強調度を下げる場合は、色調付き、アウトライン付き、またはテキストのバリアントを使用してください。
• FABは、頻繁に使う画面レベルの主要アクションに限って使用してください。Materialらしく見えるという理由だけで追加しないでください。
• カードは、個別性があり、内容が異なり、それぞれ独立して操作できるコンテンツに使用してください。密度の高い均質なコンテンツには、リストまたは枠のないセクションを優先してください。
• チップは、コンパクトな属性、フィルター、選択肢、候補に使用し、汎用ボタンや装飾的なラベルとして使わないでください。
• タブは、1つの遷移先内の同等なビューに使用し、グローバルナビゲーションには使用しないでください。
• ダイアログは短時間で判断が必要な場面に、シートは状況に応じた選択肢や補助タスクに、複雑なフローには全画面表示を使用してください。
• 破壊的なアクションは明示し、通常のアクションとは分けてください。復旧が難しい場合に限り、確認を求めてください。

すべての状態を意図的に設計する

ワークフローで実際に到達しうる、有効、押下中、フォーカス中、該当する場合はホバー中、選択済み、無効、読み込み中、空、エラー、オフライン、成功の各状態をカバーしてください。色だけで状態を伝えないでください。非同期の変更中も、コンテンツとレイアウトの安定性を保ってください。

読み込みとフォームをプロダクトの状態として扱う

• 把握できている構造やコンテンツの量、処理にかかる時間に応じて、段階的な読み込み、スケルトン、インラインの進行表示、シンプルなインジケーターを選びます。
• 画面全体を隠す中央配置のスピナーよりも、最終的なレイアウトに合った安定したプレースホルダーを優先します。
• 独立した領域の準備ができたらコンテンツを段階的に表示し、無関係な処理のために利用可能なコンテンツまでブロックしないようにします。
• 送信、検証、自動保存、アップロード、再試行の状態を明確にし、復旧できるようにします。
• フォームのラベル、補足テキスト、エラー、必須状態、フォーカス、キーボード／IME の動作、アクションの優先順位を、設計上の要件として明示します。
• 何が起きているかを説明せず、安全なナビゲーションやキャンセルの手段も確保しないまま、フォーム全体を無効にしてはいけません。

Material 3 Expressive の適用基準

Material 3 Expressive は、装飾のための処理ではなく、意図的に強弱をつけるためのシステムです。

• 情報量が多い、反復的、または実用性が重視されるワークフローでは、標準の Material 3 をデフォルトで使用します。
• 表現豊かなモーション、形状のコントラスト、柔軟なタイポグラフィ、新しい表現豊かなコンポーネントは、注意喚起、フィードバック、感情的なトーンの向上に役立つ主要な場面で使用します。
• 繰り返し使うユーティリティ操作は、重要な画面遷移やヒーロー的な操作よりも落ち着いた表現にします。
• すべてのコントロールを変形させたり、サイズ変更のたびにアニメーションを付けたり、形状ライブラリを背景の装飾に使ったりしないでください。
• インストール済みのライブラリで正確な API を確認します。ExperimentalMaterial3ExpressiveApi とリリースチャネルの境界を守ってください。
• 既存プロジェクトが安定版の Material 3 を使用しており、Expressive の導入にアルファ版 API が必要な場合は、リリースチャネルを変更する前に依存関係と API のトレードオフを提示します。

実装ワークフロー

1. 描画される画面遷移、テーマ、共有コンポーネント、依存関係、対象画面サイズを確認します。
2. コンテンツの優先順位、ナビゲーション、主要アクション、コンポーネント、状態、画面サイズに応じた変換をまとめた、簡潔な UI 要件を作成します。
3. 適切なコンポーネントがない場合は、公式コンポーネント、または必要最小限のアクセシブルなカスタム構成を選びます。
4. 仕上げの調整より先に、テーマの役割とレイアウト構造を実装します。
5. インタラクションの動作、セマンティクス、システムのインセット、フォーカス順序、状態の復元を追加します。
6. 表現は選択的に適用し、情報を伝えないアウトライン、シャドウ、コンテナ、アニメーションは取り除きます。
7. 理想的なプレビューだけでなく、現実的なコンテンツを使って、関連するウィンドウサイズで検証します。

既存の画面を変更する場合は、適切な範囲で最小限の変更にとどめます。依頼がない限り、アプリのデザイン言語全体を置き換えてはいけません。

必須の検証

表示される UI の変更では、コンパイルが通るだけでは視覚的な検証になりません。

• 関連する範囲で最小限のコンパイル、lint、またはフレームワークのチェックを実行します。
• 指定された対象とビューポートを確認します。スマートフォン／タブレットのレイアウトでは、コンパクトなスマートフォンと、影響を受けるその他すべてのウィンドウクラスを含めます。Wear、ウィジェット、Web では、それぞれの対象に固有の設定を使用します。
• 必要に応じて、長いローカライズ済みテキスト、大きなフォントスケール、ダークテーマ、ダイナミックカラー／カスタムカラー、読み込み中、空の状態、エラー表示を確認します。
• 対象となる Android のスマートフォン／タブレット画面では、エッジツーエッジのインセット、IME との重なり、ジェスチャー領域、回転／サイズ変更、状態の継続性を確認します。
• Web では、キーボードナビゲーション、視認可能なフォーカス、ホバー、モーションの低減、ズーム、幅の狭いレイアウトと広いレイアウトを確認します。
• Android のタッチターゲットが 48dp であること、および Web のヒットターゲットがプラットフォームに適した大きさであることを確認します。
• 色だけに頼らず、コントラストと意味が保たれていることを確認します。
• コンテナが境界を重複させていないこと、1:3 の包含予算を超えていないこと、作成者が追加するネストが 2 階層以内であることを確認します。
• 意味のある境界線、状態表示、フォーカスインジケーターが、サポート対象のすべてのテーマと状態で識別できることを確認します。装飾的な線に必須の意味を持たせてはいけません。
• ラベルのクリッピング、コントロールの重なり、意図しない入れ子状のスクロール領域、レイアウトの予期しない変化がないことを確認します。

環境が対応している場合は、スクリーンショットまたはプレビューを使って視覚的に比較します。実際に確認したデバイス／ブラウザーのシナリオを明確に記載します。

レビュー結果

作業をレビューまたは引き継ぐ際は、次の内容を報告してください。

• 選択した Material ライブラリと、実験的な API の有無。
• 実装した階層構造とアダプティブな動作。
• 対応したアクセシビリティとシステム UI の動作。
• 実際に実行したチェックと、実際に確認した画面サイズ。
• デバイス、ブラウザー、移行、依存関係に関する残存リスク。

命名、依存関係の存在、コンパイルだけを根拠に、Material 3 Expressive、アダプティブ対応、アクセシビリティ対応、または視覚的な検証済みであると主張しないでください。