このページは Cloud Translation API によって翻訳されました。

カラーロールとトークン
コレクションでコンテンツを整理必要に応じて、コンテンツの保存と分類を行います。

Wear マテリアル 3 の表現豊かなカラーシステムでは、主要なコンポーネントに 3 つのアクセントレイヤ（プライマリ、セカンダリ、ターシャリ）と 2 つのニュートラルサーフェスレイヤを使用します。各ロールには、一貫したコントラストを持つさまざまな値が用意されており、表現力がありながらアクセスしやすい色の組み合わせを実現し、どのテーマでも統一されたエクスペリエンスを提供できます。

カラーロールとは

色ロールは、塗り絵キャンバスの「番号」のようなものです。これらは、UI の要素と、どの色をどこに配置するかをつなぐ組織です。

色の役割がマテリアルコンポーネントにマッピングされている: 静的なベースラインパターンを使用する場合でも、ダイナミックカラーを使用する場合でも、これらの色の役割を使用します。商品にカスタムコンポーネントが含まれている場合は、この一連の色ロールに適切にマッピングする必要があります。
カラーロールはユーザー補助をサポート: カラーシステムは、よりアクセスしやすい色の組み合わせに基づいて構築されています。これらの色ペアは、3:1 以上の色のコントラストを提供します。
色の役割がトークン化されている: 役割は、トークンを使用してデザインとコードに実装されます。デザイントークンは、デザインシステムの視覚的スタイルの一部である、小さくて再利用可能なデザイン上の決定を表します。

重要な用語

色ロールの名前に含まれる主な用語は次のとおりです。

サーフェス: 背景や、画面の大きな強調度の低い領域に使用されるロール。
プライマリ、セカンダリ、ターシャリ: フォアグラウンド要素の強調や強調の弱化に使用されるアクセントカラーのロール。
コンテナ: ボタンなどのフォアグラウンド要素の塗りつぶし色として使用されるロール。テキストやアイコンには使用しないでください。
オン: この用語で始まるロールは、ペア設定された親の色の上に表示されるテキストまたはアイコンの色を示します。たとえば、on-primary は、プライマリ塗りつぶし色に対してテキストとアイコンに使用されます。
バリアント: この用語で終わるロールは、バリアント以外のペアに比べて優先度が低い代替手段です。たとえば、アウトラインバリアントは、アウトライン色の強調度を下げたバージョンです。

メインの役割

プライマリロールは、エッジを覆うボタン、目立つボタン、アクティブ状態、トーンボタンスタイルのアイコンなど、UI の主要なコンポーネントに使用されます。

プライマリ

メイン
On-Primary

プライマリボタンや行動を促すフレーズなど、UI で最も重要なアクションにはプライマリロールを使用します。この色は、ユーザーが主要な操作に誘導されるように、目立つ色ですぐに認識できるものにする必要があります。

Primary-Dim

プライマリ - ディム
On-Primary

通常、ディムロールは、メインアクションとは視覚的に区別する必要があるものの、ユーザーの即時的な注意や操作を必要としない要素に使用されます。

Primary-Container

Primary-Container
On-Primary-Container

カードやモーダルなどの背景要素にプライマリコンテナを適用して、セクションや選択した状態をハイライト表示します。UI 内の重要なコンテンツや進行中のアクティビティに注意を向けることができます。

セカンダリロール

セカンダリロールは、UI 全体の主要なコンポーネントに使用されます。プライマリロールほど重要ではありませんが、目立つ必要があります。プライマリとセカンダリは、レイアウトで一緒に使用して、差別化とフォーカスを作成できます。

セカンダリ

Secondary
On-Secondary

セカンダリロールは、セカンダリボタンや補完的なアクションなど、UI が密集している領域でのアクションをサポートする場合に使用します。複雑なレイアウトでプライマリ要素を覆い隠すことなく、視認性を維持します。

Secondary-Dim

Secondary-Dim
Secondary

Secondary-Dim ロールは、密集した領域のパッシブ要素のコントラストを抑えます。サブカラーを補完しながら、微妙な奥行きを追加し、UI をすっきりさせ、ユーザーの操作をサポートします。

Secondary-Container

Secondary-Container
On-Secondary-Container

セカンダリコンテナを適用して、高密度レイアウトでセカンダリ要素を整理します。構造と分離を作成することで、二次的なコンテンツを区別しながら、目立たないようにします。

第三の役割

ターシャリロールは、プライマリカラーとセカンダリカラーのバランスを保つため、または入力フィールドなどの要素に注意を引くための、対照的なアクセントに使用されます。サードパーティのロールを使用すると、目標の達成など、コンテンツが変更されたときや目立つようにする必要があるときにも役立ちます。

第 3 次

Tertiary
サードパーティ

ターシャリロールは、重要な要素に注意を引くために使用されます。第三のロールは、バッジ、ステッカー、特別なアクション要素など、目立つ必要があるコンポーネントに特に効果的です。

Tertiary-Dim

Tertiary-Dim
Tertiary

サードパーティのアクションに関連しているが、すぐにフォーカスする必要がないボタンやアクションには、サードパーティのディムロールを使用します。

Tertiary-Container

Tertiary-Container
On-Tertiary-Container

バッジやステッカーのコレクションなど、第三次的な関連コンテンツをグループ化する背景には、Tertiary-Container を適用します。UI のバランスと構造を維持しながら、第 3 要素を強調します。

セマンティックロール

エラー - 赤は、エラー、削除、緊急に関連する重大な問題を示すために使用されます。問題や警告にすぐに注意を向けるように設計されているため、ユーザーは是正措置が必要な領域をすばやく特定できます。エラーレッドのトーンは、ユーザー補助の基準を満たすために背景とのコントラストを十分に維持し、はっきりと目立つようにする必要があります。また、警告や成功メッセージなどの他のステータスカラーと区別できるようにする必要があります。