【MBTI診断】16タイプ別・フリーランスに向いてる仕事/働き方
- コラム
- フリーランス/個人事業主
- 働き方
UIデザインにおいて、配色に関する知識が重要なことはあなたもご存知かもしれません。「補色」「コントラスト」「同時対比」など、配色理論は研究が進められており、色の組み合わせが人間に与える印象も明らかになっています。
しかし、たとえ配色理論の基礎を知っていたとしても、その理論を効果的にアプリUIに応用できるとは限りません。知識があることと、優れたデザインを実装できることは、イコールではないのです。
そこで今回は、アプリUIをデザインする際に役立つ配色理論と、理論をUIデザインに応用する方法を解説します。
目次
アプリUIをデザインする際には、とにかくカラフルにすることがデザインと思われがちです。しかし重要なのは「シンプルさ」。たくさんの色を使うのではなく、1〜2色のベースカラーを決め、そこから派生した色を使うのがおすすめです。
もし3色を使いたいなら、一歩間違えると色がごちゃごちゃしてしまうリスクがあるため、以下のようなルールを設定するといいでしょう。
なお、ベースカラーを暗くしたカラーを使いたい場合、明るさを下げて、彩度を高くするのがいいでしょう。反対に、明るい色のバリエーションを増やす際には、明るさを上げて彩度を下げるのがおすすめです。
配色には「単色」「類似色」「補色」などのように、色彩理論に基づくルールがあります。
- 単色:
ひとつの色だけを使い、彩度や明度を変えてバリエーションを増やす手法- 類似色:
いくつかの色味が近い色を使う手法- 補色:
2つの対照的な色を使う手法
個性を出すためについルールから逆張りしたくなりますが、原則はルールに従っておくのが無難です。
ルールを守っても個性を出すことは可能で、たとえば単色と中間色の組み合わせ(例:異なる濃淡の青に対して、白をアクセントカラーとして使用する)も活用できます。その他、配色ルールの活用ポイントは以下のとおりです。
いまさら聞けない!カラーホイールの使い方と色の基本原則
Workship MAGAZINE
文字と背景にコントラストをつけるようにしましょう。さらに、コントラスト比は最低でも4.5:1にするのがおすすめ。アイコンなど他の要素についても同様です。また白い背景には、明るい色ではなく黒や灰色の文字を使うようにしましょう。ユーザーの視認性が妨げられるからです。
その他、コントラストに関連して配慮すべき点は以下のとおり。
ワンランク上を目指すデザイナーのための、カラーコントラストガイド&無料ツール4選
Workship MAGAZINE
色の組み合わせは、色単体で見ればいいわけではありません。アプリのUI上でどのように見えるのかが重要なので、実際のUIにあてはめてテストしましょう。
テストに際しては、色のコントラスト比をグリッド表示で確認できる『Eightshapes Contrast Grid』のようなツールを使うのも有効。カラーパレット内のすべての組み合わせを確認できます。
同時対比とは、まったく同じ彩度の補色、または補色に近い色が隣接している場合に発生する現象のことです。隣接した色の差が強調される効果があるため、同時対比はうまくコントロールしながら活用していく必要があります。
一般的に、文字と背景の組み合わせであれば同時対比は避けるべきとされ、そのためにはどちらかの色の彩度を下げるといいでしょう。逆に、通知などの特定の要素にあえて注目させる場合は、同時対比を活用するのがおすすめです。
ただし、UI全体が派手になりすぎてしまうため、彩度が高い色は複数使用しないほうが無難です。
「60:30:10」のルールとは、60%をメインカラーに、30%をメインカラーの補色に、10%をアクセントカラーにするルールのこと。インテリアやファッションの領域ではメジャーなルールで、これはUIにも応用可能です。
具体的には、以下のようにUIに応用していくといいでしょう。
UIデザインにおいては、一般的に「デザインが似ていると、機能も似ている」とユーザーに捉えられます。これは色についても同様なので、ユーザーに似た印象を与えたければ近い色を、そうでなければ異なる色を使うのがおすすめです。
具体的には、インタラクティブな要素とそうでない要素、「カートに入れる」と「FAQのアイコン」のように、異なる機能をもつ要素に同じ色を使わないようにしましょう。インタラクティブな要素には、ホバー時などの状態に応じて、明るい色と暗い色の両方を使うようにする、などの形で応用できます。
上記のポイントは、配色の基本的な理論をUIデザインに応用する場合の一例です。もちろん、100%理論通りにUIデザインを行う必要はなく、時には理論から外れたデザインが評価されるかもしれません。しかし、アプリのUIデザインにおける色の扱いかたについて考えるうえで、基礎となる理論を知っておいて損はないでしょう。
せっかく機能や構造にこだわっていても、色の使いかたを誤るとUIを損ねてしまいます。駆け出しのうちは理論を意識し、使いやすいデザインを心がけるのがおすすめです。
(執筆:Abhijit Nayak 翻訳:Asuka Nakajima 編集:齊藤颯人 提供:UX Planet)