[日本語]マテリアルデザイン『Applying color to UI』#13

2022年10月13日 12:56

はじめに
今回は『マテリアルデザインガイドライン』の『Applying color to UI
』について解説していきます。
なお、この記事は私が(翻訳機能を使って)ガイドラインを読む中で、日本語訳に違和感を感じたり、理解が難しいな。と思った箇所を分かりやすい言葉に置き換えるなど、一部個人的な解釈が含まれます。

正しい情報は下記のガイドラインをご確認ください。
引用元 Google - Material Design URL：https://material.io/
※動画・画像データ等はこちらから引用させていただいております。

UI に色を適用する際の原則

色は、「一貫した意味のあるルール」で UI 要素とコンポーネントに適用します。

「Top and bottom app bars」の色の適用

「Top app bar」と「Bottom app bar」に色を適用する際は、「Primary color」を使用します。

また、「System bar(画面最上部)」には「primary variant(明るいprimaryか暗いprimary）」を使用し、ユーザーが「それぞれ別の要素である」と認識できるようにします。

このトップアプリバーではプライマリカラー (紫 500) が使用され、システムバーでは暗いプライマリバリアント (紫 700) が使用されています。

また、下の画像では、それぞれのコンポーネントの違いを強調する為に、「 floating action button」(FAB) にセカンダリカラーを使用ししています。

[注意する点]
下の画像のように隣接するコンポーネントで同じ色を使用する際は、「Floating Action Button」に「Shadow」を付けるなどの方法で、それぞれのコンポーネントを区別を明確にする必要があります。

「bottom app bar」と「 floating action button」で同じ色を使用

また、「Top app bar 」や「bottom app bar」が「Background color(背景色)」と同じ場合、コンテンツを強調させることができます。

このアプリの画面では「top app bar」の色と「Background color(背景色)」で白を使用しています。ただし、スクロールすると「top app bar」に影が付き、その後ろでスクロールするコンテンツよりも高い位置にあることがわかります。

Backdrop

「Backdrop(背景)」のカラーには2つのレイヤー(前面と背面のレイヤー)があります。
この2つのレイヤーを区別するため、基本的には下の図のように、前面の「Backdrop」には「白」、背面の「Backdrop」には「Primary color」を使用します。

Sheets and surfaces

「Bottom sheet」「Navigation drawer」「Menu」「Dialog」「Card」などで使用する、「Sheets 」や「Surface」(またはコンポーネント）の色は、基本的に「白」です。

また、これらの「Surface」(またはコンポーネント）は、他のUI要素とのコントラストを高めるために、配色(色付け)することができます。
配色によってコントラストを高めることで、各要素間の境界線が明確になり、「Surface」が重なったときに、その「Elevation(高さ)」の違いを表現しやすくなります。

「navigation drawer」や「bottom sheets」などの基本カラーは「白」ですが、下の画像のように「Primary color」や「secondary color」を使用してコントラストを高めることができます。

また、下の図の場合では「Navigation drawer」のカラーは基本カラーである「白」ですが、「Navigation drawer」以外のエリアを「透過するホワイト」で「Scrim」することによって、背後のコンテンツを目立たなくしています。(「Navigation drawer」を目立たせる)