色の選択
Material Designに則った色の選択方法の要点は下の画像に詰まっています。
これから、この画像を見ながら説明していきます。
メインのブランド色
画像を見ると、1と2は色が似ていることが分かります。
そして、Primaryと書かれています。
この二つの色はあなたが作るアプリ全体を通して使う色で、あなたのアプリのブランド色となります。
これらはアプリの中で重要なコンポーネント、例えばヘッダー等で使われます。
下の画像に利用例が示されています。
補助的なブランド色
再び画像を見ると、3と4も色が似ていてSecondaryと書かれていることに気づきます。
この二つの色は、アプリ内において補助的なブランド色として使われます。
たとえばボタンやセレクションなどのUI部品に使うのが良いみたいです。
下の画像ではボタンの色に使われています。
その他の色
画像内の5から7はそれぞれ、背景色、汎用的なコンポーネント(カードやメニュー等)の色、UIのエラーを伝える色を表しています。
アプリ内で幅広く使われる色は5と6の色になります。
下の画像ではブランド色は省かれた状態で、上の3つの色の利用例が示されています。
文字やアイコンの色
画像内の8から12は、1から7のコンポーネントの上での文字やアイコンの色を表しています。
それぞれOn Primaryのように、それぞれの頭にOnということがついています。
例えば、On Primaryは白色で、Primaryは濃い青色です。
これは濃い青色の上では白色の文字が見やすいためにそのように選択されています。
他の色も同様の考え方で白か黒かを決めます。
下の画像ではそれぞれのコンポーネントの上の文字や色について意識してみてください。
まとめ
アプリ内の色を選ぶとき、まずはメインのブランド色を選びます。そして、もう一つブランド色が欲しい時には、補助的なブランド色を選びます。これらは似てない色を選択したほうが良いです。
そして、背景色や汎用的なコンポーネントや文字などは、このブランド色の邪魔をしない色を選ぶようにします。