Material Designの色彩システム完全ガイド｜配色の役割・動的配色・実装方法

Material Designの色彩システムは、見た目を美しく整えるためだけの配色規則ではありません。操作の優先順位、情報の階層、選択状態、警告、ブランドらしさなどを、利用者が短時間で理解できるようにする設計の仕組みです。色を単なる装飾として決めるのではなく、「どの場所で、どの目的のために使う色なのか」という役割から考える点に大きな特徴があります。

現在のMaterial Design 3では、一つの元色から複数の色調を生成し、それぞれを画面上の役割へ割り当てます。さらに、明るい主題と暗い主題、利用者の壁紙から生成される動的配色、読みやすさを確保する前景色と背景色の組み合わせなどを、一つの色彩体系として扱います。公式ガイドでも、色彩設計は階層、状態、ブランド、個人化を伝える仕組みとして位置付けられています。

本記事では、Material Designの色彩システムを15章に分けて解説します。色名や色コードを暗記するのではなく、役割、組み合わせ、部品への適用、実装、検証、運用という流れを理解することで、画面数が増えても一貫性を維持できる配色設計を目指します。

1. Material Designの色彩システムとは

Material Designの色彩システムとは、色を画面上の用途ごとに分類し、背景、文字、アイコン、ボタン、選択状態などへ一貫して割り当てる仕組みです。色コードを部品へ直接指定する方法とは異なり、色の値と利用目的を分離することで、主題の切り替えやブランド変更にも対応しやすくなります。

1.1 色を役割で管理する仕組み

Material Designでは、「青色だからボタンに使う」という考え方ではなく、「主要な操作を示す色だから、この役割を割り当てる」という順序で設計します。同じ色相でも、強調、容器、文字、境界線などの用途によって明るさや彩度が異なるため、目的に合わせた色を選択する必要があります。

役割による管理を採用すると、デザイナーと開発者の会話も明確になります。「この部分を少し濃い青にする」ではなく、「主要容器色を使用する」と伝えられるため、画面ごとの判断差が減り、仕様書や部品ライブラリも整理しやすくなります。

1.2 色の値と利用目的を分離する理由

色の値を画面へ直接記述すると、ブランドカラーの変更時に多数のファイルを修正しなければなりません。また、同じ意味を持つ操作に似ているが異なる色が使われ、製品全体の統一感が崩れる可能性があります。

利用目的を示す名前を経由して色を適用すれば、色彩体系の定義を変更するだけで、関連する部品へ変更を反映できます。この分離は、明るい主題、暗い主題、高コントラスト表示など、複数の表示条件を管理する場合に特に重要です。

1.3 色彩システムが情報階層へ与える影響

利用者は、文章をすべて読む前に、色、位置、大きさ、余白から画面の構造を判断します。強い色が使われたボタンは重要な操作として認識され、控えめな表面色に置かれた情報は補助的な内容として理解されやすくなります。

ただし、すべての要素を鮮やかな色にすると、どれが重要なのか判断できなくなります。強調色を限定し、背景色と容器色の差を穏やかに設定することで、重要な操作だけを自然に目立たせることができます。

1.4 色彩システムと部品設計の関係

ボタン、カード、入力欄、通知、ナビゲーションなどの部品には、それぞれ推奨される色の役割があります。部品ごとに独自の色を作るのではなく、共通の役割を組み合わせることで、異なる画面でも同じ操作方法を予測しやすくなります。

部品の外観を変更するときも、部品内部の色コードを直接修正するのではなく、割り当てる役割を見直します。この考え方により、標準部品と独自部品を同じ配色規則の中で管理できます。

1.5 Material Design 3における色の位置付け

Material Design 3の主題は、色彩、文字、形状という複数の体系で構成されます。Jetpack Composeでは、これらを主題設定へ渡すことで、標準部品へ一括して反映できます。

色彩体系だけを整えても、文字の大きさや形状が無秩序であれば、製品全体の一貫性は得られません。色は独立した装飾要素ではなく、文字、形状、余白、動きと連携して情報の意味を伝えるものとして設計します。

実装例

@Composable fun AppTheme(content: @Composable () -> Unit) {    MaterialTheme(        colorScheme = appLightColorScheme,        typography = appTypography,        shapes = appShapes,        content = content    ) }

2. 色の役割と視覚的な階層

色の役割は、画面内での重要度と利用目的を表します。Material Designでは、背景と内容に対応する色を組み合わせ、読みやすさと一貫性を保ちます。公式ガイドでも、意図された組み合わせと重なり順を守ることが、適切な視覚的コントラストにつながると説明されています。

2.1 主要な操作を示す色

主要な色は、購入、保存、送信、開始など、画面内で最も重要な操作に使用します。利用者の注意を集めやすいため、塗りつぶしボタン、選択中の項目、重要なアイコンなどへ限定して割り当てます。

同じ画面に主要色の要素を多数配置すると、優先順位が失われます。一つの画面または一つの操作領域につき、最も重要な行動を明確にし、それ以外は補助的な色や輪郭で表現します。

2.2 補助的な操作を示す色

補助色は、主要操作ほど強く目立たせる必要はないものの、通常の背景要素とは区別したい機能に適しています。絞り込み、表示切り替え、補助ボタン、選択候補などへ利用できます。

補助色は主要色との調和を保ちながら、役割の違いが分かる程度の差を持たせます。色相を大きく変える方法だけでなく、明度や彩度を抑え、主要操作よりも視覚的な重みを小さくする方法も有効です。

2.3 背景と表面の階層

画面全体の背景と、その上に配置されるカードや一覧領域を同じ色にすると、情報のまとまりが見えにくくなります。一方で、差を強くしすぎると画面が細かく分断され、情報量が実際より多く感じられます。

背景と表面の差は、わずかな色調差から設計することが重要です。境界線や影だけに頼らず、表面色の段階を使うことで、暗い主題でも自然な階層を表現できます。

2.4 文字とアイコンの色

文字やアイコンには、それらが置かれる背景に対応した内容色を使用します。主要色の背景には主要色用の内容色、容器色の背景には容器用の内容色を組み合わせることで、意図した読みやすさを維持できます。

文字を目立たせたいからといって、常に純粋な黒や白を使う必要はありません。主題に合わせて調整された内容色を使えば、十分なコントラストを確保しつつ、画面全体の色調を統一できます。

2.5 強調度を段階的に設計する方法

強調度は、強い色と弱い色の二段階だけで考えないことが重要です。主要操作、選択状態、補助操作、通常情報、無効状態など、複数の段階を定義すると、複雑な画面でも優先順位を伝えやすくなります。

強調度を決める際は、色だけでなく、塗りつぶし、輪郭、文字の太さ、余白、配置も組み合わせます。色の差を過度に広げず、複数の視覚要素で階層を支える設計が安定します。

実装例

Button(onClick = onSave) {    Text("保存する") } OutlinedButton(onClick = onPreview) {    Text("確認する") } TextButton(onClick = onCancel) {    Text("キャンセル") }

3. 基調色・補助色・第三色の使い分け

Material Design 3では、基調色、補助色、第三色が異なる強調目的を持ちます。公式のComposeガイドでは、基調色は主要部品、補助色は控えめな部品、第三色は均衡や追加の注意喚起に利用されると説明されています。

3.1 基調色とは

基調色とは、製品を代表し、主要な操作や選択状態に使用される色です。ブランドカラーと完全に同じ値を使用する場合もありますが、文字とのコントラストや暗い主題への対応を考慮し、画面用に調整することがあります。

基調色は製品の印象を強く左右するため、使用場所を明確に制限します。ロゴ、すべての見出し、すべてのカードへ同時に適用するのではなく、操作の中心となる場所へ集中させます。

3.2 補助色とは

補助色とは、基調色を支えながら、二次的な操作や情報分類を表す色です。絞り込み用の小さな部品、選択候補、補助的な表示切り替えなどに使用すると、基調色の重要性を保ちながら表現の幅を広げられます。

補助色は基調色と競合しないように設計します。基調色と同じ強さ、面積、頻度で使用すると、利用者はどちらが重要なのか判断しにくくなるため、彩度や面積を抑える方法が効果的です。

3.3 第三色とは

第三色とは、基調色と補助色だけでは表現しにくい注目点や視覚的な均衡を作るための色です。特別な情報、注目させたい入力領域、統計画面の差別化などに利用できます。

第三色を追加すると配色の自由度は高まりますが、無計画に多用すると画面が散漫になります。使用目的を一つか二つに限定し、状態を示す成功色や警告色とは混同しないことが重要です。

3.4 三つの色を同時に使用する場合

基調色、補助色、第三色を同じ画面で使用する場合は、面積と強調度に差を付けます。基調色を主要操作、補助色を選択候補、第三色を限定的な注目要素へ割り当てれば、役割を区別できます。

三色を均等な面積で配置すると、視線が複数方向へ分散します。最も重要な色を一つ決め、残りの色は小さな容器、アイコン、図表などへ限定することで、安定した構成になります。

3.5 ブランドカラーから三つの色を作る方法

ブランドカラーが一色しかない場合は、その色を元に基調色の色調段階を作成します。その後、近い色相から補助色を作り、対照的な色相から第三色を選ぶと、関連性と変化を両立しやすくなります。

ただし、色相関係だけで決めるのではなく、実際の画面で文字の読みやすさを確認します。ロゴで美しく見える色が、大きなボタンや暗い背景でも適切に機能するとは限りません。

実装例

private val AppLightColors = lightColorScheme(    primary = Color(0xFF345CA8),    onPrimary = Color(0xFFFFFFFF),    secondary = Color(0xFF565E71),    onSecondary = Color(0xFFFFFFFF),    tertiary = Color(0xFF705575),    onTertiary = Color(0xFFFFFFFF) )

4. 明るい主題と暗い主題の設計

Material Designの配色は、単一の色一覧ではなく、明るい主題と暗い主題における役割の関係として設計します。Composeでは、明るい配色と暗い配色を個別に定義し、システム設定に応じて切り替える構成が用意されています。

4.1 明るい主題の特徴

明るい主題では、明るい背景の上に濃い内容色を配置します。広い面積を占める背景や表面には、純白だけでなく、わずかに色味を含む明るい色を使用すると、ブランドらしさと視覚的な柔らかさを加えられます。

基調色を暗めに設定すると、白い文字とのコントラストを確保しやすくなります。ただし、色を暗くしすぎると重い印象になるため、基調容器色などの明るい派生色を併用して画面全体の均衡を取ります。

4.2 暗い主題の特徴

暗い主題では、暗い背景の上に明るい内容色を配置します。単純に明るい主題の色を反転すると、鮮やかな色が発光して見えたり、表面同士の境界が失われたりするため、専用の配色が必要です。

暗い背景では、広い面積へ高彩度色を使うと目が疲れやすくなります。基調色は明るく調整しながら、使用面積を限定し、表面色の段階によって情報のまとまりを表現します。

4.3 主題間で役割を維持する方法

明るい主題と暗い主題で色コードは変わっても、役割は変えません。主要ボタンには常に基調色を使い、基調色の上には対応する内容色を使うことで、利用者は表示設定が変わっても同じ操作体系を理解できます。

主題ごとに部品の役割を変更すると、明るい表示では基調色だった要素が、暗い表示では補助色になるといった不整合が生じます。値だけを切り替え、意味と役割は固定する設計が重要です。

4.4 暗い主題での表面階層

暗い主題では、影が背景へ溶け込みやすいため、明るさの異なる表面色を使って階層を示します。上位の表面をわずかに明るくすることで、カード、メニュー、浮遊要素などの位置関係を理解しやすくします。

表面を明るくしすぎると、カードだけが強く浮いて見えます。背景、低い表面、中程度の表面、高い表面の差を小さく保ち、実機で確認しながら調整します。

4.5 主題切り替え時に確認すべき項目

主題切り替えでは、本文だけでなく、アイコン、境界線、入力欄、画像の上の文字、読み込み表示、無効状態まで確認します。通常状態では読めても、押下状態や選択状態でコントラストが不足する場合があります。

さらに、端末の明るさを下げた状態や屋外の明るい環境も想定します。設計画面だけで判断せず、複数の実機と表示条件で確認することで、主題切り替えの品質を高められます。

実装例

@Composable fun AppTheme(    darkTheme: Boolean = isSystemInDarkTheme(),    content: @Composable () -> Unit ) {    val colors = if (darkTheme) {        AppDarkColors    } else {        AppLightColors    }    MaterialTheme(        colorScheme = colors,        content = content    ) }

5. 色調パレットと明度段階

色調パレットとは、一つの色相を、暗い色から明るい色まで段階的に展開した色の集合です。Material Designでは、元色から複数の色調を作り、それらを明るい主題と暗い主題の各役割へ割り当てます。

5.1 色調とは

色調は、主に色の明るさを段階として表したものです。同じ青系統でも、ほぼ黒に近い青、濃い青、中間の青、淡い青、ほぼ白に近い青を用意することで、背景と内容の組み合わせを柔軟に設計できます。

一つのブランドカラーだけを登録する方法では、暗い主題や容器色に対応できません。複数の色調を用意することで、色相の一貫性を保ちながら、異なる強調度とコントラストを作れます。

5.2 色調段階を作る理由

主要ボタンの背景、選択されたカードの背景、その上の文字に同じ色を使うことはできません。それぞれに必要な明るさが異なるため、基調色の周辺に複数の段階を用意する必要があります。

色調段階を先に作成すると、画面ごとに色を明るくしたり暗くしたりする場当たり的な調整を防げます。設計者が変わっても同じ範囲から色を選べるため、製品全体の統一性も維持できます。

5.3 中間色だけで判断しない方法

ブランドカラーの代表値だけを見て配色を決めると、最も暗い色や最も明るい色で色相が不自然に変化することがあります。パレットを作成したら、すべての段階を横に並べて確認します。

特に、淡い容器色が灰色に寄りすぎていないか、暗い内容色が黒に近づきすぎていないかを確認します。色調の両端までブランドの雰囲気が残っていることが理想です。

5.4 中性色の役割

中性色は、背景、表面、境界線、本文など、画面の大部分に使用されます。鮮やかな基調色より目立ちにくいものの、製品全体の温度感や柔らかさを決める重要な色群です。

完全な無彩色だけでなく、ブランドカラーをわずかに含んだ中性色を使うと、画面全体に統一感が生まれます。ただし、色味を強くしすぎると本文の読みやすさへ影響するため、非常に低い彩度で調整します。

5.5 色調パレットを検証する方法

パレットの検証では、色見本だけでなく、文字、ボタン、カード、入力欄などの実際の部品へ適用します。隣接する色調の差が小さすぎる場合、画面上では同じ色に見える可能性があります。

明るい主題、暗い主題、低輝度、高輝度の条件で確認し、必要に応じて段階間の差を調整します。自動生成されたパレットであっても、製品の利用環境に合わせた視覚確認は欠かせません。

実装例

:root {  --brand-tone-10: #001a41;  --brand-tone-30: #164582;  --brand-tone-40: #345fa0;  --brand-tone-80: #adc7ff;  --brand-tone-90: #d8e2ff;  --brand-tone-100: #ffffff; }

6. 表面色による奥行きと情報整理

表面色は、画面の背景、カード、一覧、メニュー、ダイアログなどの土台に使用されます。Material Design 3では、複数の表面用の色が用意され、影だけに依存せずに情報のまとまりを表現できます。表面用の役割は高さへ固定されるものではなく、包含関係を柔軟に示すためにも利用されます。

6.1 表面色とは

表面色とは、情報や部品が置かれる土台を表す色です。画面全体の背景も表面の一種ですが、カードやメニューなどには異なる段階の表面色を使い、情報領域を区別します。

表面色は大きな面積を占めるため、彩度を抑える必要があります。鮮やかな色を広い背景へ使うと、本文の読みやすさが下がり、主要操作の色も目立ちにくくなります。

6.2 表面の段階を使い分ける方法

表面の段階は、最も低いものから最も高いものまで、複数の明るさで構成できます。背景に近い領域には低い表面色、カードや固定領域には中程度、メニューや強く分離した領域には高い表面色を使用します。

すべてのカードへ同じ表面色を使う必要はありません。情報の包含関係や重要度に応じて段階を変えると、境界線を増やさずに画面構造を伝えられます。

6.3 影と表面色の関係

影は要素が前面にあることを伝えますが、暗い主題や低品質な画面では見えにくい場合があります。表面色の差を併用することで、影が弱い環境でも階層を認識できます。

一方で、色調差と影をどちらも強くすると、要素が必要以上に浮いて見えます。浮遊する必要がある部品では影を使い、単なる情報区分では表面色の差を中心に設計すると自然です。

6.4 入れ子構造での表面色

カードの中に別のカードを重ねるような入れ子構造では、表面色の段階を一つずつ変える方法があります。ただし、階層が深くなりすぎると、利用者が現在位置を理解しにくくなります。

表面色で表せる階層は二段階から三段階程度に抑え、それ以上の構造は余白、見出し、区切り線などで整理します。色だけで複雑な情報構造を表現しようとしないことが重要です。

6.5 表面色を選ぶ実務上の手順

最初に画面全体の背景を決め、その上へ一覧、カード、固定領域、浮遊領域を配置します。その後、隣接する領域を区別する必要がある場所だけ、異なる表面色へ変更します。

最初から多くの段階を使用すると、不要な装飾が増えます。最低限の色数で設計し、情報の境界が分かりにくい場所へ段階を追加する方法が効率的です。

実装例

@Composable fun InformationCard(content: @Composable ColumnScope.() -> Unit) {    Surface(        color = MaterialTheme.colorScheme.surfaceContainer,        shape = MaterialTheme.shapes.large,        tonalElevation = 2.dp    ) {        Column(            modifier = Modifier.padding(16.dp),            content = content        )    } }

7. 容器色と内容色の組み合わせ

Material Designの配色では、背景として使う色と、その上へ置く文字やアイコンの色が対になっています。Composeの色彩体系でも、主要色と主要内容色のように、背景と内容を対応させる仕組みが提供されています。

7.1 容器色とは

容器色とは、ボタン、選択項目、通知領域、分類領域などの背景として使う色です。通常の基調色より淡い色調を使用できるため、比較的広い面積でも強くなりすぎません。

容器色は、強い塗りつぶしと通常表面の中間に位置する表現として便利です。選択中の一覧項目や重要な説明領域など、目立たせたいが主要ボタンほど強調したくない場所に適しています。

7.2 内容色とは

内容色とは、特定の背景色の上に置かれる文字、アイコン、線などの色です。背景が変われば適切な内容色も変わるため、内容色だけを独立して選択してはいけません。

基調色の上には基調色用の内容色、基調容器色の上には基調容器用の内容色を使用します。この対応を守ることで、明るい主題と暗い主題の両方で安定したコントラストを確保しやすくなります。

7.3 色の組み合わせを崩した場合の問題

淡い容器色の上へ白い文字を置くと、文字が読みにくくなる可能性があります。また、濃い基調色の上へ通常の本文色を置くと、色相の関係が不自然になる場合があります。

画面上で一時的に読めていても、端末、明るさ、視力条件が変わると問題が表面化します。定義された背景色と内容色の組み合わせを一単位として扱い、個別に入れ替えないことが重要です。

7.4 独自部品への適用方法

独自部品を作る場合も、既存の背景色と内容色の組み合わせを再利用します。新しい色を追加する前に、基調容器色、補助容器色、第三容器色、表面色で表現できないか確認します。

独自色が必要な場合は、背景色だけでなく、その上へ置く内容色も同時に定義します。明るい主題と暗い主題の両方を用意し、通常、選択、押下、無効の各状態で検証します。

7.5 組み合わせを部品内で自動化する方法

部品の背景色から対応する内容色を取得する仕組みを使えば、手作業による組み合わせミスを減らせます。Composeでは、主題内の背景色に対応する内容色を取得する関数が提供されています。

ただし、主題に登録されていない任意の色を渡した場合は、対応色を判断できません。独自色を多用するよりも、色彩体系へ登録された役割を使用することが安全です。

実装例

@Composable fun RoleBasedLabel(    backgroundColor: Color,    text: String ) {    val contentColor =        MaterialTheme.colorScheme.contentColorFor(backgroundColor)    Surface(        color = backgroundColor,        contentColor = contentColor    ) {        Text(            text = text,            modifier = Modifier.padding(                horizontal = 12.dp,                vertical = 8.dp            )        )    } }

8. 動的配色による個人化

動的配色とは、端末の壁紙やアプリ内の内容から元色を取得し、その利用者に合わせた配色を生成する仕組みです。Androidでは動的配色をAndroid 12以降で利用でき、対応していない環境では独自の明るい配色または暗い配色へ戻す構成が推奨されています。

8.1 動的配色とは

動的配色は、すべての利用者へ同じブランドカラーを表示するのではなく、端末の個人設定をアプリの外観へ反映する考え方です。利用者が選んだ壁紙などを元に色調パレットが作られ、各色の役割へ割り当てられます。

単に壁紙の一色をボタンへ使用するわけではありません。読みやすさや役割の関係を考慮した複数の色が生成され、明るい主題と暗い主題の両方へ適用されます。

8.2 動的配色の利点

最大の利点は、アプリが端末全体の外観と調和し、利用者に親しみやすい体験を提供できることです。複数のアプリが同じ個人化方針へ対応すると、端末全体に一貫した印象が生まれます。

また、開発側で膨大な配色候補を手動作成する必要がありません。ただし、生成結果を無条件に使用するのではなく、ブランド表現や画像との相性を確認する必要があります。

8.3 ブランドカラーとの共存

動的配色を有効にすると、主要操作の色がブランドカラーと異なる場合があります。そのため、ロゴ、商品画像、特定のブランド領域など、固定色を維持すべき場所を事前に決めておきます。

主要操作には動的配色を使い、ブランドを直接示す要素には固定色を使う方法もあります。ただし、同じ画面で複数の強い色彩体系を混在させると統一感が失われるため、固定色の使用範囲を限定します。

8.4 対応していない端末への処理

動的配色を利用できない端末では、あらかじめ定義した明るい配色または暗い配色を使用します。代替配色を簡易版として扱わず、ブランドの基準となる完成した配色として設計することが重要です。

動的配色は追加機能であり、製品の唯一の配色ではありません。未対応環境、設定無効時、試験環境でも品質を維持できるように、固定配色を必ず用意します。

8.5 動的配色の検証方法

壁紙の色によって、生成される配色は大きく変わります。青、赤、緑、黄色、低彩度、高彩度、暗い写真など、複数の条件を用意して画面を確認します。

特に、商品画像、状態色、グラフ、ロゴとの競合を確認します。基調色が変わっても、成功、警告、失敗の意味が失われず、主要操作が識別できることが必要です。

実装例

@Composable fun DynamicAppTheme(    darkTheme: Boolean = isSystemInDarkTheme(),    useDynamicColor: Boolean = true,    content: @Composable () -> Unit ) {    val context = LocalContext.current    val supported =        Build.VERSION.SDK_INT >= Build.VERSION_CODES.S    val colors = when {        useDynamicColor && supported && darkTheme ->            dynamicDarkColorScheme(context)        useDynamicColor && supported ->            dynamicLightColorScheme(context)        darkTheme -> AppDarkColors        else -> AppLightColors    }    MaterialTheme(        colorScheme = colors,        content = content    ) }

9. ブランド配色と固定配色の設計

固定配色は、製品側で定義した元色を使用し、利用者や端末にかかわらず一貫したブランド表現を提供する方法です。Material Designの固定配色では、標準配色を利用する方法と、独自のブランド配色を作る方法があります。

9.1 固定配色とは

固定配色とは、基調色、補助色、第三色、中性色、状態色などを製品側で定義する配色です。利用者の壁紙に左右されないため、金融、医療、企業向け製品など、ブランドの一貫性を重視する場面に適しています。

固定配色であっても、単一の色コードだけを登録するわけではありません。明るい主題と暗い主題、それぞれの背景色、内容色、容器色、境界色を体系的に定義します。

9.2 ブランドカラーを元色にする方法

ブランドガイドに指定された色を元色として、複数の色調を生成します。その後、主要背景として使った場合の内容色や、淡い容器色として使った場合の見え方を確認します。

印刷物用のブランドカラーは、画面上で文字背景として使用することを想定していない場合があります。指定値を絶対視せず、ロゴ用の固定色と操作用の調整色を分ける方法も検討します。

9.3 ブランドらしさを維持する場所

ブランドらしさは、すべての背景をブランドカラーで塗ることではありません。ロゴ、主要操作、選択状態、図形、写真、文字、形状など、複数の要素を組み合わせて表現できます。

基調色の使用面積を抑えても、形状や文字体系が統一されていれば、ブランドの印象は維持できます。色へ過度な責任を持たせず、設計体系全体でブランドを表現します。

9.4 独自色を追加する条件

標準の色役割で意味を表現できない場合は、独自色を追加できます。例えば、交通路線、商品等級、専門的な分析状態など、製品固有の分類を継続して表示する場合です。

独自色を追加するときは、背景色、内容色、容器色、容器上の内容色を一組として定義します。単一の鮮やかな色だけを追加すると、暗い主題や広い背景で使用できなくなります。

9.5 固定配色を更新する方法

ブランド刷新や製品統合によって配色を変更する場合は、色の値だけでなく、役割の割り当ても確認します。旧基調色と新基調色の明るさが異なると、同じ部品へ適用しても強調度が変化するためです。

更新時には、代表画面だけでなく、エラー、空状態、入力中、選択中、無効状態なども確認します。色彩定義を一元管理していれば、値の変更を広範囲へ反映しながら、個別の問題だけを調整できます。

実装例

private val BrandLightColors = lightColorScheme(    primary = Color(0xFF004E92),    onPrimary = Color.White,    primaryContainer = Color(0xFFD5E3FF),    onPrimaryContainer = Color(0xFF001B3C),    secondary = Color(0xFF535F70),    onSecondary = Color.White,    background = Color(0xFFF9F9FF),    onBackground = Color(0xFF191C20) )

10. 状態色と意味を伝える配色

状態色は、成功、注意、警告、失敗、情報など、操作結果やシステム状態を伝えるために使用します。状態色は装飾色ではなく意味を持つため、画面や部品が変わっても同じ意味で使用しなければなりません。

10.1 成功を示す色

成功色は、保存完了、送信成功、認証完了、目標達成など、肯定的な結果を示します。一般的には緑系統が使われますが、色だけで成功を伝えず、完了を示すアイコンと文章を併用します。

成功色を通常の主要操作へ多用すると、完了状態との区別ができなくなります。基調色が緑の場合は、成功状態に別の色調、形状、記号を組み合わせ、意味の違いを明確にします。

10.2 注意を示す色

注意色は、直ちに失敗ではないものの、利用者が内容を確認すべき状態に使います。入力内容の確認、期限の接近、利用条件の変更など、次の操作を慎重に行う必要がある場面に適しています。

注意をすべて強い警告色で表示すると、利用者が疲れ、重要な警告を無視する可能性があります。背景を淡くし、見出しやアイコンだけを強くすることで、緊急度を調整します。

10.3 失敗を示す色

失敗色は、入力エラー、通信失敗、削除確認、利用不能など、問題が発生した状態に使用します。Material Designの色彩体系では、失敗用の背景色と内容色が用意され、通常の基調色とは分けて管理できます。

失敗色は問題箇所へ限定して使用します。画面全体を強い赤で覆うよりも、該当入力欄、説明文、アイコン、再試行ボタンをまとめて示す方が、利用者は修正方法を理解しやすくなります。

10.4 情報を示す色

情報色は、補足説明、新機能、処理中の案内など、成功や失敗に分類されない通知へ使用します。基調色や補助色を情報表示へ利用する場合もありますが、主要操作と混同しない強調度に調整します。

情報通知が多い製品では、すべてを鮮やかな色で表示すると本文より目立ってしまいます。背景は淡い容器色、内容は読みやすい濃色とし、閉じる操作や詳細への導線を明確にします。

10.5 色以外の手掛かりを併用する理由

色覚特性や表示環境によっては、赤と緑などの違いを識別しにくい場合があります。そのため、状態を色だけで区別せず、アイコン、文章、形状、位置、模様などを併用します。

入力エラーであれば、枠線を赤くするだけでなく、エラーアイコンと具体的な修正文章を表示します。状態を複数の方法で伝えることで、アクセシビリティと操作性の両方を高められます。

実装例

enum class NoticeType {    SUCCESS,    WARNING,    ERROR,    INFORMATION } data class NoticeColors(    val container: Color,    val content: Color ) @Composable fun noticeColors(type: NoticeType): NoticeColors =    when (type) {        NoticeType.SUCCESS ->            NoticeColors(Color(0xFFD7F5DD), Color(0xFF0C521F))        NoticeType.WARNING ->            NoticeColors(Color(0xFFFFE8C2), Color(0xFF5D3A00))        NoticeType.ERROR ->            NoticeColors(                MaterialTheme.colorScheme.errorContainer,                MaterialTheme.colorScheme.onErrorContainer            )        NoticeType.INFORMATION ->            NoticeColors(                MaterialTheme.colorScheme.secondaryContainer,                MaterialTheme.colorScheme.onSecondaryContainer            )    }

11. アクセシビリティとコントラスト

色彩設計では、美しさだけでなく、文字、アイコン、境界、操作状態を認識できることが必要です。Androidのアクセシビリティ指針では、小さな文字には原則として4.5対1以上、大きな文字には3対1以上のコントラストが推奨されています。

11.1 コントラスト比とは

コントラスト比は、前景色と背景色の明るさの差を数値で表したものです。数値が高いほど差が大きくなり、一般的には文字やアイコンを認識しやすくなります。

ただし、数値が高ければ常に優れた画面になるわけではありません。広い背景に純黒と純白を組み合わせると刺激が強くなるため、必要な読みやすさを確保しながら主題に合った内容色を選びます。

11.2 文字サイズによる基準の違い

小さな文字や細い文字は形を認識しにくいため、より高いコントラストが必要です。大きな文字や太い文字は形を認識しやすく、一定条件ではやや低い比率でも読み取れます。

実際の検証では、文字サイズだけでなく、太さ、書体、行間、背景画像、端末の解像度も確認します。数値基準を満たしていても、細い書体や複雑な背景では読みづらい場合があります。

11.3 非文字要素のコントラスト

入力欄の枠線、選択状態、重要なアイコンなど、操作に必要な非文字要素にも十分な差が必要です。Material Designの指針では、一部の非文字要素について周囲の背景との3対1の差が示されています。

装飾的な線や影まで同じ強さにする必要はありません。しかし、操作可能な領域、現在位置、選択状態を伝える要素は、低い明るさや屋外環境でも識別できるように設計します。

11.4 色覚特性への対応

赤と緑、青と紫など、特定の組み合わせは利用者によって識別しにくい場合があります。成功と失敗を色だけで分ける設計は避け、記号、文章、配置を組み合わせます。

図表でも同様に、線の種類、点の形、直接表示する名称などを併用します。凡例の色だけを見なければ内容を理解できない構成は避け、白黒表示でも関係を読み取れる状態を目指します。

11.5 自動検査と目視確認

Android Studioの画面検査機能やアクセシビリティ検査アプリを使うと、低コントラストなどの問題を発見できます。公式の検査ガイドでも、画面検査機能による低コントラストの確認や、色覚特性を想定した表示確認が案内されています。

自動検査だけでは、強調度の不整合や状態の分かりにくさまでは完全に判断できません。設計者、開発者、試験担当者による目視確認と、可能であれば実際の利用者による評価を組み合わせます。

実装例

fun contrastRatio(    foreground: Color,    background: Color ): Double {    val lighter = maxOf(        foreground.luminance(),        background.luminance()    )    val darker = minOf(        foreground.luminance(),        background.luminance()    )    return (lighter + 0.05) / (darker + 0.05) }

12. 部品ごとの配色方法

Material Designの標準部品は、重要度や状態に合わせた色の組み合わせを持っています。例えばボタンには、塗りつぶし、淡い塗りつぶし、輪郭、文字のみなど複数の表現があり、操作の優先順位に応じて使い分けます。

12.1 ボタンの配色

最も重要な操作には、基調色を背景とした塗りつぶしボタンを使用します。二次的な操作には、淡い容器色、輪郭、文字だけの表現を使用し、主要操作よりも視覚的な重みを抑えます。

同じ画面に複数の塗りつぶしボタンを配置すると、どの操作を選ぶべきか分かりにくくなります。確定操作を一つに絞り、戻る、詳細、キャンセルなどは弱い表現へ変更します。

12.2 カードの配色

カードは、通常表面、異なる段階の表面、輪郭線などを使って背景から分離します。すべてのカードへ基調容器色を使うと、選択状態や重要カードを区別できなくなるため注意が必要です。

通常カードは中性色の表面とし、選択中のカードだけ基調容器色へ変更すると、状態が分かりやすくなります。選択状態には、色だけでなくチェック記号や枠線も併用します。

12.3 入力欄の配色

入力欄では、通常、入力中、入力済み、無効、エラーの状態を区別します。入力中は基調色の枠線やラベルを使用し、エラー時は失敗色と具体的な説明文を表示します。

入力欄の背景と画面背景が近すぎる場合は、輪郭線または異なる表面色で入力領域を示します。ただし、常に強い枠線を使うと画面が騒がしくなるため、現在操作している項目だけを強調します。

12.4 ナビゲーションの配色

ナビゲーションでは、現在選択されている項目と未選択項目を明確に区別します。選択項目へ基調色または基調容器色を使い、未選択項目は標準内容色または低強調の内容色にします。

色だけで現在位置を示すのではなく、背景形状、アイコン、文字の太さなどを組み合わせます。利用者が一目で現在の画面を理解できることが重要です。

12.5 通知とダイアログの配色

通知は、状態の種類と緊急度に合わせて配色します。通常の情報通知には控えめな容器色を使い、重大な失敗や削除確認では失敗色を限定的に使用します。

ダイアログ全体を強い警告色で塗る必要はありません。表面色を土台にし、見出し、アイコン、決定ボタンなど、判断に必要な要素へ状態色を適用する方が読みやすくなります。

実装例

Button(    onClick = onSubmit,    colors = ButtonDefaults.buttonColors(        containerColor = MaterialTheme.colorScheme.primary,        contentColor = MaterialTheme.colorScheme.onPrimary    ) ) {    Text("申し込む") } Card(    colors = CardDefaults.cardColors(        containerColor =            MaterialTheme.colorScheme.surfaceContainer    ) ) {    Text(        text = "カード内容",        modifier = Modifier.padding(16.dp)    ) }

13. デザイントークンによる色の管理

デザイントークンとは、色、文字、寸法などの値を、利用目的を示す名前で管理する仕組みです。Material Designの公式ガイドでも、直接記述した値ではなく、用途や場所を表す名前を持つトークンの利用が推奨されています。

13.1 デザイントークンとは

デザイントークンは、設計上の決定を再利用可能なデータとして表したものです。色コードそのものではなく、「主要背景」「主要内容」「表面容器」などの意味を持つ名前を通して値を参照します。

トークンを使えば、設計資料、ウェブ、Android、iOSなどで同じ役割名を共有できます。実装言語が異なっても、どの目的の色を使用しているかを一致させられます。

13.2 元となる色と役割色の違い

元となる色は、色調パレット内の具体的な値です。役割色は、その値を主要背景、補助容器、通常内容などの用途へ割り当てたものです。

画面上では、元となる色を直接使用せず、役割色を参照します。この二段階構造により、役割を維持したまま色調パレットだけを変更できます。

13.3 部品単位のトークン

製品規模が大きくなると、全体の役割色だけでなく、部品単位のトークンを作る場合があります。例えば、主要ボタンの背景、主要ボタンの文字、カードの背景などを明示します。

ただし、部品トークンへ具体的な色コードを直接登録すると、全体体系との関係が失われます。部品トークンは可能な限り役割色を参照し、部品固有の例外だけを個別管理します。

13.4 命名規則の作り方

名前には色の見た目ではなく、利用目的を含めます。「濃い青」「薄い灰色」ではなく、「主要背景」「弱い境界」「失敗容器」のように命名します。

色相を名前に含めると、ブランド変更後も「青」という古い名前が残る可能性があります。用途を中心とした命名なら、値が青から紫へ変わっても名称を維持できます。

13.5 トークン変更時の運用

トークンの値を変更すると、多数の画面へ影響します。そのため、変更理由、影響範囲、確認画面、変更前後の画像を記録し、設計と実装の双方で確認します。

不要になったトークンをすぐ削除すると、古い画面や外部連携が壊れる可能性があります。非推奨期間を設け、新しいトークンへ移行してから削除する運用が安全です。

実装例

:root {  --color-source-brand: #345ca8;  --color-role-primary: #345ca8;  --color-role-on-primary: #ffffff;  --color-role-primary-container: #d9e2ff;  --color-role-on-primary-container: #001944;  --button-primary-container: var(--color-role-primary);  --button-primary-label: var(--color-role-on-primary); } .primary-button {  background: var(--button-primary-container);  color: var(--button-primary-label); }

14. Material 2とMaterial 3の違い

Material 2からMaterial 3への移行では、単に色名を置き換えるだけでは不十分です。Material 3では色の役割が増え、容器色、表面色、動的配色などを含む体系へ拡張されています。また、同じ名前の色でも、生成方法によって実際の値が異なる場合があります。

14.1 色の数と役割の違い

旧方式では、主要色、主要色の変種、補助色、背景、表面など、比較的少ない色で主題を構成していました。現行方式では、主要色、補助色、第三色、それぞれの容器色と内容色、複数の表面色などが用意されています。

役割が増えたことで、部品ごとに独自の色を作らなくても、情報の階層や選択状態を表現しやすくなりました。一方で、色の意味を理解せずに設定すると、組み合わせを誤る可能性も高くなります。

14.2 主要色の扱いの違い

旧方式では、主要色とその暗い変種が、上部領域や状態領域に広く使用される設計が一般的でした。現行方式では、主要色を重要な操作へ集中させ、広い領域には容器色や表面色を使う設計が中心です。

この変更により、画面全体をブランドカラーで塗らなくても、主要操作を明確にできます。移行時には、旧方式で広く使用していた主要色を、そのまま現行方式の主要色へ割り当てないことが重要です。

14.3 容器色の追加による違い

現行方式では、主要色、補助色、第三色に対応する容器色があります。容器色は、選択された項目や強調領域を、強すぎない背景で表現するために使用します。

旧方式の淡い独自色を容器色へ置き換えることで、主題全体との関係を明確にできます。背景色と内容色を対として管理できるため、暗い主題への移行も行いやすくなります。

14.4 暗い主題での違い

旧方式では、暗い背景へ透明な白や主要色を重ねて高さを表現する方法が多く使われました。現行方式では、複数の表面色や色調によって包含関係を表現できます。

移行時に旧方式の透明度指定をそのまま残すと、現行方式の表面色と重複して、意図しない明るさになる場合があります。影、透明度、表面色の役割を整理し直す必要があります。

14.5 移行時の進め方

最初に旧主題の色を一覧化し、各色がどの画面と部品で使われているかを確認します。その後、見た目が近い色ではなく、利用目的が近い現行の役割へ割り当てます。

すべてを一度に置き換えると問題箇所を特定しにくくなります。主題定義、主要部品、代表画面、状態画面の順に移行し、各段階で画像比較とアクセシビリティ検査を行います。

移行例

// 旧方式 MaterialTheme(    colors = oldColors ) {    AppContent() } // 現行方式 MaterialTheme(    colorScheme = newColorScheme ) {    AppContent() }

15. 配色の実装・検証・運用手順

Material Designの色彩システムを安定して運用するには、色を選ぶ作業だけでなく、役割定義、主題作成、部品への適用、検証、更新管理までを一つの流れとして設計する必要があります。Composeでは色彩体系を主題へ設定すると、対応する標準部品へ変更を反映できます。

15.1 必要な画面と状態を整理する

最初に、主要画面、一覧、詳細、入力、確認、完了、失敗、空状態などを整理します。通常画面だけを見て配色を決めると、後から警告色や選択色が追加され、体系が崩れやすくなります。

各画面で、主要操作、補助操作、選択状態、通知、背景、表面、境界がどのように使われるかを記録します。この一覧が、必要な色の役割を判断する基礎になります。

15.2 元色と色調パレットを作成する

ブランドカラーや製品の印象を元に、基調色、補助色、第三色を選びます。それぞれから暗い色から明るい色までの色調パレットを作り、中性色と状態色も準備します。

作成後は、色見本だけでなく、代表部品へ適用して確認します。特に、最も暗い色と最も明るい色で、元の色相やブランドの雰囲気が失われていないかを確認します。

15.3 明暗の役割色へ割り当てる

色調パレットから、明るい主題と暗い主題の役割色を選びます。主要背景と主要内容、主要容器とその内容など、対になる色を同時に決定します。

暗い主題は、明るい主題の単純な反転として作成しません。背景、表面、主要色の明るさを個別に確認し、長時間利用しても刺激が強くなりすぎないように調整します。

15.4 部品と代表画面で検証する

配色をボタン、カード、入力欄、ナビゲーション、通知へ適用し、通常、押下、選択、無効、エラーの各状態を確認します。その後、代表画面を組み立て、強調度と情報階層を評価します。

自動検査でコントラストを確認すると同時に、実機で目視確認します。異なる画面サイズ、明るさ、主題、文字サイズで確認し、特定条件だけで読みにくくならないようにします。

15.5 公開後に配色を運用する

公開後は、利用者からの意見、操作分析、問い合わせ、アクセシビリティ検査の結果を確認します。主要操作が見つけにくい場合は、単に色を強くするのではなく、配置や文章も含めて原因を分析します。

配色を変更する場合は、役割色の定義を更新し、影響する部品と画面を一覧化します。変更履歴と画像比較を残すことで、将来の担当者も判断理由を理解できるようになります。

検証例

@Preview(
   name = "明るい主題",
   showBackground = true,
   uiMode = Configuration.UI_MODE_NIGHT_NO
)
@Preview(
   name = "暗い主題",
   showBackground = true,
   uiMode = Configuration.UI_MODE_NIGHT_YES
)
@Composable
private fun ColorSystemPreview() {
   AppTheme {
       Surface {
           Column(
               modifier = Modifier.padding(24.dp),
               verticalArrangement = Arrangement.spacedBy(16.dp)
           ) {
               Button(onClick = {}) {
                   Text("主要操作")
               }

               OutlinedButton(onClick = {}) {
                   Text("補助操作")
               }

               InformationCard {
                   Text("表面色と内容色の確認")
               }
           }
       }
   }
}

おわりに

Material Designの色彩システムで最も重要なのは、色を見た目ではなく役割として扱うことです。基調色、補助色、第三色、表面色、容器色、内容色、状態色を用途ごとに整理すれば、画面数が増えても一貫した配色を維持できます。特定の色コードを覚えるよりも、背景と内容の関係、強調度、主題間で維持すべき意味を理解することが重要です。

また、明るい主題だけで配色を完成させず、暗い主題、動的配色、未対応端末、色覚特性、低輝度環境まで検証する必要があります。公式の色生成機能や標準部品を利用していても、実際の製品画像、文章、独自部品との組み合わせによって問題が発生する可能性があるため、自動検査と目視確認を組み合わせます。

色彩体系をデザイントークンとして一元管理し、役割名を通して部品へ適用すれば、ブランド変更やアクセシビリティ改善にも対応しやすくなります。美しさ、読みやすさ、操作の分かりやすさを同時に満たすことが、Material Designの色彩システムを実務で活用するための最終的な目標です。