[Material Design Guidelines]UIへの色適用の3つの原則を独自にまとめてみた。

2022年3月27日 22:31

Material Design GuidelinesのUIの色適用についての3つの原則がどういうことかという視点でまとめてみました。

では本題に入って、ガイドラインでは以下の3つが原則と定義されています。

＜原則＞
1：一貫性があること
2：明確であること
3：意図的であること

以降ではでは色適用の3原則がそれぞれどういうことかを記事を参考にしながら自分なりにまとめてみました。

1：一貫性があること

ガイドラインでは「一貫性があること」を下記のように紹介している。

> 色はUI全体に一貫して適用され、それが表すブランドと互換性がある必要があります。

直接ガイドラインには記載はありませんでしたが、個人的な解釈としてプライマリカラーやセカンダリカラーを定義し、ブランドカラーをプライマリカラーとして使用することかと考えています。

下記のようにプライマリーカラーやセカンダリカラーを定義し、例えばボタンはプライマリーカラーを使用しています。

参照：https://material.io/design/color/applying-color-to-ui.html

このように、プライマリカラーやセカンダリカラーを定義して一貫性を作ることが、色適用の原則のうちの1つだと考えています。

ガイドラインでは下記のように紹介されている。

> 色は要素間の区別を作成し、要素間に十分なコントラストを持たせる必要があります。

例えば、下記のように、白ベースにプライマリカラーpurple 500を使用し、ベースとコントラストを持たせている。

参照：https://material.io/design/color/applying-color-to-ui.html

番外編：コントラスト比の計算について

ウェブコンテンツアクセシビリティガイドライン(WCAG)では、一定以上のコントラスト差があることが好ましいとされ、以下が推奨値になる。

十分なコントラスト(評価AAA) : コントラスト比が7.0以上
最低限のコントラスト(評価AA) : コントラスト比が4.5以上

では、そこで推奨値に値するかどうかを判断するために計算方法を紹介します。→すみません、割愛させてください。

計算ツールは下記のようなサイトが存在します。
https://lab.syncer.jp/Tool/Color-Contrast-Checker/

ガイドラインでは下記のように紹介されている。

> 色は、要素間の関係や階層の程度など、さまざまな方法で意味を伝えることができるため、意図的に適用する必要があります。

上記の紹介文から、単純に色だけではなく、ぼかし等で階層関係を示唆することが、ここでいう「意図的だ」と考察しています。

例えば、下記のように、bodyもナビゲーションも同じ白ベースであるけれど、モーダル的にぼかしや透かしを入れることで階層関係を伝え、ここで言う意図的なデザインをしている。

参照：https://material.io/design/color/applying-color-to-ui.html

以上、Material Design Guidelinesの「UIの色適用」の記事のレイアウトに関する3つの原則がどういうことかを個人的な見解をまとめてみました。

この記事が気に入ったらサポートをしてみませんか？