【漫画】フリーランスは“103万円の壁”にどう向き合うか?
- お金
- フリーランス/個人事業主
- 漫画
色は、製品やサービスの印象に影響を与える、UI/UXデザインにおいて重要な要素のひとつです。
本記事では、初心者からプロのUI/UXデザイナーまで参考にできる「色の活用ガイド」をご紹介します。
基本的な仕組みやテクニックを理解して、色のもつ力を最大限引き出しましょう。
色にはさまざまな表現方法(規格)があります。なかでも一般的なのが「Pantone」「CMYK」「RGB」「RGBA」「HEX」です。
まずは、それぞれの表現方法がどのような用途で使われるのかを確認しておきましょう。
Pantoneは、インクの混合方法によって色を指定する、世界共通の表現方法です。おもに印刷物の色指定に使用されます。
ロゴやブランドエレメントなど、異なるメディア間で色を統一させる必要がある場合に使用されるケースが多いです。
CMYKは、「シアン(Cyan)」「マゼンタ(Magenta)」「イエロー(Yellow)」「キープレート(Key Plate)」の混合による表現方法です。
CMYKもPantoneとおなじく、おもに印刷物の色指定に使用されます。業務用プリンターだけでなく、家庭用プリンターもCYMKに対応しています。
RGBは、「赤(Red)」「緑(Green)」「青(Blue)」の混合による表現方法です。おもにUI/UXデザインなどに使用されます。
PantoneやCYMKがインクの混合によって色を指定するのに対し、RGBに使われるのは光の3原色です。そのため、PCやスマートフォンなどの光る画面をとおして見るデジタルデザインには、おもにRGBが使用されます。
なおRGBで作った色を印刷しても、デジタル上で見た色にはなりません。これは、色を表現するシステムが異なるためです。
RGBにおける最小値は0、最大値は255です。すべての値を255にすると白、逆に0にすると黒になります。
赤、緑、青の混合で色を表現するRGBに、透明度を指定する「アルファ(Alpha)」という項目を加えたのが、RGBAです。RGBとおなじく、UI/UXデザインなどに使用されます。
アルファの最小値は0.0、最大値は1.0で、数値が大きいほど不透明になります。たとえば、透明度が50%の白を作りたい場合、R、G、B、Aの値はそれぞれ255、255、255、0.5です。
UI/UXデザインにとくにおすすめなのが、6桁の16進数で色を表現する、HEXです。
HEXはRGBを短縮した表現方法なので、RGBとの色の差異は発生しません。RGBよりも表記が簡単なのが特徴です。
HEXの一番前にはかならず「#」がつき、そのすぐあとの2桁がRGBのR、つぎの2桁がG、最後の2桁がBにあたります。
「印刷物における色」と「デジタル上の色」は、それぞれ色を表現する仕組みが異なります。そのため一見似たような色に見えても、完全には一致しません。
色の表現方法を変換したい場合には、オンラインツールを活用しましょう。
Pantone公式のオンラインツールを使用すれば、RGBやCMYKを簡単にPantoneカラーに置き換えられます。
左側のメニューから「RGB/CMYK/HEX」を選択して値を入れると、Pantoneカラーを提案してくれます。
逆にPantoneカラーをRGB、CMYK、HEXに変換したい場合、左側のメニューから「Pantone to Pantone」を選択し、色を検索して指定しましょう。
デジタルで製作したデザインを印刷する場合は、Pantoneの色見本帳を使うのもおすすめです。
UI/UXデザインには、技術的な意味での色の制約はありません。
しかし技術的制約がないからといって、ひとつのデザインに無計画に色を詰め込むのは避けましょう。基本的に、色数は2〜3種類に絞るのがおすすめです。
ここからは、カラーホイールを使った基本的な色の組み合わせかたをご紹介します。
カラーホイール自体はAdobeの公式サイトなどでも提供されているので、ぜひ活用してみてください。
ホイールの外側から内側にむかって色を選ぶと、繊細で洗練された印象を与えられます。
隣接する色を組み合わせると、エレガントさを保ちつつ、すこしダイナミックな印象を与えられます。選ぶ色の角度を、カラーホイール上で90度以内に保つのがポイントです。
色に幅をもたせたいなら、思い切ってカラーホイールの反対側の色を組み合わせてみましょう。さらに、上の例のようにモノクロームカラーを加えるのもおすすめです。
補色に類似色を加えると、さらに色の幅が広がります。鮮やかなカラーパレットを作りたい場合におすすめです。
いまさら聞けない!カラーホイールの使い方と色の基本原則
Workship MAGAZINE
お気に入りの色を見つけたら、彩度(Tint)、濃淡(Shade)、色調(Tone)などを調整してみましょう。
彩度や濃淡などを調整していない、純粋な色。カラーホイールの外周部分の色がこれにあたります。
カラーホイールの外側の色に、白を加えた色。
カラーホイールの外側の色に、黒を加えた色。
カラーホイールの外側の色に、グレーを加えた色。
さらに色を深掘りしたいなら、マテリアルデザインカラーパレットのようなツールを使ってみましょう。
丸く切り取られた色の上に「P」と書かれている理由は、テキストの可読性を確認するため。暗い色になると、「P」の色が自動的に白に切り替わります。
右側のメニューからHEXで色を指定すると、色のコントラストを作ってくれます。ひとつのデザインに対して、9個ほどまで使っても問題ないでしょう。必ずしも隣接した色を使う必要もありません。
デザインにあわせてコントラストを選んでみましょう。
Figmaには『Color Shades』というプラグインがあります。Figmaを使っているなら、ぜひ活用してみましょう。
UI/UXデザインに使う色を決めたら、名前をつけましょう。
「赤」や「青」といった名称ではなく、他人がみても共通認識をもてるように記載するのがポイントです。
説明的で、かつ一貫性がある名前が理想的です。たとえば、「ダークグレー」は「ニュートラル」に、「オレンジ」はメインカラーを指す「プライマリー」に置き換えられます。
先述のマテリアルデザインカラーパレット等で制作したコントラストにも、名前をつけていきましょう。このとき役に立つのが、数字です。
マテリアルデザインカラーパレットでは、「900」や「700」など100単位で名前がついていますが、10単位でも問題ありません。
ベースの色に「500」や「50」のような名前をつけ、それより薄い色や濃い色を必要に応じて作り、名前をつけていくのがおすすめです。
あとからバリエーションを追加したくなる可能性を考慮して、「3」や「8」など1単位で名前をつけるのは避けましょう。
「エラー」「警告」「情報」「成功」などをあらわす色も必要です。
「エラー」は赤、「警告」はオレンジ、「情報」は青、「成功」は緑を使うのが一般的ですが、ブランドカラーにあわせて調整するのもいいでしょう。
ただし、エラーに関してはブランドカラーにかかわらず、赤にしておくのが無難です。
タイポグラフィやアイコンなど、特定の色に対して重ねられる色(on-colour)をきちんと把握しておきましょう。これには、2つの利点があります。
オンラインのコントラストチェックツールなどを使えば、視認性が高い色の組み合わせを簡単に確認できます。
Webサイトやアプリを作るなら、アクセシビリティの確保は欠かせません。
たとえば、Webサイト全体のアクセントをダークグレーで統一するとします。ダークグレーの上に重ねられるon-colorは、黒ではなく白です。
on-colorが何色かを把握しておけば、色を変更する必要が生じたとき、どの色ならそのまま置き換えられるのかが明確です。
この場合はon-colorが白のため、ダークグレーをうすい青などに置き換えるのはNGです。
デザイン全体に対して、ベースカラー60%、プライマリーカラー30%、そしてCTAボタンなどのアクセントに使うセカンダリーカラー10%という割合を、目安として覚えておきましょう。
ルールといっても、厳密に遵守する必要はありません。似た色などをまとめて柔軟に捉え、割合を意識してみるのがおすすめです。
この例からもわかるように、CTAボタンなどに使うセカンダリーカラーを10%程度に絞ると、自然とその部分に目がいきます。
UI/UXデザインの色選びに役立つのは、センスだけではありません。テクニックや法則、そして便利なツールを活用すれば、センスに自信がなくてもクオリティの高いカラーパレットを制作できます。
色選びでつまづいているなら、まずはルールに従って色を選び、配置し、整理してみましょう。そこから発揮すべきオリジナリティや、自分なりのセンスが見えてくるかもしれません。
(執筆:Christine Vallaure 翻訳:中島あすか 編集:泉 提供元:UX Planet)
これだけでデザインがキマる!Webサイト&アプリにおける色の組み合わせ4選
Workship MAGAZINE
“色相シフト法”でワンランク上のカラーパレットを作ってみよう
Workship MAGAZINE
モネやゴッホに力を借りよう。歴史的絵画をベースにしたカラーパレット13選
Workship MAGAZINE