こんにちは、デザイナーの西山 将平（@24sy___）です。
個人でWebサイトをいくつか実装した経験があり、現段階で修正にも強く使いやすいUI Colorの命名規則についてまとめました。
本記事では、僕が普段活用しているオリジナルの「Color System」とUI Colorの命名規則をシェアしたいと思います。もしあなたが丁度UIの配色に悩んでいるなら、きっと参考になると思います。
UberやShopifyなど多くの有名企業が様々なサービスでデザインシステムを公開していますが、配色に関しては数が多すぎてあまり参考にならないこともあります。
そのため、実務でも使用できるようにルールを簡単にしたオリジナルの「Color System」を定義することにしました。
この記事では、以下の4つのことについてご紹介していくので、少しでも参考になれば幸いです。
サービスのブランドカラー、メインカラー。配分は25％。
アクティブなプライマリーボタン、ヘッダーなどのメインのUI要素に使用します。ホバー、フォーカス時には色のトーンを変えて使用することがあるので、デフォルトの色とトーンの違いで1〜2種類用意しておくと良いと思います。
テーマカラーを決める際は、メインとサブの2色をまず決めて、残りはUI要素が多くなった際に決めることで、色数を抑えて美しい配色になるように心がけています。
UIのベースカラー。配分は70％。
文字、線、背景などベースとなるUI要素に使用します。
ベースカラーは、グレースケールカラーの命名規則に沿って設定していきます。
このとき、サービスに合った色味のあるグレーにするために、テーマカラーに合わせて「青味のあるグレーや、緑味がかったグレー」などを採用すると、統一感のある印象にできると思います。
ボーダーと無効状態の色は他のグレーとは違う色で表現することが多いので、グレーだけUI要素ごとの分類も用意してUIカラーを決めていきます。こうすることで、自由度が高くグレーの色味を選択でき、ページ数が増えても対応できるのでオススメです。
アテンションに関するUIに使用するカラー。配分は5％。
バナーや、削除ボタン、エラー表示などアクセントのUI要素に使用します。
アテンションカラーは、ユーザーに広く認識されている色を使い、なるべく変わった色を使わないように気をつけます。
SUCCESSはグリーン系の色、INFOはブルー系の色、ERRORはレッド系の色、アラートはイエロー系を使用するなど。
メインカラーがレッド系やグリーン系などの場合、一部のアテンションカラーと似たような色になるので、できる限り明度や彩度を変えて差をつけることで対応します。
UI要素の上に被せるときに使用するカラー。
モーダルの背景や、写真の上に文字を乗せたいときに使用します。
こちらの色は個別に設定するか、グレースケールカラーから抜粋して、不透明度を調整した色を使用することが多いです。
ドロップシャドウ。
CSSでは色とドロップシャドウは個別に設定をするので、分けて使用します。
よくある命名規則で、「形容詞 色 透明度の順番で、「PaleBlack15」のように表現することがあり、透明度の記載があると分かりやすいのですが、後々色を変更したい場合に非常に修正がしにくいので、具体的な数値を設定しない方が良いかと思います。
また、ドロップシャドウの中でも色ごとの優先度を設定してあげると、UI要素の種類に合わせて使用できるので、使いやすいです。
主にサービスで使用する「テーマカラーの優先度」を表す際に、使用します。
テーマカラーなどを1色決めたとしても、状況によってはトーン違いで使用したい場合があるので、それぞれ6種類のトーンで表現しました。
トーン数はあまり多くすると複雑になってしまうので、代表的なトーンを一部抜粋して使用しております。
他にも定義したい場合は、以下の日本カラーデザイン研究所のトーン一覧表から、トーンを定義すると良いと思います。
サービスイメージに合わせて色を定義するグレースケールカラーのことを指します。
ブルーがテーマカラーの場合は、少し青みがかったグレーを使用すると馴染みやすいので、サービスのテーマカラーと合わせてグレースケールカラーも調整すると良いですね。
ベースカラーがビビットなものでも、トーン違いで定義しておくと、フォームなどグレースケールカラーを多用するシーンで使いやすい色になります。
サービスごとに色を定義せず、基本となるグレースケールカラーを指します。
サービスのブランドカラー、メインカラー。オリジナルのColor Systemでは、「PRIMARY」で表せます。
中間色である「500番」前後の色を使うことが推奨されているので、この色の範囲でプライマリーカラーを設定するのが良いとされています。
（ ※ この500という数字は「色の明るさ」を表すものです。100に近いほど明るい色、900に近いほど暗い色になります。）
プライマリーカラーの補助として使用する色です。オリジナルのColor Systemでは、「PRIMARY_DEEP / PRIMARY_PALE」で表せます。
プライマリーカラーと同じ色合いで、「深い色と淡い色」をそれぞれ設定しておきます。
目立たせたい時に使うカラーです。オリジナルのColor Systemでは、「SECONDARY」で表せます。
重要なボタンなどに使用すると効果的なので、アクセントなので目立たせたいカラーを選びます。
プライマリーカラーとは異なるカラー相性の良さそうなカラーを選ぶことで、全体のバランスを保ちます。こちらも500番前後の鮮明なカラーがおすすめです。
セカンダリーカラーの補助として使用する色です。オリジナルのColor Systemでは、「SECONDARY_DEEP / SECONDARY_PALE」で表せます。
セカンダリーカラーと同じ色合いで、「深い色と淡い色」をそれぞれ設定しておきます。
ライトモードの場合は高さを「Shadow」によって表現していました。それをダークモードでは「色」で表現します。
具体的には、ダークモードでは高さが上になるほど光源に近づくため、「Shadowを使わず、上のレイヤーにあるエレメントを明るくする」という考え方になります。
ダークモードは、真っ黒（#000000）や真っ白（#FFFFFF）はどうしてもコントラストが強くなりすぎて目が疲れやすくなってしまうので、 グレーの濃淡をうまく使って色の設計をしていきます。
事例として、Twitterはブランドカラーの水色をうまく反映したダークモードの背景色を使用していて、うまくブランドの印象を保っているので、参考にしたいですね。
Webで実装する際には、CSS変数を使用して、ライトモードとダークモードで色を制御すると簡単です。
以下のコードで実装可能なので、まだダークモードを実装していない方は試してみてください！
:root {
--BASE: #222222;
--BASE_DEEP: #555555;
}
@media (prefers-color-scheme: dark) {
:root {
--BASE: #FFFFFF;
--BASE_DEEP: #EEEEEE;
}
}
最後に今回参考にした記事を集めたので、ご紹介します。
1997年兵庫県生まれ。関西学院大学理工学部に在学中、デジタルハリウッド本科UI/UXD専攻に入学。1年間のWスクールを経て、2020年にAID-DCC inc. 入社。Web制作から体験型コンテンツまで様々なプロジェクトに関わる。現在は、PLAID inc. にてデザイナーとして活動中。ユーザー起点のデザインが得意。
デジタル領域のサービスのプロダクトデザインを中心としたデザイン業務を、随時お受けしています。お仕事のご依頼・クリエイティブに関するご相談など、お気軽にお問い合わせ下さい。
通常3日以内にご返信いたします。
