こんにちは、Link-UのUIチームです。

UIを設計する際のカラー決めはどのように決めていますか？

画面の雰囲気？バランス？適当な数値で決めていいの…？と悩んでいた時に調べていると、LChカラーモデルを利用したツールで構築するカラーパレットの記事を見つけました。

今回はこちらの記事を参考に
実際にカラーパレットを作ってみたら作業効率が上がった話《前編》です。

まず”LCh”に聞き馴染みがなかったため調べてみました。

LCh カラーモデルとは

LChはL：明度（Lightness）　C：彩度（Chroma）　h ：色相（hue）を表していて、人間の目の特性を考慮した設計がされているそうです。

UIデザインに有効的なカラーモデルなのでは…！

カラーパレットを作ってみる

早速、実際に作ってみました。

今回はメインカラーを#3CB88Bと設定し、この色を軸として明度・色相を展開していきます。

1.縦軸（明度違いの色）

LCh color Wheelの１段目の左(明度)の数値を10段階(10%,20%　…　80%,90%,95%)で入力し、一番下のカラーコードを都度コピー。

今回のカラーの基準となる67.4%は小数点切り捨ての四捨五入で70%としています。

2.横軸(色相違いの色)

次は１段目の一番右(色相)の数値を20ずつ調整。
色相も明度同様に基準となる163.7は小数点切り捨ての四捨五入で160としています。

0〜350までの色相を展開したので、それぞれ明度のグラデーションを作りパレットを埋めます。

3.近しい色を削除して黒とエラーを追加してFIX

オレンジ・青系が近い色が多かったため色数を整理します。
エラーの色は色相を20→25、彩度を44→55に調整しました。

これで#3CB88Bを基準としたカラーパレットの完成です！

カラーパレットを作ってみた所感

• 数値で定義された論理的根拠がある安心感がある

• 明度・色相の調整が手入力のため少し手間はかかるが、単純作業なので慣れてくると1時間程度で作れる

当初、デザインをしながら色調整をすることが多かったため
この色、なんだか全体のトーンと合っていないなぁ…なんてこともよくありました。

ですがカラーパレットを活用し始めてからは、
ベースとなる色があるので、全体のトーンがブレることもなく安心して作業を進行できています。

おわりに

カラーパレットを作ってからデザインしたら
色で迷う時間が減り、よく起こりがちな膨大な数のグレーに悩まされることもなく、無駄な時間を省いてデザインを完成させることができました！
※カラーパレットの色が全てではなく、ここから多少調整は必要です。


以前の私と同じように感覚的に色を決めてしまいがちな方や、色の指定方法に悩んでしまう方にぜひ実践していただきたいです。

さて、
前編ではカラーパレットの作り方を理解できたので、後編ではUIデザイン実践編をお届けします。

今回作ったカラーパレットを実際にどう活用していくのか、各パーツにどう落とし込んでいくのか解説していきます。
どうぞお楽しみに！

またLink-U クリエイティブチームでは一緒にサービスを作っていくデザイナーを募集しています。
少しでも興味を持ってくださった方、もっと詳しく知りたいと思ってくださった方はぜひこちらのリンクからご連絡ください。

募集中の職種（※2023/9/29時点）

• 24年新卒採用 : デザイナー( UIデザイナー / UXデザイナー / グラフィックデザイナー )