概要
これまでUIデザインを制作する際、色の選択をHexコードで、かつ感覚的に選んでいました。しかし、こういった色の使い方をしていると
「ユーザー導線が散らばってしまっている」
「デザインが上手くまとまらない」
など、UIデザインとしてどうなんだろう…？と感じる場面が多々ありました。
そんな中、HexではなくHSLという色空間で色を選択すると、感覚ではなく理論立てて色を選べることを知りました。
そこで、過去の私のように「なんとなくHexで感覚的に色を選んでしまっている…」といった方向けに、UIデザインにおける色の使い方について共有したいと思います！
HSLとHexの違い
Hexは聞き馴染みがある方も多いかと思いますが、赤・緑・青の3色の比率を16進数で示したコードです。（黒：#000とか、白：#FFFのやつですね！）
一方、HSLはHue（色相）、Saturation（彩度）、Lightness（輝度）の3つの要素から構成される色空間のことです。
「色空間」というのは、X軸・Y軸・Z軸からなる色の空間だとイメージしていただくと分かりやすいと思います。
以下からは、Hue（色相）、Saturation（彩度）、Lightness（輝度）の解説を実際に色を作りながらお伝えします。
実際にHSLで色をつくりながら、各要素の役割を覚える
Hue（色相）：【何色っぽくするか】を決める要素。
- S（彩度）,L（輝度）が共通の時、 Hが0に近づくほど赤くなる
- H（色相）の設定値は0〜359まで。360＝0と同じになる（1周して、赤に戻るイメージ）
Saturation（彩度）：【鮮やか】【グレーっぽい】を決める要素。
- S（彩度）の設定値はMax100〜Min0まで。100に近づくとパキッとした色になり、反対に0に近づくと無彩色のグレーになっていく。
Lightness or Luminance（輝度）：【白っぽい】【黒っぽい】を決める要素。
- L（輝度）の設定値はMax100〜Min0まで。100に近づくと白っぽい色になり、反対に0に近づくと黒っぽい色になっていく。
ちなみに、私自身は初めのうち「S（彩度）を調整してグレーっぽくなっていくのと、L（輝度）で黒っぽくなっていくものの違いが分かりにくいな…」と感じていました。
したがって、L（輝度）の調整は、絵の具の色づくりにおける【白を混ぜる】【黒を混ぜる】に近い調整だ、と覚えると違いが分かりやすくなります！
（実際にHexのコードを確認してみると、L:100 = #FFF, L:0 = #000になっています）
HSLで色を決めるメリット
見慣れたHexではなく、HSLで色を決めることで感じたメリットを紹介します。
感覚に頼らずに、色を調整することができる
Hexのカラーコードを見ただけでは、その色が【明るめの赤】【鮮やかな青】なのか判断がしにくいかと思います。
一方で、HSLは各要素の数値を見ただけでどんな色なのか？が想像しやすく、かつ調整しやすいのが特徴です。
- 「明るめの赤を暗くしたい」なら、L（輝度）を調整する
- 「鮮やかな青を落ち着いた色にしたい」なら、S（彩度）を調整する
といった感じです。
簡単に色の統一感を出すことができる
主要な色を1つだけ決めて、あとはその色を軸にして色を展開していくだけで簡単に色の統一感を出すことができます。
先ほど掲載した色のように、
- S（彩度）のみ調整した色
- L（輝度）のみ調整した色
といった感じで、ベースを青にしてから複数色展開した色を使うだけで、ある程度の統一感が出ているかと思います。
こうした統一感をHexで指定しようとすると、色の鮮やかさ/明るさの調整がどうしても感覚になってしまいます。従って色の統一感が出にくかったり、統一感があるように見えても実際にはわずかに違和感を覚える配色になってしまう可能性もあるため、HSLを使って配色を決めるのが良いのではないかと思います。
次回予告：ジャッドの色彩理論
次回は、HSLを使いながら「統一感のある配色の作り方」について書いていきます！
Discussion