デザインシステムにおける色の命名ルール

崩れない色名にする

前回「デザインシステムに採用する色を決める5つのルール」を通して、色の名前の付け方や整理の仕方を紹介しました。これを受けてウェブデザイナーの深沢幸治郎さん（@witch_doktor）が「ウェブサイトに使われる色に固有の名前をつけてみる」という記事を書いてくれました。色の命名にまつわる苦労や工夫について読むことができるので、ぜひ参考にしてください。

前回の補足として、デザインシステムにおける色名の付け方の工夫を 3 つ紹介。色の整理をするときの参考にしてください。

色名＝変数

色の名前を付けるのに困っている方は、Kromatic がオススメ。カラーパネルのスライダーを動かすか HEX 値を入力するだけで、色名を提示してれます。他にも color-names という 10,000 以上の色名が収録されたライブラリもありますし、Wikipedia にも色名は幾つかあります。

🌈色にユニークな名前を付けると言っても良い名前が思いつかん！という方は「Kromatic」を使ってみてはいかがでしょう。 pic.twitter.com/S6P7k7NT02

— Yasuhisa🐱 (@yhassy) 2017年8月29日

色を日本語で表現することもできますが、変数にしやすいという理由で英語を選んでいます。例えば「Charcoal」という色名を選んだのであれば、変数もそのまま「$charcoal」です。デザイナーだけでなくエンジニアにも色名ついて知ってもらうのであれば、同名にするのがてっとり早いです。 Sketch をはじめとしたデザインツールでもなるべく変数を意識して管理するのがオススメです。

Sketch では色名と、HEX 値を図のようにまとめています。

「Carrot Orange」のように色名が長い場合は「$carrotOrange」のようなキャメルケース、「$carrot_orange」のようなスネークテイルに変更したほうが良いでしょう。どの記法にするかは仕事現場によって違うので、エンジニアに相談して決めたほうが良いでしょう。

Kromatic であれば、色名をキャメルケースにするかスネークテイルするかを設定することができます。

色合いの命名基準

グレーだけではありませんが、幾つかの色合いが必要になる場合があります。この場合、ひとつひとつの色に名前を付けてしまうと、色名が増えてしまい紛らわしくなります。例えば Material Design の場合、色合いを数字にしてまとめています。

プロジェクトによって 5, 7, 10 と様々な明るさを用意していますが、色合いの命名に Material Design は参考になります。「grey1」「grey2」のような名称にしてしまうと、どちらが明るい色なのか判断するのが難しくなります。5 種類くらいの色合いであれば「-light」「-lighter」みたいな英語表現でもどうにかなりますが、それ以上だと Material Design のように数字にしています。

色合いのスケールを「50（明るい）」から「900（暗い）」という分かりやすいくらい数の開きがあると、どちらが明るいか判断がしやすくなります。ベースカラーは真ん中の数字を割り当てて、そこから色合いを展開していきます（5, 7 のような奇数を選ぶ場合があるのも展開のしやすさを考慮しています）。ベースカラーだけは「$color500」だけでなく「$color」のように数字を入れなくても表示されるような工夫もしています。

シンプルな名前からスタート

Kromatic のようなツールを勧めているからといって、必ずユニークな色名にしなければいけないわけではありません。あるアプリのデザインで青を使っていて、類似色が使われていないのであれば「$blue」と名付けて色合いを展開して良いと思います。ユニークな名前を付ける場合は以下のような状況です。

• 類似色が使われている場合
• 呼び名が人によって違う可能性がある場合
• 色を通して意味をきちんと伝えたい場合

色の呼び方を決めるためだけに話し合いをするくらいなら、ユニークな名前を用意して「こう呼びます」と決めて進めたほうが早いです。その場合 Kromatic のようなツールに頼るのが便利です。

小さなところから言語化する

デザインシステムはどのプロジェクトでも必要なものではありませんし、納品ペースの案件ではオススメしていません。デザインの運用が必要だという認識が決裁者にないと実践できないですし、作って終わりというほど単純ではありません。もちろんエンジニアからのフィードバックと協力がなければ、ただのカタログになってしまいます。

しかし、デザインを分かりやすく言語化するという働きかけは、どんな小さな案件でも必要です。オレオレルールで本人でなければ把握できないデザインだと周りが困ってしまいます。何かしらのルールと言語化は必要で、色のルールを作るのは言語化の第一歩になると考えています。

前回、今回紹介したルールを参考にして、まず自分のデザインファイルにある色の整理を始めてみてはいかがでしょうか。