feb19

Nobuhiro Takahashi
Designer / Engineer

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

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

date
2015.10.3(Sat.)
tags
MaterialDesign

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

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

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

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

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

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

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

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

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

イメージ
灰色上品、スタイリッシュ、無機質、設定画面、Softbank、VSCO
パワフル、ショッピング、アジア圏、お買い得、YouTube、Pinterest、Rakuten、GMail
クール、IT系、仕事効率化、欧米、Facebook、Twitter、Google Calendar、ワード
調和、コミュニケーション、地方、初心者、生活、案内、Hulu、LINE、Udemy、Google Map、スプレッドシート
黄色元気、警告、SnapChat、Kakao、LINE漫画、lynda、Outlook
オレンジ健康、食事、クックパッド、生活、Retty、mixi、マネーフォワード、パワポ
ピンク美容、可愛さ、恋愛、女性、MERY、家計簿、Hotpepper Beauty
高貴、上級者、ミステリー、占い、Hotpepper Beauty
自然、安心、ふるさと、知恵、カフェ、Instagram

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

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

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

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

Color Chart

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

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

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

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

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

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

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

キー②〜⑤
DARK PRIMARY COLOR⑤の色
PRIMARY COLOR②の色
LIGHT PRIMARY COLOR⑤の色
ACCENT COLOR③の色
TEXT / ICONS④の色

①がLight 系であれば

キーカラーコード
PRIMARY TEXT#212121
SECONDARY TEXT#737373
DISABLED HINT TEXT#9B9B9B
DIVIDER COLOR#DBDBDB

①がDARK 系であれば

キーカラーコード
PRIMARY TEXT#ffffff
SECONDARY TEXT#bcbcbc
DISABLED HINT TEXT#646464
DIVIDER COLOR#3c3c3c

⑦完成

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

Material Color Generator

Material Color Generator

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

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

著者: @feb19