LoginSignup
44

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-12-25

前置き

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

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

この投稿の目的は2つ

  • 上記ページの繰り返し見返したい情報だけを抜粋してまとめておく
  • マテリアルデザインって ここまで細かく決まってたのか という驚きを誰かに共有したい

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

目次

Primary color、Accent color

まず Primary color1、Accent color2 なるものを決める。

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

  • Primary darkってのもよく使うけどこれは勝手に決まる
  • Accent colorの使いどころの説明は難しいので割愛。これも参照元ページに書いてある。

テキストの色

黒か白か

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

Opacity

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

テキスト

黒いテキスト Opacity
Primary text3 87%
Secondary text4 54%
Disabled text, hint text5, 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 とか使うんじゃないの?と思うけどとりあえず載っけとく。

Light theme Color
Status bar #E0E0E0
App bar #F5F5F5
Background #FAFAFA
Cards/Dialogs #FFFFFF
Dark theme Color
Status bar #000000
App bar #212121
Background #303030
Cards/Dialogs #424242

参考リンク(既に紹介済み)


  1. When using a primary color in your palette, this color should be the most widely used across all screens and components. 

  2. 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 

  3. The most important text 

  4. 比較的優先度が低いテキスト。Secondary text, which is lower in the visual hierarchy 

  5. テキストフィールドのプレースホルダとかの文字。Text hints (like those in text fields and labels) 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
44