モノクロから考える

私たちはUIデザインツールにFigmaを使いますが、最近、 Figma のカラーパレットで新しい色をつくることがかなり減りました。 その理由として色をプロジェクトに足すことがとてもストレスに感じるからです。
ストレスというのは言い過ぎかもしれませんが、それだけ慎重にならざるを得ません。
なぜなら安全な場所に突然、乱暴者が現れて自分を主張ばかりする人が現れ、そんな人を黙らせるためにまた別の色を持った声の大きな人が入ってきたというように、収集がつかなくなるからです。

その結果、我先に目立ちたがりが出てきて、これを「歌舞伎町のネオン街」なんて揶揄する人まで出てくる始末です。

何者にも染まらない無彩色、グレーというのは個性がなくてつまらないかもしれません。 しかし、調和を乱さず主張しないことで逆にコンテンツの読みやすさを提供できることもあります。

モノクロで設計し、色に頼らなくても伝わる言葉、あるいはコントラストを実現しましょう。 その上でプライマリーカラーをつくるときに10段階のバリエーションを用意します、ここからは筆者が公開したFigmaプラグイン 「Color Scheme」 を使ってみます。

"Color Scheme" plugin for Figma

UIフレームワークにもよりますが、大抵10段階ほどのパターンが構成されています。 例は私たちツクロアのテーマカラーのバリエーションです。

私はこのパターンをつくるにあたり、UIフレームワークのデフォルトテーマをそのまま使うのはブランドとして他との差別化のためには不充分と感じ、Figmaのプラグインを開発しました。
上記パターンの「500」を決めればあとは自動的にバリエーションを作成し、面倒なColor Stylesの登録は自動でやってくれ、SCSSのカラー変数を書き出してくれます。開発者に渡しましょう。

最低でもグレーの10パターン、そしてプライマリーの10パターン

最低限でも1プロジェクトで「gray」は定義しましょう。
そして多くのプロジェクトではプライマリーカラーを一つだけ決めます。
つまり、グレーの10パターンと、プライマリーの10パターン。

私たちのFigmaの各プロジェクトには最低でも20個以上のColor Stylesが登録されています。
プライマリーカラーはそのプロジェクトの個性でありブランド（差別化要素）であり、大げさかもしれませんが「憲法」のような侵すことのできない大切な存在。
ちゃんと言語化して色を決める必要があるので、安易に色を増やさないように注意しましょう。