カラーパレット | 1人design system advent calender 5日目
1日目から4日目まで、デザインシステムの構成要素やInterface Inventoryなどを対象にして、デザインシステムの全体像の把握や必要性について書いた。 5日目からはデザインシステムの構成要素それぞれについて見ていく。5日目は、カラーパレットについて。
デザインシステムにおいて、カラーパレットはどうやって作って管理していくか。
使用している全ての色を洗い出す
Interface Inventoryでプロダクト全体のUIパーツを洗い出す過程で同時に行っても良さそうだけど、CSSやSassなどのプリプロセッサで定義されているカラーコードをすべて洗い出すことを最初に行う。これを行うことでどれだけの色がプロダクトで使用されているか把握できる。CSSやSassで使われているカラーコードがすべて1つの場所で定義した変数から利用されているようなケースであれば、すぐに全てのカラーコードを出せるだろうけど、そういう状態になってないことはよくあることだと思う。1つのファイルにカラーコードの変数定義がまとめられてなかったり、場所によっては変数を用いることなくハードコーディングされたカラーコードが使われてたり、同じカラーコードを複数の変数で定義していたり。
まずはそれらのカラーコードをスプレッドシートなどでリストにして、全体像を把握できる状態をつくる。これによって、不要なカラーコード、重複してる変数、統一可能な色が発見できたりするはず。
ベースカラーを決める
全てのカラーコードを洗い出したら、ベースカラーの選定を行う。ベースカラーの数はプロダクト次第で変わってくると思うけど、UXPinでは以下の8色ベースカラーとしている。
#006CFFBlue (main brand color)#666666Gray#FF003CRed (error & danger color)#63ad0eGreen (success color)#ffc000Orange (warning color)#7800ffViolet#ff56b1Pink#00ffdeMint
頻繁に使用する色、もしくは重要度の高いと判断できる色をベースカラーに含めると良さそう。
アクセントカラーを決める
アクセントカラーの決め方は2つあり、任意のカラーコードを出すか、Sassなどのプリプロセッサの関数を用いてベースカラーから派生させるか。
darken($base_blue, 10%)
開発者側からするとパーセント指定の方が管理しやすいけど、プリプロセッサの関数を用いる場合プリプロセッサ側のHSLとSketchなどのデザインツール側のHSBの差異の問題があることで、デザイナー側には扱いにくいものになりうることに留意する必要があるらしい。
理解しやすい名前をつける
ベースカラーとアクセントカラーが決定したら、それらの名前を適切につけていく。命名手法としては、利用するUIパーツに即した名前をつけるやり方、数字をふるやり方、それらを組み合わせたものなど。他のデザインシステムを参考にしてプロダクトに適切と思われる命名をする。
a11y
命名まで終わったら、最後にアクセシビリティの観点で問題ないかチェックする。Web Content Accessibility Guidelines（WCAG）によってコントラストに関するアクセシビリティガイドラインが定義されていて、オンライン上のチェックツールとして以下のようなものがある。
3日の遅れが発生してるけど、、5日目はカラーパレットについて書いた。 6日目はタイポグラフィについて。
