色についての自分の中でのルールをまとめてみます。
色にもルールを設けて一貫性をもたせると、デザインのクオリティがぐっと上がるよ
原則は「先に使う色を限定しておく」です。
テキストに使える白黒
どんなWebサイト・アプリでもテキストの色は基本的に白 / 黒です。この白黒の使い方については、 Material Design に定められているルールに則るといい感じに決まります。
白黒の文字は、基本的に #fff （真っ白）または #000 （真っ黒）の透明度を調整して表現します。この方が背景色に馴染んでいい感じに決まります。
使える濃度は基本的に 3 通りです。それぞれ役割があることをお忘れなく。
- High-emphasis text : 87%
- Medium-emphasis text and hint text : 60%
- Disabled text : 38%
もちろんあくまで一つの基準でしかないので、これを厳密に守る必要はありません。
原色は目がチカチカするので要注意
上のテキストカラーを見てるとなんとなくわかりますが、真っ黒 #000 とか真っ白 #fff とか、原色系は目がチカチカするので基本的に使わないことをおすすめします。
白だったら #f5f5f5 とか、黒だったら #121212 とか使うだけで少し垢抜けた雰囲気が出せますよ。まぁこの辺は場合によりけりです。
メインカラーを決める
まずはメインカラーを決めましょう。メインカラーは全体の約25%を占めるように配色する色です。（ちなみに 70% はベースカラーと呼ばれる背景色です、基本的に白黒がほとんどなので割愛）
facebook や Twitter は青、 Evernote や LINE は緑、Youtube や Pinterest は赤、といったようにサービスにはアイデンティティとしてのメインカラーがあります。
このメインカラーがテーマとなり、一番目立たせたい部分に使用する色になります。
アクセントカラーを決める
全体にメリハリをつけるために、約5%程度の割合でアクセントカラーを決めて入れてあげると更にクオリティが高まります。
色のセンスに自信がない人は、Coolors.co や colorbase.app などを使ってピンとくる配色を探してみましょう。
他にも、配色手帳などの本を見たり、色合いが好きな画像から抽出することでカラーパレットを作ってみたりなど、方法はたくさんあります。
違和感のない色ができるまで何度も試行錯誤することが大事です。
Material Design の Tools for picking colors というツールを使うと、メインカラーを入れると濃淡などで色の展開をしてくれます。ここで指定された色を使うのも手です。
カラーパレットにまとめる
決めた色はカラーパレットにまとめ、基本的に色はすべてここから使用するようにしましょう。
使う色を限定することでデザインに一貫性が生じ、さらに意味が明確になるので、メリハリのある、意図の伝わりやすいデザインが出来上がります。
とりあえずこの辺意識しておけば良さそうな気がします。