カラー配色は最高の遊び

私は長くデザインをしていますが、仕組みをデザインしているときとは別にビジュアルをデザインしているときに何が楽しいかというと色を選んでいるときだと思います。
造形を作りそして最後に着色していくとき、生気が感じられなかったものが
急に生き物のように動きが出てきて、とても興奮します。

アプリやWEBなどのUIでも配色は、楽しいですし、一番気を使います。
なぜかというと人間は、形よりも色でどんなものかまず認識することが多く
ある研究だと「90%以上のユーザーが配色によって購入を決めている」とまで言われています。
でも思い返して見れば、確かに普段から色で様々なものを判断したりしていますよね。例えば、黄色いワンピースを着ている女性を見れば明るそうとか、
真っ黒なお店を見れば高そうなお店とか無意識の内に判断しています。
言葉がなくても、相手に訴えることが出来ることはすごいですよね。
ただ、難しいのは色は一つだけで完結していることは少なく、だいたい２から３色は使っていて無彩色と組み合わせたりしながらその組み合わせは無数にあるので考えるのは大変です。

ここでやり方としてマテリアルデザインでカラーを定義する方法をお教えします。
マテリアルデザインのカラーは、プライマリーカラーとセカンダリーカラーがベースで考えられていて、そこにサブカラーが入ってきたりします。
プライマリーカラー別名メインカラーとも言われていてサービスのカラーとなるものでブランドカラーと同じことが多いです。
セカンダリーカラーはアクセントカラーとも言われメインとはアクションと区別するために利用される色です。
サブカラーは、プライマリーカラーと似たカラーで、トーンを落としたカラーと上げたカラーを使います。サブカラーは１つではなく２つ構いません。
サブカラー同色相で作るので、トーンオントーンという色の配色方法を使えば
作れます。

プライマリーカラーは、アプリだとアプリバーやリンク、登録や確定などポジティブ要素に多いです。フローティングボタンにもアクセントカラーを使う事もありますが目立ちすぎるのでプライマリーカラーにすることが多いです。
セカンダリーカラーは、たとえば、リンクや警告、通知、削除などのネガティブ要素に多くメインの補色（反対の色の事、Complementary color）で目立つような配色にすることが多いです。
サブカラーは、トーンが低いカラーはステータスバーで、トーンの高いカラーはテキストで他と差別化したい箇所などに使います。
サブカラーは以下のGoogleが提供しているツールで簡単で作ることが出来ます。

マテリアルデザインのカラーツール
https://material.io/tools/color/#!/?view.left=0&view.right=0