色を使用してスタイルを表現し、意味を伝える。アプリの色の設定は、パーソナライズ、セマンティック目的の定義、もちろんブランド アイデンティティの定義のために非常に重要です。
テイクアウェイ
- ユーザー補助機能を確保するには:
- 色のコントラストを確認し、色調が似ている色の組み合わせは避けます。
- 赤と緑は一般的なパターンですが、ある種の色覚異常では利用できないことを考慮してください。
- 色を有意義に使用する練習をする: アプリは鮮やかで表現力に富みながら、カラーパレットを維持します。セマンティック カラーが多すぎるとスキームを拡張すると混乱を招くことがあり、装飾カラーが多すぎると圧倒されることもあります。
- 色にはパターンがあるので、確立されている色のパターンを繰り返します。アプリでセマンティック カラーを使用する場合は、一貫した色を使用してください。
- さまざまな状況でアプリを適切に動作させるには、ライトとダークのカラーパターン（理想的にはコントラスト テーマ）を作成します。
- ハードコードされた値を使用する代わりに、要素の色の役割を示すトークンを色に割り当てます。
- 色はさまざまな動的ソースと静的ソースから取得されますが、同じビュー内で色を混ぜすぎないようにしてください。
- ダイナミック コンテンツ カラーを使用する場合は、複数のコンテンツ部分から色を取得しないようにしてください。
Android の色空間
Android で UI に色がどのように適用されるかを適切に理解するには、まず、色がデバイスでどのように表示されるかを認識することが重要です。
デバイスでの色の表示
アプリはバックライト付きの画面に表示されます。この画面ではデジタルカラーが使用され、人間の目で色を認識できるように特定のモデルとルールに準拠しています。デジタルカラーとは、さまざまな光を「追加」または混ぜて、あらゆる色の色を作り出す加法色です。人間が画面の色をどのように認識するかは、デバイスの色調整、画面タイプ、設定、色空間によって大きく異なります。
アプリを設計する際は、個々のユーザーの色はもちろんのこと、こうした要因により、使用する色が同一でない可能性があることを考慮してください。
色空間について
色空間は、色モデルを使用する色の整理です。RGB は赤、緑、青のカラースペクトルを作成する加法カラーモデルですが、印刷に使用される CMYK は減法です。そのため、インタラクティブなデザイナーは通常、RGB などのモデルを使用して色を選択します。
マテリアル 3（M3）では HCT を導入しました。HCT は、色相、彩度、色調を使用して、HSL などの他のモデルよりも知覚的に正確な色を定義する新しい色空間です。
HCT のカラー サイエンスと開発について詳しくは、The Science of Color & Design をご覧ください。
色相、彩度、トーン
HCT を使用すると、システム パラメータの範囲内で、よりパーソナライズされた柔軟な色を使用できます。HCT モデルの色相、彩度、トーン:
- Hue: 色相は、「赤」や「エレクトリック バイオレット」など、個々のユーザーが色を表すために使用する形容詞に似ています。色相の HCT 値の範囲は 0 ～ 360 です。
- 彩度: 彩度は、ニュートラル グレーから完全な鮮やかな色まで、色の彩度を表します。HCT 色空間での彩度の最大値は約 120 です。
- トーン: トーンとは色の輝度（明るさ）です。HCT ではトーンを使用してコントラストをつけます。同じトーン値に設定された色は、特定のユーザー補助コンテキストではアクセスできません。値が低いトーンは暗く、値が高いトーンは明るくなります。
カラーシステム プロセス
M3 カラーは HCT モデルを中心に構築されており、調和のとれたアクセスしやすいカラーパターンを導き出し、ダイナミック カラー機能を支援します。M3 カラーシステムはソースカラーから始まります。このソースカラーは、プライマリ、セカンダリ、ターシャリ、ニュートラル、ニュートラル バリアントの 5 つのキーカラーに変換されます。これら 5 つの主要なカラーは、各キーカラーの色調の増分で構成される色調パレットを作成します。
キーカラーを手動で割り当てる場合は、入力の彩度とトーンに注意してください。色のトーンはカラーロールの色調値とは異なる場合があります。
M3 カラーシステムは、Material Color Utilities（MCU）を利用しています。これは、アプリのカラーテーマやパターンの開発を容易にするアルゴリズムとユーティリティを含むカラー ライブラリのセットです。
カラーパターンの導出方法については、次の動画をご覧ください。
色の制限
色の制限とは、色の物理的制限です。たとえば、実際の物理学的な制限や、人間の生物学的な視覚的制限、画面上の色表現の制限などです。たとえば、一部の色相は、特定の彩度や色調では存在できません。色の制限があるため、ライトブルーやブライト ライトレッドなどの色は使用できない場合があります。トーンカラー マッピングは、すべての色相値で一貫している必要があります。
上の図は、H105、H25、H285 の色相値の 3 つの異なるトーン マッピング チャートを示しています。
グラフ 1 - hue 105（黄色）。色が選択可能であることを示します。彩度とトーンはグラフのように機能します。黄色の色調は、グラフに沿って特定の色調で彩度が制限されますが、黄色は低い色調の彩度が広くありません。
グラフ 2 - 色相 25（赤）。色相 105（黄色）よりも多くの色調オプションを表示します。このトーンマップで、彩度が最も高いポイントは低いトーンレベルにあります。
グラフ 3 - hue 285（青）。より暗い色調で、色彩性が最大となることを示します。その一方で、明るい色調では色収量が失われます。
カラーパターン
カラーパターンは、特定のトーンから派生したアクセントとサーフェスのセットであり、カラーロールに割り当てられます。これらは UI 要素やコンポーネントにマッピングされます。カラーロールは、色の色相ではなく色の使用を表します。たとえば、Blue ではなく on-primary などです。
カラーパターンは、調和を保ち、テキストにアクセスできるようにし、UI 要素やサーフェスを区別するように設計されています。色のロールペア（コンテナのロールとコンテナ上のロールで構成される）には、アクセス可能なコントラストを実現する色調値があります。
ライトとダークのスキームが作成され、固有のトーン割り当てが設定されています。
マテリアル カラーシステムとカスタム スキームは、カスタマイズの出発点として色のデフォルト値を提供します。
詳しくは、M3 カラーシステムをご覧ください。
カスタマイズ可能なカラーパターンについては、Android UI Kit をご覧ください。
UI に色を適用する
UI カラーは、アクセント カラー、セマンティック カラー、サーフェス カラーで構成されます。
- アクセント カラーとは、通常は Android ブランドのカラーパレットに含まれるコアカラーを指します。
- セマンティック カラー（またはマテリアル 3 のカスタムカラー）は、特定の意味を持つ色です。
- サーフェスの色とは、背景色に使用されるニュートラルな派生色を指します。
アクセント カラー
アクセント カラーは通常、ブランディング、ハイライト アクション、個人の表現、ユーザーの表現など、UI で最も表現力を発揮します。
各アクセント カラー（プライマリ、セカンダリ、ターシャリ）は、ペア設定、強調の定義、視覚表現のために、互換性のある 4 ～ 8 色のグループで提供されます。
ダイナミック カラー
アクセント カラーは動的ソースから定義できます。
Android 12（API レベル 31）以降、ダイナミック カラーを使用すると、システムはユーザーの壁紙やアプリ内コンテンツ（キーアート アセットなど）からソースカラーを抽出できます。ダイナミック カラーでは、MCU のアルゴリズムとプロセスを使用してスキームを作成し、わずかな労力で実装できます。アプリにダイナミック カラーを適用する方法については、ユーザーがアプリのカラー エクスペリエンスをカスタマイズできるようにするをご覧ください。
ダイナミック カラーの実例を確認するには、ダイナミック カラーの可視化の Codelab をお試しください。
静的
静的スキームとは、不変（または相対的に）値を持つスキームです。静的パターンを作成する一般的な方法は、ブランドカラーを使用して、プライマリ カラー、セカンダリ カラー、ターシャリ カラーをブランドのメインのカラーパレットに合わせることです。
ダイナミック カラーを使用している場合でも、ユーザーのデバイスでダイナミック カラーを使用できない場合は、代わりに静的スキームを作成することを強くおすすめします。それ以外の場合、ベースラインの紫色のパターンが使用されます。
マテリアル テーマビルダーを使用すると、MCU カラー アルゴリズムを適用して静的なカスタムテーマを生成できます。その結果、選択された色は、M3 カラーシステム トークンと調和のとれたユーザー補助の原則に沿ったものになります。
完全にカスタマイズされた静的スキームを作成することも可能です。そのためには、カラースタイル（color.kt または color.xml）内で異なる値を割り当てるか、Figma スタイル プロパティを更新して、Figma 用のマテリアル テーマビルダーからテーマファイルをエクスポートします。
使用方法
マテリアル コンポーネントにはあらかじめカラーロールが割り当てられていますが、UI およびカスタム要素全体でカラートークンを使用できます。人間の目は特に鮮やかな色に引き付けられることを考慮し、すべてのアクセント カラーを慎重に使用してください。
タイプと同様に、色は階層に適用され、プライマリ カラーとその役割は重要な行動を促すフレーズ（CTA）に割り当てられています。フローティング アクション ボタン（FAB）などのコンポーネントをメインの役割にすることをおすすめします。
プライマリ カラーを選択する場合は、ブランドのプライマリ カラーを割り当てることをおすすめします。また、インタラクティブ コンポーネントを表す色を選択して、ブランドカラーの使用を抑えることもできます。セカンダリ カラーとターシャリ カラーは、ハイライトの階層の下位へと進みます。
外観の彩度が高すぎると、プライマリ、セカンダリ、ターシャリの基本カラーロールのみが使用されることがあります。カラー階層を改善するには、カラーパターンを適用して、鮮やかなコンテナカラーと枠線のロールを含めます。
ユーザー エクスペリエンスを向上させるには、アプリの視覚的階層内でアクションを際立たせるために、鮮やかなプライマリ カラーを使用します。次の図では、最初の画像の FAB は、ナビゲーションと同じ色調と彩度でミュートされた色で、調和しています。2 つ目の画像は、鮮やかなプライマリ カラーでより多くの注目を集める FAB を示しています。
ダイナミック カラーの実践方法については、マテリアル カラーのカスタマイズの Codelab をお試しください。
セマンティック カラー
セマンティック カラーは、特定の意味が割り当てられている色です。たとえば、エラーはセマンティック カラーです。
色の意味に一貫性を持たせます。パターンを確立する場合は、アプリ全体でそれを繰り返します。たとえば、メンバーシップ機能を示すために紫色を設定している場合は、このメンバーシップ機能のすべてのインスタンスで紫色を使用します。
次の例では、アプリは 1 つのテキスト フィールドでエラーを示すために赤色を使用しており、もう 1 つのテキスト フィールドには紫色を使用しています。そのため、フォームに目を通すときに混乱が生じます。
マテリアル カラーパターンではセマンティック エラーカラーが用意されていますが、カラーパターンを拡張するために、カスタムカラーを使用して追加のセマンティック カラーを作成します。詳しくは、カスタムカラーをご覧ください。
調和により、ユーザーが生成した動的な色をアプリ内のカスタムカラーに合わせて、調和のとれたカラーパレットを作成できます。
サーフェスの色
サーフェスの色は、コンポーネント コンテナ、シート、ペインなどの背景要素用に設計され、アプリの色の大部分を表します。サーフェス スペースを広く使用してもかまいません。人間の目にはリラックスできる空間が必要です。また、サーフェスはコンテンツを含み、読み手を誘導するのに役立ちます。
M3 では、色調サーフェスのコンセプトが導入されました。つまり、すべての色が色調パレットから取得されます。トーンは奥行きとコントラストの両方を生み出し、ユーザー補助を実現します。サーフェス ロールの詳細については、サーフェス ロールの M3 のガイダンスをご覧ください。
ユーザー補助と色
色については、視力に応じてさまざまな方法で見えます。色覚異常のリーダーもあるため、UI 要素が混在しないように色の組み合わせを確認する必要があります。不透明度と太さは色の文字の色調ではないかもしれませんが、ユーザーが色を感知する方法に強力な視覚効果をもたらします。
色のコントラストは、フォアグラウンド要素とバックグラウンド要素の輝度差で、比率で表されます。この比率の基準にはグレードが与えられます。たとえば、ボタン上のテキストとそのコンテナのコントラストを測定することで、テキストの読みやすさを判断できます。色のコントラストに関するガイドラインはテキストと非テキストに分かれており、それぞれに独自の評価があります。詳しくは、アクセシビリティの高い色でデザインするをご覧ください。
色を、実行可能なアクションの唯一のアフォーダンスまたはインジケーターにしないでください。コンポーネント ボタン、フォントの太さの変更、アイコンを利用して、要素を操作できることをユーザーに通知します。
色を実装する
トークンは、設計データの小さな変数セマンティック表現です。これらは繰り返し可能で、色の 16 進数コードなどの静的な値をわかりやすい名前に置き換えます。要素の色の役割を割り当てるには、色の値をハードコードする代わりにトークンを使用します。
カラーロール マッピングの例については、Now in Android Figma サンプルをご覧ください。
色の値は、Compose（または View を使用する color.xml）を使用してカラーファイル color.kt 内で設定します。スタイルとして設定された色はテーマの一部です。詳しくは、Android モバイルテーマ用にデザインするをご覧ください。
Android で色の値を設定するには、RGB を 6 桁の形式で表す 16 進数コードを使用します。不透明度をキャプチャするには、先頭に値を追加して 8 桁のコードを作成します。
マテリアル テーマビルダーを使用する場合:
Material Theme Builder（MTB）を使用して、カスタマイズされたライトとダークのカラーパターンを作成できます。
MTB では、ダイナミック カラーの可視化、マテリアル デザイン トークンの生成、カラーパターンのカスタマイズを行うことができます。
カラーパターンは、Figma インスペクタ パネル内のスタイル プロパティを更新することで完全にカスタマイズできます。変更された値がエクスポートされます。
