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

カラーロールとトークン

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

カラーロールとは

色の役割は、塗り絵のキャンバスの「数字」のようなものです。UI の要素と、どの色をどこに配置するかを結びつける役割を果たします。

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

重要な用語

カラーロールの名前には、次のキーワードが使用されています。

Surface: 画面の背景や、強調されていない広い領域に使用されるロール。
Primary、Secondary、Tertiary: フォアグラウンド要素を強調または非強調するために使用されるアクセントカラーの役割。
コンテナ: ボタンなどのフォアグラウンド要素の塗りつぶし色として使用されるロール。テキストやアイコンには使用しないでください。
オン: この用語で始まるロールは、ペアの親の色の上に表示されるテキストまたはアイコンの色を示します。たとえば、on primary は、プライマリの塗りつぶし色に対するテキストやアイコンに使用されます。
バリアント: この用語で終わるロールは、バリアントでないペアのロールよりも重要度が低い代替手段を提供します。たとえば、アウトラインバリエーションは、アウトラインの色を強調しないバージョンです。

メインの役割

プライマリロールは、エッジハギングボタン、視認性の高いボタン、アクティブ状態、トーンボタンスタイルのアイコンなど、UI の主要なコンポーネントに使用されます。

プライマリ

メイン
On-Primary

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

Primary-Dim

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

密なレイアウトでセカンダリ要素を整理するには、Secondary-Container を適用します。構造と分離を作成し、二次コンテンツが区別可能でありながら、支配的にならないようにします。

第 3 の役割

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

Tertiary

Tertiary
On-Tertiary

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

Tertiary-Dim

Tertiary-Dim
Tertiary

すぐにフォーカスする必要はないが、第 3 のアクションに関連するボタンやアクションには、Tertiary Dim ロールを使用します。

Tertiary-Container

Tertiary-Container
On-Tertiary-Container

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

セマンティックロール

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