理想のカラーパレットをもとめて 命名編

がいた色4/26に開催されたDIST.26 「Webサービスの個性を支えるデザイン」でのLTをさせてもらったので、その内容と補足をnoteにしたためる。

Webサービスにおける「色」

Webサービスのデザイン、開発をしていて「色」を何も考えずに決めるということはおそらく無い。もちろん創業者の好みとかそういった決め方もあるかもしれないが、何かしらの理由はある。一方、サービスの利用者にとっても色がサービスを使う動機となることもある。

色が人に及ぼす影響として下記のような研究結果があるらしい。

人は90秒以内にその製品が好みかどうかを判断し、その基準の90%は色だけに基づく。
The psychology of color in web design - 99designs

また色相ごとで人に与える心理・感情、意味も様々であり、その側面でどの色を選ぶかを考えることもできる。Canvaの提供する色に関するツールセットには色の意味を調べるツールもあるので、こういうのを使ってみるのも良い。

文化・宗教によって解釈は異なることはあるとはいえ「色」が「言葉」として文字でも音声でもない形でメッセージを伝える重要な要素であることは間違いない。

色をあつかうための命名ルール

色が重要であるというのはここまでの話で、今回の本題としては昨今のデザインシステムのような文脈で、その選んだ色を正しく使うために、色に対する命名規則を考えてみる。

いくつかの色を選んだとして、その色相や色調の差に対し、どういった名前をつけていくのが良いか？
例では、基準となる色を持ち、その前後にやや明るい・暗いといった階調をパレットの色として選択した場合で考えてみる。

ひとつは2014年頃のMaterial Designがやっていたような色名と色調を数値で段階的に表した名前。はじめに色を絞り込む前に展開するときにはこうした名前で展開して管理することは良さそうに思うが、いざUI開発上使うとなると「これ400だっけ、500だっけ..？」のように迷ってしまうことがある。このときにエンジニア（あるいは色に関わらなかったデザイナー）が、勘で使う色を選んでしまうと危ない。

また「blue」という名前も、もし「青み」のある色が他にもあるのであれば危ない命名かもしれない。「明るい青」「淡い青」などに「lightblue」や「skyblue」のようにすると、これもやはり覚えづらい。なのでもう少しユニークな名前をつけるという手もある。

例えば「azure」のような。プロジェクト管理ツールのJiraなどを提供しているAtlassianのデザインシステムでは「Pacific bridge」のように非常にユニークな名前をつけている。彼らの場合はさらにおもしろく。「B400」のように機械的な名前をつけつつ、そのエイリアス的にユニークな名前をつけている。例えば「Pacific bridge」よりも少し暗い青には「Chore coat（作業着）」と名付けるなど、非常にセンスを感じる。これくらいユニークであると色を使う人同士でのコミュニケーションでの齟齬、イメージのズレが少なくなりそうだ。

外観からの命名ではなく、セマンティックに名前を与えるパターンもある。例えば「primary」という定義が存在し、その基準色には「_base」というサフィックスを与え、明るい（軽い）・暗い（重い）といった色調には「_light」、「_heavy」「_dark」のように与える。
こうした相対的に形容して命名した場合の欠点としては、この段階に当てはまらない色が必要になった場合の命名が悩ましいことだ。色々なデザインシステムを渡り歩いてみると「lighter」「lightest」のように階層を少し増やしているケースもある。
UXPinの場合は「lighten-10（10%明るい）」「darken-15（15%暗い）」という命名にしており、これだと展開にはある程度困らなくなる。もちろんこれは秩序を持って管理される前提であり、その時々に議論なく「必要だから」と増やしてけば破綻してしまうので気をつけたほうがいい。

また別の考え方としては、「button_primary_base」のように機能的な名前をつけてしまうことだ。例えばこれはボタンの背景色「button_primary_base」とラベルの文字色（前景色）「button_primary_text」との組み合わせをセットにして扱うことを前提とする。

組み合わせにする理由は、背景色と前景色とのカラーコントラスト比を守るためだ。WCAG2.0 のコントラストに関する項目における4.5:1という比率を基準にして配色を決める前提で、それを使う側が壊さないようにするということ。それを色に対する命名によって制御する。

もしSassのようなツールを使っているならば、mixinで背景色と前景色の組み合わせを関数のように用に使わせることができる。変数と組み合わせ例を明示する。

/**
 * Sass
 */ 

// 色を定義する
$color_primary: #155AEE;
$color_primary_light: #4D82F3;
$color_primary_heavy: #114CCA;

// 定義した色を、さらに機能的な定義に与える
$button_primary_base: $color_primary;
$button_primary_hover: $color_primary_light;
$button_primary_active: $color_primary_heavy;
$button_primary_text: #FCFDFD;

// Mixin
@mixin button_primary_color {
  background-color: $button_primary_base; // 背景色
  color: $button_primary_text; // 文字色（前景色）
  &:hover {
    background-color: $button_primary_hover;
  }
  &:active {
    background-color: $button_primary_active;
  }
}

// 使うときにincludeする
.button {
  @include button_primary_color;
}

/**
 * コンパイルされたCSS
 */ 

.button {
  background-color: #155AEE;
  color: #FCFDFD;
}
.button:hover {
  background-color: #4D82F3;
}
.button:active {
  background-color: #114CCA;
}

もちろんこのやり方がいわゆる銀の弾丸、ではない。さまざまな命名パターンを踏まえ、長所短所を見極めて、チームにフィットしたルールを選びのがいい。

カラーパレットを運用する上で重要なことは次のように考えている。

・パレットで定義した色以外は使わない
・共通言語として扱いやすい名前にする
・コントラスト比を保つ工夫をする

またこれらはひとりの人間が独断で決め、トップダウン的にやるのではなく、いくつかの命名規則パターンで触れたように、チームにとって良い方法を選ぼう。というか選んでいきたい。

スライド（Speakerdeck）

おまけ

一緒に登壇したesaのﾄﾘと、KitchHikeのもぐもぐ。