色は組み合わせによって与える印象が大きく変わります。色の相性や見る環境などのさまざまな要因によって、目立つ色も変わります。

より注目を集め、与えたい印象や伝えたい事を正確に伝えられるようにするには、使いたい色とそれを目立たせるためのポイントや色の仕組みを理解することが大切です。

今回は、文字やデザインを目立たせるための配色について、色の基本からポイントや注意点を実際のイメージとともに解説します。看板などの制作にお役立てください。

目立つ色を選ぶための配色の基本要素

配色の基本は「色相」「明度」「彩度」をおさえることから始まります。色の見え方や印象は、これら3つの要素がどのように変化するかで変わるため、まずはそれぞれの概要を把握しましょう。

「色相」による色の違いと補色や類似色とは

赤や青、緑などの色味の違いのことを「色相（しきそう）」と呼びます。これらの色は赤→橙→黄→緑→青→藍→紫のように似ている色同士が連続的に変化し、これを下図のように円形に配置したものを「色相環（しきそうかん）」と呼びます。この色相環の中で、例えば赤色の色相に近い黄色やピンク色といった色のことを「類似色」といい、反対にその色と向かい側にある色は「補色（反対色）」といいます。

補色は反対側にある色のため色相の差が大きく、対比の強さによってお互いの色を目立たせる効果があります。下図は補色の組み合わせの例です。

一方の類似色同士の組み合わせは、色の対比が少なく調和しやすいため、統一感のある配色になります。下図は類似色の組み合わせの例です。

「明度」による色の違いとは

「明度」とは色の明るさのことを指し、その高低によって色の見え方も変わります。明度が高ければ鮮やかに、明度が低ければ暗く黒に近い色になっていきます。

配色においては、使用する全ての色の明度が高いか低いかのどちらかに偏ってしまうと、それぞれの色同士がなじみすぎてしまい、文字やデザインが目立たなくなってしまいます。色相による色味の違いだけでなく、色ごとの明暗の対比も重要な要素であることを把握しておきましょう。

「彩度」による色の違いとは

「彩度」とは、色の鮮やかさの度合いのことを指します。赤や緑といった原色に対して、白や黒などが混じり、くすんで落ち着いた色になっていくと彩度が低い状態になります。反対に、鮮やかでビビッドな色の状態を彩度が高いといいます。彩度が最も低くなると色味を失い、「有彩色」から「無彩色」に変わります。下図のように、元は赤色であっても彩度が最も低い場合はグレーになります。

明度同様に、彩度の違いも色の見え方に大きな変化をもたらします。また、彩度が低くなるほど、配色によってはくすんだ印象になるため、選び方を間違えると全体の印象が汚く見えてしまうこともあります。

目立つ色と読みやすい色は違う

配色の基本要素を組み合わせて目立つ色が作れても、それが必ずしも「読みやすい色」になるとは限りません。文字やロゴを読ませて内容を正確に伝えたいデザインの場合、「目立つだけの配色」にならないように注意が必要です。目立つ色と読みやすい色の違いを知るために、色がもつ特性についても理解しておきましょう。

色の特性1：誘目性

「誘目性」とは、人が意識をしていなくても自然と目に入ってくるような、目立ちやすさのことを指します。色相の中でも、赤色や黄色などの「暖色」とされる色は誘目性が高いとされています。ただし、同じ色であっても背景色との組み合わせによって見えやすさは異なります。

「誘目性」を意識した配色としては、たとえば道路標識のように背景色を白や黒、グレーにして、文字色に赤や黄色といった暖色系を用いると誘目性が高くなります。反対に青や紫、緑といった寒色系を用いることで誘目性を低くすれば、あえて目立たずに落ち着いたデザインにすることもできます。

色の特性2：視認性

「視認性」とは、書いてある内容がひと目で把握しやすく見やすいような、文字やデザインの認識のしやすさのことを指します。視認性は認識させたい文字などの周囲にどのような色を用いるかによってその度合いが変わります。たとえば、黄色と黒、赤と白といった有彩色と無彩色の組み合わせは視認性が高い配色と言えます。

色の特性3：可読性

「可読性」とは、ひと目で文字の内容を理解しやすいかという度合いのことを指します。視認性の場合は、ひと目で色の違いが認識しやすいかどうかであるのに対し、可読性はさらに内容が読みやすいかどうかがポイントとなります。

可読性においては、特に目立つ色と読みやすさの違いに注意が必要です。目立つ色になりやすい補色同士の組み合わせを使うと、デザイン次第では文字がかなり読みにくくなってしまうため、文章や文字をちゃんと読んでもらう必要があるデザインでは相性が悪い可能性があります。

環境による目立つ色の違い

目立つ色とは、ここまで解説してきた基本要素や特性だけでなく、周囲の環境によっても印象が変わります。特に、同じデザインでも明るい場所と暗い場所におかれたデザインは見え方や目立ち方に変化があります。それぞれの違いについて見ていきましょう。

昼や明るい場所で目立つ色合いと背景色

昼間や明るい場所では、赤やオレンジ、黄、黒、青といった鮮やかではっきりとした色が目立つ色合いとされています。また、背景を黒や緑などの濃い色にして、文字色に明るい色を組み合わせても、目に留まりやすくなります。ただし、全てを赤やオレンジ、黄といった暖色系でまとめてしまうと、明るい場所では周囲になじんでしまうこともあります。

夜や暗い場所で目立つ色合いと背景色

赤やオレンジは昼間だけでなく夜間も目に留まりやすい色です。また、昼間には周囲になじんでしまいがちな黄色や黄緑も、夜や暗い場所では目立つ色合いとなります。そのため、背景色を明るい色にして、文字やイラストを白や黒、暗い色を用いることでさらに目に留まりやすくなります。

一方で、昼間は目に入りやすい黒や濃い青などは、暗さに溶け込んでしまい見えづらくなってしまいがちですので気をつけましょう。

目立つ色を使いこなすコツ

ここまで紹介したような色の特徴を踏まえて、それらをうまく配色するためのコツについても知っておきましょう。ただ色を組み合わせて配色するだけでは目立ちにくかったり読みにくかったりする配色でも、工夫を加えることでその問題を解決できる可能性があります。

背景色と文字色の間に無彩色を挟む

可読性の項目でも触れたように、目立つ色同士でも組み合わせによっては読みにくくなってしまいます。その場合、文字に白のふちどりをつけるなど、背景色と文字色の境に無彩色を挟む「セパレーション」というテクニックを活用しましょう。2つの色が無彩色によって分断されることでメリハリがつき、可読性や視認性が高まります。また、白色を使う場合にはデザインに明るい雰囲気が加わることも期待できます。

▼セパレーションを使用した配色の例

明度に差をつける

明度の差が大きいほど、視認性や可読性も高くなります。たとえば、下図のように同じ黄色の星のオブジェクトでも、背景に明度の低い色を用いると黄色が目立ちますが、白や同じ高明度のピンク色を用いると黄色が目立たなくなります。

目立たせたい要素がある場合は、その背景などにしっかりと明度差をつけてみましょう。同じ色の明度を下げるだけでなく、その他の色の明度も調整することでより目立つ配色になる可能性があります。

また、文字の配置の場合は特に文字を読めるかどうかを意識して、明度差を調整しましょう。文字色と背景色の明度差が大きいほど可読性が高く、明度差が小さいほど、色がなじんでしまい文字が読みにくくなってしまいます。

ハレーションを避ける

お互いを目立たせる補色同士を使っているにもかかわらず、目がチカチカして不快な印象を与える配色のことを「ハレーション」といいます。先述した補色同士による可読性の低さもこのハレーションが原因です。

これは、明度差がなく、彩度の高い鮮やかな色同士を組み合わせることで起こるものです。ひと目でインパクトを与えたいWEB広告などであえて採用している場合もありますが、見た人にとってストレスを与えてしまうことがあるため、一般的には避けたい組み合わせです。

以下のデザインでは、黄色と紫がハレーションを起こす組み合わせになっていますが、人物のイラストやデザイン下部にある枠の白色で調和していたり、画面におけるそれぞれの色の量を調節したりしています。よく目立つデザインではありますが、これも人によって「目がチカチカする」「見にくい」と感じる可能性は残っているため、ハレーションを使うかどうかはターゲットなども考慮してよく考えるのが良いでしょう。

内容にあった色を選ぶ

色にはそれぞれイメージや見た人が持つ印象というものがあります。人によって多少感じ方が異なる場合はありますが、これらのイメージはデザインを考えるうえでも必要になります。デザインの内容にあった色を使っているかどうかは、ターゲットの注意を惹くという意味でも、目立たせるための重要な要素です。

内容にあう色を選びながら、それを目立たせるために背景色を選んだり明度や彩度を調整したりすることでより効果的な配色を考えましょう。以下は、代表的な色におけるイメージです。

まとめ

デザインは、それを見てもらい読んでもらう人に向けて作るものです。ただ目立つ配色をするのではなく、ターゲットを意識して読みやすさとのバランスを考慮し、意図的に配色を選ぶことが大切です。

今回ご紹介した「色相」「明度」「彩度」による色の違いや、ハレーションやセパレーションの扱い方、色のイメージなどを参考に、理想の配色を見つけてみてください。