![見出し画像](https://assets.st-note.com/production/uploads/images/92439548/rectangle_large_type_2_33f2b29f7f9ae0a4e4e8c2458e26e480.png?width=1200)
[日本語]マテリアルデザイン 『Applying color to UI』#13
はじめに
今回は『マテリアルデザインガイドライン』の『Applying color to UI
』について解説していきます。
なお、この記事は私が(翻訳機能を使って)ガイドラインを読む中で、日本語訳に違和感を感じたり、理解が難しいな。と思った箇所を分かりやすい言葉に置き換えるなど、一部個人的な解釈が含まれます。
正しい情報は下記のガイドラインをご確認ください。
引用元 Google - Material Design URL:https://material.io/
※動画・画像データ等はこちらから引用させていただいております。
UI に色を適用する際の原則
色は、「一貫した意味のあるルール」で UI 要素とコンポーネントに適用します。
![](https://assets.st-note.com/img/1665540571478-xDH5aM6pBE.png?width=1200)
「Top and bottom app bars」の色の適用
「Top app bar」と「Bottom app bar」に色を適用する際は、「Primary color」を使用します。
また、「System bar(画面最上部)」には「primary variant(明るいprimaryか暗いprimary)」を使用し、ユーザーが「それぞれ別の要素である」と認識できるようにします。
![](https://assets.st-note.com/img/1665540989822-QWGcbUW9to.png?width=1200)
また、下の画像では、それぞれのコンポーネントの違いを強調する為に、「 floating action button」(FAB) にセカンダリ カラーを使用ししています。
![](https://assets.st-note.com/img/1665541228102-FamDnhOWp7.png?width=1200)
[注意する点]
下の画像のように隣接するコンポーネントで同じ色を使用する際は、「Floating Action Button」に「Shadow」を付けるなどの方法で、それぞれのコンポーネントを区別を明確にする必要があります。
![](https://assets.st-note.com/img/1665541315135-1csyo8j75F.png?width=1200)
また、「Top app bar 」や「bottom app bar」が「Background color(背景色)」と同じ場合、コンテンツを強調させることができます。
![](https://assets.st-note.com/production/uploads/images/88825415/picture_pc_e0255a912fc1e82f4eb6b311318b62ff.gif?width=1200)
Backdrop
「Backdrop(背景)」のカラーには2つのレイヤー(前面と背面のレイヤー)があります。
この2つのレイヤーを区別するため、基本的には下の図のように、前面の「Backdrop」には「白」、背面の「Backdrop」には「Primary color」を使用します。
![](https://assets.st-note.com/img/1665548408704-1ipevEcfRn.png?width=1200)
Sheets and surfaces
「Bottom sheet」「Navigation drawer」「Menu」「Dialog」「Card」などで使用する、「Sheets 」や「Surface」(またはコンポーネント)の色は、基本的に「白」です。
また、これらの「Surface」(またはコンポーネント)は、他のUI要素とのコントラストを高めるために、配色(色付け)することができます。
配色によってコントラストを高めることで、各要素間の境界線が明確になり、「Surface」が重なったときに、その「Elevation(高さ)」の違いを表現しやすくなります。
![](https://assets.st-note.com/img/1665549596606-Ca4EbG49oQ.png?width=1200)
「navigation drawer」や「bottom sheets」などの基本カラーは「白」ですが、下の画像のように「Primary color」や「secondary color」を使用してコントラストを高めることができます。
![](https://assets.st-note.com/img/1665550236791-Ys5ANT5WYM.png?width=1200)
また、下の図の場合では「Navigation drawer」のカラーは基本カラーである「白」ですが、「Navigation drawer」以外のエリアを「透過するホワイト」で「Scrim」することによって、背後のコンテンツを目立たなくしています。(「Navigation drawer」を目立たせる)
![](https://assets.st-note.com/img/1665550387884-AoDU75tzyM.png?width=1200)
Cards
「Card」の基本カラーも「白」ですが、下の画像のように、アプリのブランドを表現したり、視認性を向上させたりするためにカスタマイズできます。
![](https://assets.st-note.com/img/1665551971285-NTeOJa4lL6.png?width=1200)
また、下の画像のように、「Card」に写真を適用し、その上にテキストを配置する場合は、テキストを読みやすくするために、写真とテキストの間に「Scrim」を使用しています。
![](https://assets.st-note.com/img/1665552238117-4fphAzsBlC.png?width=1200)
Buttons, chips and selection controlslink
「Button」「Chip」「Selection control(選択している状態)」は、「Primary color」や「Secondary color」を適用することによって、強調させることができます。
Color categories
テキストが含まれている「Button」や、アウトライン ボタンでは、基本的に「Primary color」を使用します。
「Floating Action Button」や「Selection control」には、基本的に「Secondary color」を使用します。
![](https://assets.st-note.com/img/1665552572830-GGbJqVkPKA.png?width=1200)
2. 選択されたリスト項目のアクセントとしてsecondary color (teal 200)を使用しています。
![](https://assets.st-note.com/img/1665552849900-8CATduaKB8.png?width=1200)
Floating action button (FAB)
Floating action button(FAB) は、画面上で最も認識しやすいアイテムの 1 つで、基本的に「secondary color」を使用します。
![](https://assets.st-note.com/img/1665553288457-10XHwuXBo7.png?width=1200)
Typography and iconographylink
「テキスト(Typography)」にカラーを使用することで、視認性と重要度の両方を高めることができます。
例えば、下の画像では「Card」のタイトルテキストに「Secondary color」を適用し、「LEARN MORE」のボタンには「Primary color」を適用し、それぞれを強調しています。
![](https://assets.st-note.com/img/1665553707857-TvcJc14o0X.png?width=1200)
Headlines and tabs(見出しとタブ)
タブや見出しなどの重要なテキストには、primaryまたはsecondary colorを使用できます。
![](https://assets.st-note.com/img/1665553875382-5mxSo1khyO.png?width=1200)
[注意]
下の画像のように、本文テキストに対して「Primary color」や「Secondary color」を使用することは避けてください。
![](https://assets.st-note.com/img/1665554053316-FCTHxUo4hH.png?width=1200)
Icons
アイコンは、アクションを識別し、情報を分かりやすくするために役立ちます。アイコンの色は、読みやすく、識別できるように、背景に対して対照的である必要があります。
![](https://assets.st-note.com/img/1665554275239-OMZ8XA5jQo.png?width=1200)
![](https://assets.st-note.com/img/1665554321192-VVk9d81nAk.png?width=1200)
まとめ
今回は、マテリアルデザインガイドラインの『Applying color to UI』を解説しました。
ボリュームが多くて、このコンポーネントは基本的に何色を使うんだっけ??と、なってしまいそうなので下記にまとめてみました!
(ただし、基本色であってカスタマイズ可能です)
![](https://assets.st-note.com/img/1665633417166-IXmaIfWjmf.png?width=1200)