不真面目に Material Design の配色する／Material Color Generator 作りました

2015.10.03

• Design / Motion / Video
• material design

Material Design は、色を決めてアイコンを作れば、一画面を構成する新規パーツをイラストレーターとかで新規作成しなくても、ほぼほぼ作れるようになっています。

Material Design で作られた Google 謹製のモバイルアプリ（Drive/Spreadsheet/Calendar/Analytics）を使いやすいと思ったことがあまりないのでやや疑問視しているのですが、個人的な感覚に過ぎないですしまだ真価が見出せていないだけかもしれないので、その辺は有耶無耶にして仕事をするのがサラリーマンの務めであります（サービス自体はお世話になりっぱなしです）。

そこで、その色の決め方について、不真面目な手順の一例を考えました。

①まず白ベースのアプリか黒ベースのアプリか決める

標準背景が白系（Light）か、黒系（Dark）かを決めます。
ほぼほぼ Light 系にするといいと思いますが、以下のアプリは Dark 系でも映える気がします。

・映画のアプリ
・音声、音楽のアプリ
・クリエイティブツール
・その他クール推しなアプリ
・設定系ツール

②プライマリカラーを決める

ブランドカラーが存在する場合はブランド規定にに沿って設定するのが鉄則かと思います。

そうでない場合は Color - Style - Google design guidelines からまず、そのアプリの世界観に合った一色目（プライマリカラー）を選択します。
あまり薄い色じゃない『500』あたりがスマホの液晶でもハッキリ出る上に、見出しテキストを白色に設定できるので、画面のバランスがなんとなくよくなるのでいい気がします。300 以下、700 以上は避けると良さそうです。

ちなみに色には一般にイメージがあり、イメージから選ぶのがいい気がします。

とはいえ別になんでもいい気もします（コミュニケーションツールといえば青周辺のイメージだったのが FireChat みたいに真っ赤で出てきたりすることもあるし）。

③アクセントカラーを決める

これもブランドカラーが存在する場合はブランド規定にに沿って設定するのが鉄則かと思います。

アクセントカラーもこの中から選びますが、なるべく色相環でいうと、プライマリカラーと同じ角度or隣接の角度のところ以外にある色をアクセントカラーに選ぶとそれっぽい見た目になります。

アクセントカラーは、 A200 といったように、頭に A がついてる色の中から選ぶと良さそうです。（A200 は普通の 200 よりも彩度が高く設定されている）

④テキストカラーを決める

プライマリカラー②で選んだ時の色の上に乗っている文字が、白か黒かで WHITE(#FFFFFF) か Grey (#212121) にします。
→Google のカラー表に乗っているテキストのことです

ただし黒い文字は色付きの背景に乗ってたりすると、以外に読みにくかったりするので、少し甘めに白寄りで判定するといい気がします。
（例えば Light Green 500 をプライマリカラーに選んだ場合も White にしてしまってもいいと思います。）

⑤プライマリカラーの暗い色と明るい色を決めます。

プライマリカラーを何かの 500 にした場合、ダークを 700、ライトを 100 あたりにします。

⑥そんな感じでなんとなく適当に選んだらこんな感じで確認。

①がLight 系であれば

①がDARK 系であれば

⑦完成

というわけでなるべく Google のパレットに沿ってデザインするとそれっぽくなります。
表といちいち比較すんのメンドクセーという方はこちらのジェネレーターを作りましたので、ご利用ください。

Material Color Generator

プロトタイプとかで練りに練った遷移や各画面構成などの設計とガッチャンコ（）した時にうまくハマるパレットだといいですね。

個人的にはテクスチャーとかグラデーションとかがちょっと使われているとよりイケてる感がガッツリ増すと思われます。

現場からは以上です。