LoginSignup
1
1

More than 3 years have passed since last update.

Material Design における色

Last updated at Posted at 2019-07-13

色の選択

Material Designに則った色の選択方法の要点は下の画像に詰まっています。
これから、この画像を見ながら説明していきます。

image.png

メインのブランド色

画像を見ると、1と2は色が似ていることが分かります。
そして、Primaryと書かれています。
この二つの色はあなたが作るアプリ全体を通して使う色で、あなたのアプリのブランド色となります。
これらはアプリの中で重要なコンポーネント、例えばヘッダー等で使われます。
下の画像に利用例が示されています。

image.png

補助的なブランド色

再び画像を見ると、3と4も色が似ていてSecondaryと書かれていることに気づきます。
この二つの色は、アプリ内において補助的なブランド色として使われます。
たとえばボタンやセレクションなどのUI部品に使うのが良いみたいです。
下の画像ではボタンの色に使われています。

image.png

その他の色

画像内の5から7はそれぞれ、背景色、汎用的なコンポーネント(カードやメニュー等)の色、UIのエラーを伝える色を表しています。
アプリ内で幅広く使われる色は5と6の色になります。
下の画像ではブランド色は省かれた状態で、上の3つの色の利用例が示されています。

image.png

文字やアイコンの色

画像内の8から12は、1から7のコンポーネントの上での文字やアイコンの色を表しています。
それぞれOn Primaryのように、それぞれの頭にOnということがついています。
例えば、On Primaryは白色で、Primaryは濃い青色です。
これは濃い青色の上では白色の文字が見やすいためにそのように選択されています。
他の色も同様の考え方で白か黒かを決めます。

下の画像ではそれぞれのコンポーネントの上の文字や色について意識してみてください。

image.png

まとめ

アプリ内の色を選ぶとき、まずはメインのブランド色を選びます。そして、もう一つブランド色が欲しい時には、補助的なブランド色を選びます。これらは似てない色を選択したほうが良いです。
そして、背景色や汎用的なコンポーネントや文字などは、このブランド色の邪魔をしない色を選ぶようにします。

参考文献

The Color System

1
1
0

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
1
1