UIデザインのお仕事を手がけるようになり、デザインガイドを作成する機会をしばしばいただけるようになりました。
また、Sketchのシンボルを用いてサイト内での使用色を管理する手法を積極的に取り入れるようになったことや、CSSコーディングの場面で繰り返し使う色をSassの変数に割り振って管理する場面が増えたこともあり、これまで以上に色に名前をつけて管理する機会が増えてきたと感じています。
その中で生じる新しい悩みは色の命名です。これまで私は色に名前をつける段で深く考えずに「red1, red2…」といった「おおよその色相+番号」という命名を試したり、またCSSフレームワークによくある「primary, secondary, success…」といったような「役割」ベースの命名を施したりしてきたのですが、それではうまくいかないケースも生じてきました。
これまでの色の命名の問題点
目下のプロジェクトでSketchのSymbolsに登録してあったカラーシンボルがこちら。すでに簡単なジャンル分けをしています。
- アクセントカラー：ある役割をそれぞれもったアクセントカラー4色とその派生色3色
- テーマカラー：サイトカラーの基調となるネイビー系のグラデーション7色
- アクロマティックカラー：テキストや背景など、広範に用いられる無彩色8色
すでに多すぎる感じもありますが、微妙な色差で境界をつくっている箇所もあり、今のところこれが必要な色ということにしています。
先述したとおり、これまでは例えば
primary, success, danger, darkest-navy, dark-navy, medium-navy…
といった命名を施してました。役割や色の系統に対して修飾語をつけることで区別するパターンですね。 しかしこのやり方はすぐに破綻します。大きなことや小さなことがありますが、たとえばこういったことです。
- darkest-xx, lightest-xxと名前をつけたが、あとからより暗い色や明るい色が登場した場合に詰む
- そもそもnavyは暗青色を指す言葉であって、たとえばextra-lightと頭につけたからといってこんなに明るくてしていいのか
- しかたがないのでblue1, blue2…と名前をつけてもいいが、新しく色が挿入されたり、削除されたときに全体の番号振りに影響する
デザインデータ上のみの話であればまだいいですが、これらの名前がSassの変数やクラス名にまで使いまわされていたら、修正コストは比較的大きなものになります。プロジェクトにかかわる多くの人が参考にするデザインガイドに記載できる色の名前、ということを考えたときに耐久性に欠ける名前ではいけない、と思ったのです。
固有の名前を色につける
で、そんなときに読んだ長谷川恭久さんの記事。
コーポレートカラーが青だからといって「blue」にせず、「azure」「mariner」などユニークな名前にします。コーポレートカラーであれば「ブランド名+blue」のような名称を使うこともあります。
なるほど、全部にユニークな名前をつけてしまえばいろいろ解決しそうです。さっそく色の命名を考え直すことにしました。
色固有の名前を探せるデスクトップユーティリティ「Kromatic」
とはいえ、22色の色名なんて名付けられないな…と悩んでいたら、Twitterに長谷川さんのフォローが。
🌈色にユニークな名前を付けると言っても良い名前が思いつかん！という方は「Kromatic」を使ってみてはいかがでしょう。 pic.twitter.com/S6P7k7NT02
— Yasuhisa🐱 (@yhassy) 2017年8月29日
KromaticはApp Storeで販売（2017年9月現在 240円）されているデスクトップ・ユーティリティでMac OSのカラーセレクタから任意の色を示すと、その色固有の名前を表示してくれるというものです。表示された色の名前とパラメータ（16進数・RGBなど）はクリック一発でコピーできるようになっています。
注：2017年9月現在、色名のコピーに不具合あります。コピーする色名の表記形式がハイフン区切り・アンダースコア区切り・キャメルケースなどから選べるようになっているのですが、これがコピーした結果に反映されず、絶えず「スペース区切り・単語先頭大文字」にされてしまいます。
これを使って効率的に22色に名前をつけてやることができました。
色名がかぶる場合は
青みがかったグレー（#D6D9E0）と無彩色のグレー（#D1D1D1）が同じ「Iron」と判定されましたが、こちらは青みがかったほうに「Iron Blue」と名付けて命名の重複を回避しました。
カラーパレット完成
結果、以下のようなカラーパレットができました（これもSketchのシンボルでつくってます）。名前の意味が調べないとわからないものもありますが、Athens Gray（アテネのグレイ）とかちょっと絵心ある感じでいいなと。よく使われる#333333はMine Shaft（鉱山の縦坑）ですって。並べてみると、微妙な違いの色に個性を見出しやすい感じがしますね。なおhover時にのみ利用されるようなバリエーションに関しては、それほど細かい色の追加もなさそうだということで、Lochmara Lightなど、例外的に修飾語を足すかたちで命名しています。
色に固有の名前をつけるメリット
慣れると様々なシーンで色の選択時、判別が速くなる
画面内において、多くの色にはある程度決まった役割が与えられます。君は背景色、君はあのモジュールのアイコン色、君は標準的なボーダーカラー…と言った具合です。色に名前がついているとIron Blueはボーダー色だったな…といった連想がしやすくなり、繰り返し扱ううちに色の選択が速くなる効果が期待できます。またその関連付けのイメージはそのままCSS構築にも活かせます。「tableのボーダーカラーだから $iron-blueだ」と慣れればすぐに出てくるようになります。名前が与えてくれるイメージって結構つよいもので、blue1, blue2…といった号数ネーミングではなかなかこうはいきません。
色の挿入・削除に強い
先述したようにdark-xx, light-xx…、あるいはblue1, blue2…といった命名法は相対的な順序を元にしているため色の削除や挿入に弱く、一つの色を入れたり消したりするだけでネーミングやCSSの変数名・クラス名の見直しが必要になったりします。固有名であればその心配がありません。これは大きなメリットだと思います。
色に固有の名前をつけるデメリット
関係者全員に学習コストがかかる
とはいえ最初は大変です。名前だけではブルー系統なのか無彩色（グレー）系統なのかもイマイチ区別がつきませんし、どの色の方が明るい・暗いという順序も名前から推し量ることができません。今回のように色数が多いときに、色の名前を関係者全員の共通言語にしようとするとそれなりの学習コストがかかります。
色の系統／明度順に並ばない
これはとくにSketchのシンボルで扱う場合ですが、「blue1, blue2…」といったネーミングはabc順でリストに並んだときに探しやすいという利点があります。固有の色名であると、その系統だった順番でリスト化できず、やはり最初はとまどいます。しかしこの問題はSketchのシンボルを「/」区切りで整理すれば軽減できます。「color/accent-color/jade」だとか「color/achromatic-color/alabaster」といった具合です。
どんな案件に向いてそうか
こうした色管理の手法は、サイト全体の色数をできるだけ抑えられるプロジェクトに向いているかもしれません。あまり色数が多いとサイト内で使われる固有名詞が増えすぎて混乱を招く恐れもありますから（とはいえ一週間ほどさわっているうちに、多少色数が多くてもおおよそアタリはつくようになってきましたが…限度はありますよね）。今回はKromaticを用いて色に名前をつけましたが、まったく独自のオリジナルネームを作ってみてもいいかもしれません。自分でつけた色の名であれば連想もしやすいかも。ただし、他の関係者もイメージを共有しやすいネーミングにはしましょう。
あとは実装者にも共有されるようなデザインガイド・あるいはデザインルールを作成・共有するタイプの案件であれば、メリットが多いのではないかと思います。ぜひ導入を検討されてはいかがでしょうか。
追記
長谷川さんがご紹介した記事の補足記事を書かれてます。GoogleのデザインシステムであるMaterial Designを引用し、ある色の明暗のバリエーションが多くても色名がそれほど増えない方法をご紹介してらっしゃいます。
このブログ主の夫のほう。大阪を中心に活動するウェブデザイナー。水交デザインオフィス代表。JUSO Coworking運営。趣味でハウス・ディスコDJ / デレマスP。共著書『世界一わかりやすいWordPress 導入とサイト制作の教科書』発売中です。