色
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
商品の階層、状態、ブランドを示す、よりアクセスしやすく、パーソナライズされたカラーパターンを作成します。ウェアラブル向けにデザインする場合、特に小さい画面では、色は視認性、ユーザビリティ、視覚的な魅力、表現を高めるために重要な役割を果たします。
次の原則は、テーマ全体で色を使用する方法を説明しています。
ベースは黒
スマートウォッチは、スマートフォン デバイスで使用される色付きの背景ではなく、黒い背景で設計されています。ダークモードは暗い環境向け、ライトモードは日中向けですが、スマートウォッチの UI は昼夜を問わずシームレスに機能する必要があります。そのため、スマートウォッチのカラートークンは、特別に調整する必要があります。
新しいカラーロール
マテリアル 3 のカラーシステムは、3 つのアクセント カラーと 2 つのニュートラル サーフェス カラーの構造を維持していますが、アクセント ロール内にコンテナ カラーを導入しています。これらの新しいロールにより、視覚的な階層を乱すことなく表現力を高めることができます。基本的には、クロマを増やしてサーフェスの色の変化を提供します。コンテナロールは、切り替えボタンなどの状態をハイライト表示する場合や、プライマリ アクセントがすでに使用されている場合に補完的なスタイルを提供する場合に特に便利です。
意味
スマートウォッチの UI では、色によって意味を明確かつ直感的に伝える必要があります。たとえば、赤はエラー、緑は成功を示します。これにより、ユーザーは追加の説明を必要とせずに、アクションや状態をすばやく把握できます。このように色をセマンティックに使用すると、ユーザーは UI を操作し、安心してアクションを実行できます。
色のユーザー補助（コントラストへの準拠）
スマートウォッチの UI では、色によって意味を明確かつ直感的に伝える必要があります。たとえば、赤はエラー、緑は成功を示します。これにより、ユーザーは追加の説明を必要とせずに、アクションや状態をすばやく把握できます。このように色をセマンティックに使用すると、ユーザーは UI を操作し、安心してアクションを実行できます。
新機能
ビジュアル デザイン システムと、スタイル基盤、コンポーネント、タイル デザイン ライブラリの更新を通じて表現を高める方法が大幅に更新されています。
マテリアル 3 の表現力豊かなカラーシステムには、次の機能があります。
- アクセシブルな色の関係が組み込まれている
- マテリアル コンポーネントにマッピングされた 28 以上のカラーロール
- 黒から作成するためのダークモードの色が組み込まれている
- 無効な色値の改善
- その他のエラーの色
- 各色ロールにデフォルトの色が割り当てられた静的ベースライン カラー
- システム/ウォッチフェイス、画像ベースのカラーテーマなどのダイナミック カラー機能
リソース
詳細については、次のリソースをご覧ください。
マテリアル デザインのカラー ガイドライン
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2025-07-26 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2025-07-26 UTC。"],[],[],null,["# Color\n\nCreate more accessible, personal color schemes communicating your product's\nhierarchy, state, and brand. When designing for wearables, color plays a crucial\nrole in enhancing legibility, usability, visual appeal, and expression,\nespecially on smaller screens.\n\nThe following principles explain how to use color across themes.\n\nBuild from black\n----------------\n\n\nWatches are designed with a black background, instead of the tinted background\nthat phone devices use. While dark themes are meant for low-light environments\nand light themes for daylight, watch UIs need to function seamlessly both day\nand night. Therefore, color tokens for watches must be specifically tailored. \n\n\u003cbr /\u003e\n\nNew color roles\n---------------\n\n\nThe Material 3 color system retains the structure of three accent colors and two\nneutral surface colors, but introduces container colors within the accent roles.\nThese new roles enable greater expressive potential without disrupting visual\nhierarchy, essentially providing surface color variations with increased chroma.\nContainer roles are particularly useful for highlighting states, such as toggle\nbuttons, or for providing complementary styling when the primary accent is\nalready utilized. \n\n\u003cbr /\u003e\n\nSemantic meaning\n----------------\n\n\nIn watch UIs, colors need to communicate meaning clearly and intuitively. For\nexample, red indicates errors and green signals success, helping users quickly\nunderstand actions or states without needing extra explanation. This semantic\nuse of color helps users navigate your UI and take action with confidence. \n\n\u003cbr /\u003e\n\nColor accessibility (contrast compliance)\n-----------------------------------------\n\n\nIn watch UIs, colors need to communicate meaning clearly and intuitively. For\nexample, red indicates errors and green signals success, helping users quickly\nunderstand actions or states without needing extra explanation. This semantic\nuse of color helps users navigate your UI and take action with confidence. \n\n\u003cbr /\u003e\n\nWhat's new\n----------\n\nThere are substantial updates to the visual design system and how we elevate\nexpression throughout updates to our style foundations, components, and tiles\ndesign libraries.\n\nThe Material 3 Expressive color system includes the following features:\n\n- Built-in set of accessible color relationships\n- 28+ color roles mapped to Material components\n- Built-in dark theme colors for building from black\n- Improved disabled color values\n- Additional error colors\n- Static baseline color with default colors assigned to each color role\n- Dynamic color features, including System/Watch face, and image-based color themes\n\nResources\n---------\n\nTo learn more, view the following resources.\n\n### Material Design color guidelines\n\n\n[Learn about the latest best practices](https://material.io/color) for color schemes using Material 3\nExpressive. \n\n\u003cbr /\u003e"]]
