Googleマテリアルデザイン④（色）

カラーシステム

色の使用方法とパレット

マテリアルデザインのカラーシステムは、意味のある方法でUIに色を適用するのに役立ちます。このシステムでは、ブランドを表すプライマリカラーとセカンダリカラーを選択します。次に、各色の暗いバリエーションと明るいバリエーションをさまざまな方法でUIに適用できます。

1. プライマリーカラー
2. セカンダリーカラー
3. 明るいバリエーションと暗いバリエーション

これらの色はすべて、アプリに合わせてカスタマイズできます。

カラーテーマの作成

プライマリーカラー

アプリケーションの画面や部品間で最も頻繁に表示される色です。

システムバーのトップアプリバーなど、UI要素間にコントラストを作成するには、原色の明るいバリエーションまたは暗いバリエーションを使用できます。これらを使用して、フローティングアクションボタンのアイコンや円形のコンテナなど、コンポーネント内の要素を区別することもできます。

セカンダリーカラー

アクセントとあなたの製品を区別。セカンダリカラーの使用はオプションであり、UIの選択した部分にアクセントを付けるために慎重に適用する必要があります。

• フローティングアクションボタン
• スライダーやスイッチなどの選択コントロール
• 選択したテキストを強調表示する
• プログレスバー
• リンクと見出し

サーフェス、背景、エラーの色

表面、背景、エラーの色は通常、ブランドを表していません。

• サーフェスの色→ カード、シート、メニューなどのコンポーネントの表面
• 背景色→ スクロール可能なコンテンツの後ろに表示される
• エラーの色→ テキストフィールドの無効なテキストなど、コンポーネントのエラーを示す。

背景とサーフェスの基準色は#FFFFFFです。エラーの色の基準色は＃B00020です。

※背景のバックレイヤーはプライマリーカラーで、フロントレイヤーが白

タイポグラフィと図像の色

「on」の色

このカテゴリの色は「on」カラーと呼ばれ、プライマリーカラー、セカンダリーカラー、サーフェスカラー、背景色、またはエラーカラーを使用するサーフェスの"on"時に表示される要素に色を付けることを意味します。

「on」カラーのデフォルト値は#FFFFFFと＃000000です。

アクセシブルな色

アクセス可能な背景を表現するために、プライマリカラーとセカンダリカラーの明るいバリエーションまたは暗いバリエーションを背景やタイポグラフィに使用できます。

代替色

マテリアルデザインのカラーシステムは、ブランドのプライマリカラーとセカンダリカラーの代替として使用される代替カラーをサポートしています（これらはテーマの追加カラーを構成します）。

代替色は次の場合に最適です。

• 明るいテーマと暗いテーマのアプリ
• さまざまなセクションでさまざまなテーマを持つアプリ
• 製品スイートの一部であるアプリ

代替色は、既存の色テーマと一緒に実装するのが難しい場合があるため、慎重に使用する必要があります。

要素の可視性とテキストの読みやすさを維持するために、暗いテーマと明るいテーマに異なる配色を適用できます。

データ視覚化のための追加の色

アプリは追加の色を使用して、メインの色のテーマ外のカテゴリを伝えることができます。

色を選ぶためのツール

マテリアルパレットジェネレータを使用して、入力した任意の色のパレットを生成できます。色相、彩度、明度は、使用可能で見た目に美しいパレットを作成するアルゴリズムによって調整されます。

UIに色を適用する

原則

• 一貫性
• 明確
• 意図的

上部と下部のアプリバー

上部と下部のアプリバーに色を適用する方法は、ユーザーがそれらを識別し、周囲の要素との関係を理解するのに役立ちます。

アプリバーと他のサーフェスの違いを強調するには、フローティングアクションボタン（FAB）など、アプリバーの近くのコンポーネントにセカンダリーカラーを使用します。

下部のアプリバーとフローティングアクションボタンが同じ色の場合は、シャドウまたは代替手段を使用して、それらを十分に区別します。

背景

背景には前面と背面のレイヤーがあります。これらの2つのレイヤーを区別するために、バックレイヤーの色がプライマリーカラーで、フロントレイヤーが白です。

シートとサーフェス

下部シート、ナビゲーションドロワー、メニュー、ダイアログ、カードなどのシートとサーフェスの基準カラーは白です。

これらのコンポーネントは、他の表面間のコントラストを作成するために色を組み込むことができます。

モーダルシート

ナビゲーションドロワーやボトムシートなど、一時的に画面に表示される表面には対照的な色を使用します。通常、これらのサーフェスは白ですが、アプリのプライマリカラーまたはセカンダリカラーを使用できます。

カード

カードのベースラインカラーは白です。この色は、ブランドを表現したり、読みやすさを向上させるためにカスタマイズできます。カードのテキストとアイコンは、読みやすさを向上させるためにカラーテーマを使用することもできます。

ボタン・チップ・選択コントロール

ボタン、チップ、選択コントロールは、プライマリカラーまたはセカンダリカラーを適用することで強調できます。

ボタン、テキストボタン、輪郭のあるボタン

基準色はプライマリカラーです。

フローティングアクションボタンや選択コントロール

フローティングアクションボタンと拡張フローティングアクションボタン、選択コントロールの基準色は、セカンダリカラーです。

タイポグラフィと図像

色は、テキストの重要性が他のテキストに比べて大きいか小さいかを表すことができます。また、色を使用すると、画像や背景の上に配置したときにテキストが読みやすくなり、前のテキストが読みにくくなる可能性があります。

見出しとタブ

タブや見出しなどの重要なテキストでは、プライマリカラーまたはセカンダリカラーを使用できます。

リンクにアクセントを付けるために、プライマリカラーまたはセカンダリカラーを使用できます。

アイコン

アイコンは、アクションを識別し、情報を提供するのに役立ちます。それらの色は、読みやすく識別しやすいように、背景と対比する必要があります。

色の使い方

階層

色は画面上の特定の要素に注意を向けます。要素の色が周囲と対照的である場合、その要素は目立つので、ユーザーはそれが重要であると言うことができます。

重要なイベントに注意を向けるには、要素間でより強い色のコントラストを使用します。

色と形

色と形の両方を同時に変化させる要素に視覚的な強調が与えられます。この種の強調を使用して、何かが選択されているか、すぐに注意を引くことができます。

色の制限

アプリでの色の使用を制限することで、テキスト、画像、ボタンなどの個々の要素など、色のある要素がより注目を集めます。

グレースケールのカラーパレットは、写真やテキストを目立たせるのに最適です。

ブランド

ブランドカラーは、存在感を強調し、重要なタイミングでブランドカラーを特定のアクションや情報に関連付けることができます。

起動画面

起動画面は大胆な色使いで嬉しい瞬間を表現できます。

選択中

選択中の要素に使用される色は、コンテンツをブランディングすることができます。

機能の発見

新しい機能を色で強調し、ユーザーの視点をガイドすることにより、ユーザーがそれらを確実に気付くことができます。

プレースホルダー、インジケーター

画面コンテンツの読み込み中は、プレースホルダーUIが表示されます。

プレースホルダーや進行状況インジケーターにブランドカラーをを含めることでアプリを使用していることが保証されます。

状態変化

状態の変化は、ブランドの存在感を強化する可能性があります。

意味

色は、さまざまなUI要素の意味を伝えることができます。たとえば、天気アプリは現在の気象条件を示す色を表示し、ナビゲーションアプリは交通状況を示す色を表示し、道路は赤または緑に色分けされます。

状態

• ボタンが有効か無効かなど、要素またはコンポーネントの現在の状態
• アプリ、コンポーネント、または要素の状態の変化

微妙な色を使用する場合は、インタラクティブな領域と状態の変化を識別可能で、簡単に確認できるようにしてください。

アイコンを表示したり、要素の場所を移動したりするなど、複数の方法で状態の変化を示すのが最善です。

テキストの読みやすさ

テキストの背景

明るい背景には黒のテキストを使用し、暗い背景には白のテキストを使用することをお勧めします。

色付きの背景やタイポグラフィは、テキストの不透明度やテキストのさまざまな状態に関するルールをさらに変更します。

テキストの不透明度の使用

色付きの背景の上に灰色のテキストとアイコンを使用する代わりに、不透明度を下げて白または黒のテキストを表示することで、コントラストを向上させます。

次の手順でテキストの色を計算することもできます。

• 緑の背景の前に不透明度を下げて黒を配置します
• 結果として得られる濃い緑色の16進値を特定します
• その色の16進値をテキストに使用します

選択したテキスト

ブランドを反映するために、テキストの選択では、プライマリカラーまたはセカンダリカラーのアクセントを使用できます。

アイコンおよびその他の記号

アイコンやその他の要素は、WCAGの読みやすさの基準を満たす必要はありませんが、機能を示したり情報を伝達したりするために、できるだけ表示できるようにする必要があります。

• アクティブなアイコンの不透明度は87％です
• 非アクティブなアイコンの不透明度は60％です
• 無効にされたアイコンの不透明度は38％です

暗いテーマ

原則

• 灰色で暗くする
• アクセントのある色
• エネルギーを節約
• アクセシビリティを強化

プロパティ

推奨されるダークテーマのサーフェスの色は＃121212です。

コントラスト

暗い表面と100％白い本文のコントラストレベルは少なくとも15.8：1です。

深さ

標高のレベルが高くなると、コンポーネントはより明るい表面色を表示することで深さを表現します

彩度の低下

プライマリーカラーは彩度が低くなっているため、すべての標高レベルで少なくとも4.5：1のWebコンテンツアクセシビリティガイドライン（WCAG）AA標準（本文テキストで使用する場合）に合格します。

限られた色

大きな表面は暗い表面色を使用し、色のアクセントは限定します。（明るい、彩度の低い色と明るい、飽和した色）

明るい色調（200〜50の範囲の色）は、暗いテーマの表面（すべての高さ）で読みやすくなります。

プライマリーカラー

原色は、アプリの画面とコンポーネント全体で最も頻繁に表示される色です。ベースラインのマテリアルデザインダークテーマは、原色の200トーンを使用します。

セカンダリーカラー

暗いテーマでは、4.5：1のコントラストレベルを満たすために二次色の彩度を下げることができます。

エラーカラー

エラーの色は、エラーの状態を示すために使用されます。マテリアルベースラインダークテーマエラーの色は＃CF6679です。