UI/UXデザイナーのための「色」活用ガイド。色選び基礎からツール活用方法まで

色は、製品やサービスの印象に影響を与える、UI/UXデザインにおいて重要な要素のひとつです。

本記事では、初心者からプロのUI/UXデザイナーまで参考にできる「色の活用ガイド」をご紹介します。

基本的な仕組みやテクニックを理解して、色のもつ力を最大限引き出しましょう。

色の表現方法とそれぞれ用途

▲出典：UX Planet

色にはさまざまな表現方法（規格）があります。なかでも一般的なのが「Pantone」「CMYK」「RGB」「RGBA」「HEX」です。

まずは、それぞれの表現方法がどのような用途で使われるのかを確認しておきましょう。

1. Pantone

▲出典：Pantone

Pantoneは、インクの混合方法によって色を指定する、世界共通の表現方法です。おもに印刷物の色指定に使用されます。

ロゴやブランドエレメントなど、異なるメディア間で色を統一させる必要がある場合に使用されるケースが多いです。

2. CMYK

▲出典：UX Planet

CMYKは、「シアン（Cyan）」「マゼンタ（Magenta）」「イエロー（Yellow）」「キープレート（Key Plate）」の混合による表現方法です。

CMYKもPantoneとおなじく、おもに印刷物の色指定に使用されます。業務用プリンターだけでなく、家庭用プリンターもCYMKに対応しています。

▲出典：UX Planet

3. RGB

▲出典：UX Planet

RGBは、「赤（Red）」「緑（Green）」「青（Blue）」の混合による表現方法です。おもにUI/UXデザインなどに使用されます。

PantoneやCYMKがインクの混合によって色を指定するのに対し、RGBに使われるのは光の3原色です。そのため、PCやスマートフォンなどの光る画面をとおして見るデジタルデザインには、おもにRGBが使用されます。

なおRGBで作った色を印刷しても、デジタル上で見た色にはなりません。これは、色を表現するシステムが異なるためです。

▲出典：UX Planet

RGBにおける最小値は0、最大値は255です。すべての値を255にすると白、逆に0にすると黒になります。

4. RGBA

▲出典：UX Planet

赤、緑、青の混合で色を表現するRGBに、透明度を指定する「アルファ（Alpha）」という項目を加えたのが、RGBAです。RGBとおなじく、UI/UXデザインなどに使用されます。

アルファの最小値は0.0、最大値は1.0で、数値が大きいほど不透明になります。たとえば、透明度が50%の白を作りたい場合、R、G、B、Aの値はそれぞれ255、255、255、0.5です。

5. HEX

▲出典：UX Planet

UI/UXデザインにとくにおすすめなのが、6桁の16進数で色を表現する、HEXです。

HEXはRGBを短縮した表現方法なので、RGBとの色の差異は発生しません。RGBよりも表記が簡単なのが特徴です。

HEXの一番前にはかならず「#」がつき、そのすぐあとの2桁がRGBのR、つぎの2桁がG、最後の2桁がBにあたります。

色の表現方法を変換できるツール

「印刷物における色」と「デジタル上の色」は、それぞれ色を表現する仕組みが異なります。そのため一見似たような色に見えても、完全には一致しません。

色の表現方法を変換したい場合には、オンラインツールを活用しましょう。

Pantone公式のオンラインツールを使用すれば、RGBやCMYKを簡単にPantoneカラーに置き換えられます。

▲出典：UX Planet

左側のメニューから「RGB/CMYK/HEX」を選択して値を入れると、Pantoneカラーを提案してくれます。

逆にPantoneカラーをRGB、CMYK、HEXに変換したい場合、左側のメニューから「Pantone to Pantone」を選択し、色を検索して指定しましょう。

デジタルで製作したデザインを印刷する場合は、Pantoneの色見本帳を使うのもおすすめです。

UI/UXデザインの色選びガイド

色数の制限

▲出典：UX Planet

UI/UXデザインには、技術的な意味での色の制約はありません。

しかし技術的制約がないからといって、ひとつのデザインに無計画に色を詰め込むのは避けましょう。基本的に、色数は2〜3種類に絞るのがおすすめです。

色の組み合わせ

▲出典：UX Planet

ここからは、カラーホイールを使った基本的な色の組み合わせかたをご紹介します。

カラーホイール自体はAdobeの公式サイトなどでも提供されているので、ぜひ活用してみてください。

単色（Monochrome）

▲出典：UX Planet

ホイールの外側から内側にむかって色を選ぶと、繊細で洗練された印象を与えられます。

類似色（Analogous）

▲出典：UX Planet

隣接する色を組み合わせると、エレガントさを保ちつつ、すこしダイナミックな印象を与えられます。選ぶ色の角度を、カラーホイール上で90度以内に保つのがポイントです。

補色（Complementary）

▲出典：UX Planet

色に幅をもたせたいなら、思い切ってカラーホイールの反対側の色を組み合わせてみましょう。さらに、上の例のようにモノクロームカラーを加えるのもおすすめです。

分割補色（Split Complementary）

▲出典：UX Planet

補色に類似色を加えると、さらに色の幅が広がります。鮮やかなカラーパレットを作りたい場合におすすめです。

色相、彩度、濃淡、色調で遊んでみる

お気に入りの色を見つけたら、彩度（Tint）、濃淡（Shade）、色調（Tone）などを調整してみましょう。

▲出典：UX Planet

色相（Hue）

彩度や濃淡などを調整していない、純粋な色。カラーホイールの外周部分の色がこれにあたります。

彩度（Tint）

カラーホイールの外側の色に、白を加えた色。

濃淡（Shade）

カラーホイールの外側の色に、黒を加えた色。

色調（Tone）

カラーホイールの外側の色に、グレーを加えた色。

カラーパレットツールで色を深掘り

さらに色を深掘りしたいなら、マテリアルデザインカラーパレットのようなツールを使ってみましょう。

▲出典：Material design color palettes

丸く切り取られた色の上に「P」と書かれている理由は、テキストの可読性を確認するため。暗い色になると、「P」の色が自動的に白に切り替わります。

▲出典：UX Planet

右側のメニューからHEXで色を指定すると、色のコントラストを作ってくれます。ひとつのデザインに対して、9個ほどまで使っても問題ないでしょう。必ずしも隣接した色を使う必要もありません。

デザインにあわせてコントラストを選んでみましょう。

Figmaのプラグイン

Figmaには『Color Shades』というプラグインがあります。Figmaを使っているなら、ぜひ活用してみましょう。

▲出典：Figma Community

UI/UXデザインにおける色情報の整理

色に名前をつけよう

UI/UXデザインに使う色を決めたら、名前をつけましょう。

「赤」や「青」といった名称ではなく、他人がみても共通認識をもてるように記載するのがポイントです。

▲赤線がひいてあるような、「ダークグレー」「グレー」といった曖昧な名前はNG（出典：UX Planet）

説明的で、かつ一貫性がある名前が理想的です。たとえば、「ダークグレー」は「ニュートラル」に、「オレンジ」はメインカラーを指す「プライマリー」に置き換えられます。

先述のマテリアルデザインカラーパレット等で制作したコントラストにも、名前をつけていきましょう。このとき役に立つのが、数字です。

▲出典：UX Planet

マテリアルデザインカラーパレットでは、「900」や「700」など100単位で名前がついていますが、10単位でも問題ありません。

ベースの色に「500」や「50」のような名前をつけ、それより薄い色や濃い色を必要に応じて作り、名前をつけていくのがおすすめです。

あとからバリエーションを追加したくなる可能性を考慮して、「3」や「8」など1単位で名前をつけるのは避けましょう。

▲出典：UX Planet

「エラー」「警告」「情報」「成功」などをあらわす色も必要です。

「エラー」は赤、「警告」はオレンジ、「情報」は青、「成功」は緑を使うのが一般的ですが、ブランドカラーにあわせて調整するのもいいでしょう。

ただし、エラーに関してはブランドカラーにかかわらず、赤にしておくのが無難です。

背景色に対応した文字色を把握しておく

タイポグラフィやアイコンなど、特定の色に対して重ねられる色（on-colour）をきちんと把握しておきましょう。これには、2つの利点があります。

▲画面上部の色を背景にした場合、画面下部の色がon-colorにあたる（出典：UX Planet）

利点その1. アクセシビリティの確保

オンラインのコントラストチェックツールなどを使えば、視認性が高い色の組み合わせを簡単に確認できます。

Webサイトやアプリを作るなら、アクセシビリティの確保は欠かせません。

▲出典：UX Planet

利点その2. 色の置き換えによる混乱防止

たとえば、Webサイト全体のアクセントをダークグレーで統一するとします。ダークグレーの上に重ねられるon-colorは、黒ではなく白です。

on-colorが何色かを把握しておけば、色を変更する必要が生じたとき、どの色ならそのまま置き換えられるのかが明確です。

この場合はon-colorが白のため、ダークグレーをうすい青などに置き換えるのはNGです。

覚えておきたい「60-30-10ルール」

▲出典：UX Planet

デザイン全体に対して、ベースカラー60%、プライマリーカラー30%、そしてCTAボタンなどのアクセントに使うセカンダリーカラー10%という割合を、目安として覚えておきましょう。

ルールといっても、厳密に遵守する必要はありません。似た色などをまとめて柔軟に捉え、割合を意識してみるのがおすすめです。

▲出典：UX Planet

この例からもわかるように、CTAボタンなどに使うセカンダリーカラーを10%程度に絞ると、自然とその部分に目がいきます。

おわりに

UI/UXデザインの色選びに役立つのは、センスだけではありません。テクニックや法則、そして便利なツールを活用すれば、センスに自信がなくてもクオリティの高いカラーパレットを制作できます。

色選びでつまづいているなら、まずはルールに従って色を選び、配置し、整理してみましょう。そこから発揮すべきオリジナリティや、自分なりのセンスが見えてくるかもしれません。

（執筆：Christine Vallaure　翻訳：中島あすか　編集：泉　提供元：UX Planet）