強調色の使い方とは?本当に目立たせたい要素だけに使うコツ

基本の理解

まずは強調色とは何か、そしてなぜ使う範囲を絞る必要があるのかを押さえましょう。

強調色の使い方とは何か

強調色の使い方とは、伝えたい情報や押してほしいボタンなど、特定の要素だけを目立たせるために使う色(アクセントカラー)を、効果的に活用する方法のことです。

強調したい要素にだけ視線が集まることで、視線誘導、つまりユーザーの目を見てほしい場所へ導くことがスムーズになります。

※配色では、最も広い面積を占める土台の色を「ベースカラー」、デザインの印象を決める主役の色を「メインカラー」、ごく狭い面積だけに使って一点を目立たせる色を「アクセントカラー」と呼び、役割を分けて考えます。この記事で扱う強調色は、このうちのアクセントカラーにあたります。

強調色は「全体の5%」に絞る

強調したい箇所が複数あっても、すべてに強調色を使うと、結局どれが一番重要か分からなくなってしまいます。

強調色は使用面積を絞ることで効果を発揮する性質があり、広く使うとかえって効果が薄れてしまうためです。

どのくらい絞ればよいかの目安になるのが、配色の基本比率「ベースカラー70%・メインカラー25%・アクセントカラー5%」です。

強調色は画面全体のほんの5%程度、つまり「ここだけ」という一点に使うイメージです(比率の考え方は色の割合とは?で解説しています)。

実際の画面で比べると、違いがよく分かります。

実践としては、ページ内で本当に押してほしいCTAボタン(「今すぐ購入」「資料請求」など、ユーザーに取ってほしい行動へ促すボタン。CTAはCall To Actionの略です)だけに強調色を使い、他のボタンは控えめな色にします。

セール価格や割引率など、一番伝えたい数字だけに強調色を使うのも効果的です。

強調色の選び方:補色と明るさの差

強調色は、周囲のベースカラー・メインカラーの「補色」や、明るさの差が大きい色を選ぶと、より効果を発揮します。

補色とは、色相環(赤・橙・黄・緑・青・紫と色を順番に並べて輪にした図)の上で正反対に位置する色のことで、組み合わせると互いを最も強く引き立てます。

サイトのメインカラー	強調色に使いやすい補色の例
青系	オレンジ・黄色系
緑系	赤〜ピンク系
紫系	黄色系

もう1つ大切なのが、明るさの差(明度差)です。

たとえば濃い紺色の背景に明るい黄色を置くと、パッと見ただけで強いコントラストを感じます。

明るさの差を簡単に見分けるには、デザインを白黒(モノクロ)にして見てみるのがおすすめです。

白黒にしても背景と強調色の境目がはっきり分かれば明るさの差は十分、同じようなグレーに溶け込んでしまえば明るさの差が足りません。

各組とも、左がカラー、右が同じ見本を白黒にしたもの

赤と緑のように色みは正反対でも、明るさが近い組み合わせは、白黒にすると差がなくなってしまいます。

補色を選んだら、明るさの差もあわせて確認しましょう(数値で確かめる方法はコントラスト比とは?で解説しています)。

実践のポイント

強調色を使うときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 「目立たせたいから」と強調色を使う箇所を増やしすぎてしまい、結局何が一番重要な情報か伝わらなくなることがあります。
  1ページの中で強調色を使う箇所は、できるだけ絞り込みましょう。
• サービス全体の落ち着いたブランドカラー(企業やサービスを象徴する色として、ロゴやサイト全体で一貫して使われる色)と、強調色の相性を確認せず、浮いた印象になってしまうことがあります。
  強調色を選ぶ際は、全体のトーンと大きく矛盾しないかも確認しましょう(詳しくは下記)。

「目立つ」と「浮く」の違い

「補色で目立たせる」と「全体のトーンから浮かないようにする」は、一見すると矛盾しているように感じるかもしれません。

ポイントは、色み(何色か)では差をつけつつ、鮮やかさや雰囲気はサイト全体に合わせることです。

たとえば、高級感のあるシックな黒のサイトに、蛍光のようなネオンピンクのボタンを置くと、目立ちはしますが雰囲気から浮いて安っぽく見えがちです。

同じ黒のサイトでも、鮮やかさを少し抑えた落ち着いたゴールドなら、上品さを保ったまましっかり目立ちます。

サイト全体の雰囲気と色の鮮やかさを揃える考え方は、明度・彩度を使った配色とは?で解説しています。

よくある質問

• Q. 強調色はどうやって選べばいい?
  A. まずはサイトのメインカラーの補色(色相環で正反対に近い色)を候補にし、白黒にしても背景からはっきり分かれるか(明るさの差が十分か)を確認しましょう。
  そのうえで、サイト全体の雰囲気から浮かない鮮やかさに調整します。
  ボタンの色選びについてはCTAを目立たせるカラーとは?でも詳しく解説しています。
• Q. 1ページに強調色は何箇所まで使っていい?
  A. 決まった数はありませんが、「本当に一番押してほしい要素」に絞ると1〜2箇所程度になることが多いです。
  数が多くなるほど、それぞれの強調効果は薄れていきます。
  強調の強さを段階的に分ける方法は情報の優先順位と色とは?で紹介しています。

まとめ

強調色の使い方とは、特定の要素だけを目立たせるアクセントカラーを効果的に活用する方法です。

使う面積は画面全体の5%程度に絞り、メインカラーの補色で明るさの差もある色を選び、鮮やかさはサイト全体の雰囲気に合わせることが、強調色を成功させるポイントです。

まずは自分のページで強調色を使っている箇所を数えてみて、3か所以上あれば、本当に一番目立たせたい1〜2か所に絞れないか見直してみてください。