マテリアルデザインの「色」について見返したいとこだけ抜粋してまとめる

Last updated at 2017-04-24Posted at 2016-12-25

前置き

普段 iOS しか作らない&触らないけど Android を作ることになり、せっかくならマテリアルデザインっぽくしてみようとちょっとだけ調べてみたら ここまで細かく決まってたのか と驚いた。

これから書くことはほぼ全部以下リンク先に書いてあります。(しかも分かりやすい)
この投稿は下記を読むのが面倒くさい且つとりあえず触りだけ知っておきたい人用です。
https://material.io/guidelines/style

この投稿の目的は2つ

※「色」についての話しかしません
※注釈の内容は参照元ページからのコピペと超ざっくりした意訳です

まず Primary color¹、Accent color² なるものを決める。

選べる色は限られている。
以下サイトで好みの色を2つポチポチしてダウンロード。

当然ながら、背景色が暗ければテキストの色は白、淡ければ黒を用いる。
判断に迷う場合はパレット上の文字が黒か白かを確認する。

テキストの色はグレーにせずOpacity(不透明度)で調整する。
Opacityはあらかじめ決められた値を指定する。

黒いテキスト	Opacity
Primary text³	87%
Secondary text⁴	54%
Disabled text, hint text⁵, and icons	38%
Dividers	12%

白いテキスト	Opacity
Primary text	100%
Secondary text	70%
Disabled text, hint text, and icons	50%
Dividers	12%

アプリのアイコンではなくアプリ内でボタンとなるようなアイコン。
黒か白を使うのが望ましい。

黒いアイコン	Opacity
Active icon	54%
Inactive icon	38%

白いアイコン	Opacity
Active icon	100%
Inactive icon	50%

Light theme, Dark theme それぞれの背景色も指定されている。
**Status bar と App bar は Primary color とか使うんじゃないの？**と思うけどとりあえず載っけとく。

When using a primary color in your palette, this color should be the most widely used across all screens and components. ↩
FAVボタンやインディケータなどインタラクティブな箇所に使う色。The accent should be used for the floating action button and interactive elements, such as: Text fields and cursors, Text selection, Progress bars, Selection controls, buttons, and sliders, Links ↩
The most important text ↩
比較的優先度が低いテキスト。Secondary text, which is lower in the visual hierarchy ↩
テキストフィールドのプレースホルダとかの文字。Text hints (like those in text fields and labels) ↩