目立つ色や配色の決め方！読みやすいデザインを作るコツがわかる

目立つ色や配色の決め方についてよくわからない人もいるでしょう。この記事では読みやすいデザインを作るためにどんな色を使えば目立つのか、配色はどのようにすればよいのかについて説明しています。

目立つ色にはどのようなものがある？

目立つ色にはどのようなものがあるでしょうか？目立つ色と一言で言っても、規則性があるのか気になる方もいるかもしれません。具体的な事例を見ていきながら、目立つ色とはどういうものなのかを考えていきましょう。

目立つ背景色の例

背景色に使用して目立つ色は赤やオレンジ、黄色などの暖色系です。一般的に寒色系よりも暖色系の色の方が目立ちやすいといわれています。道路の「止まれ」の標識に「赤色」が使われたり、小学生の帽子やランドセルカバーに「黄色」が使われていたりするのも注意を引きやすく、よく目立つという理由からです。
また、鮮やかでコントラストが高いビビットカラーと呼ばれる色のほうがコントラストが低いくすんだ色よりも目立ちやすいです。

目立つ文字色の例

先ほどの背景色で説明したように、目立つ色で考えると文字色においても暖色系が目立つといえます。しかし暖色系の背景色に対して暖色系の文字色を組み合わせてしまうと、文字が背景に同化してしまい目立つ配色とはいえません。その場合は文字に黒色の縁取りを加えるなどコントラストをはっきりさせるための工夫が必要になります。

ここで背景色が白色の場合と黒色の場合の文字色の見え方の違いを見てみましょう。

黄色の文字を見てみると、背景色が白色のときは見えにくいと感じますが、背景色が黒色になると目立って見えるようになります。背景色が白色で見えやすかった赤や青の文字色は、背景色が黒色になると見えにくくなります。

背景色と文字色の組み合わせによって、文字の見えやすさに変化が生まれるのです。

目立つ配色の決め方

それでは背景色と文字色の組み合わせはどのように決めればよいのでしょうか。どのような時間に見るものなのか、見られる環境を考えて配色を決める必要があります。また、目立つためには見やすく読みやすいデザインでなければなりません。配色の例を見ながら組み合わせを考えていきましょう。

見てもらう環境や時間帯で決める

明るい日中によく見るものなのか、夜間に真っ暗な中見るものなのかによって配色を決めましょう。時間帯によって同じ配色のデザインでも見え方が変わってきます。

昼に見てもらう場合におすすめの配色

背景色	文字色
黒	白
赤	白
青	白
緑	白
黒	黄
赤	黄
オレンジ	黄（黒い縁取り）

昼間は明るいので背景色は黒や赤、青などのはっきりとした鮮やかな色で存在感を出し、文字色は白色や黄色などの明るい色にするとはっきりとして見えやすいデザインになります。

背景がオレンジなど暖色系で、文字色にも同じく暖色系の黄色を使う場合は、文字に黒い縁取りを施すと文字が浮き出て見えてはっきりします。寒色系の青色の背景に水色など寒色系の文字色にする場合は、文字の周りを白色で囲む縁取りをすると目立つようになります。

このように文字と背景の境に別の色を加えて分離させることをセパレーションといいます。
使いたい色が背景と文字で似通っているなら、セパレーションを使ってわかりやすくしてもよいでしょう。

夜に見てもらう場合におすすめの配色

背景色	文字色
赤	白
オレンジ	白
赤	黄
黄	黒
水色	黒
黄緑	紫
黄緑	ピンク

夜は昼と同様に赤色や黄色の背景でも目立ちます。一方で夜は背景色に青や黒を使用してしまうと周囲の暗さと同化して目立ちにくくなるので注意が必要です。黄色や水色などの明るい色を背景色にする場合は、文字色を黒や紫などの暗い色を使いましょう。デザインに明度の差が生まれることで夜でも目立ちます。

視認性の高さで決める

配色の組み合わせを視認性の高さで決めるのもおすすめです。視認性（しにんせい）とは、見たときの確認のしやすさのことです。背景色に対して文字色が目立っていたり、文字が大きく読みやすかったりすると「視認性が高い」と表現されます。

視認性が高い配色は明度の高い色と低い色で成り立っています。白色の背景には文字色に青や紫などの明度の低い色を組み合わせると視認性が高くなります。逆に背景を黒色などの明度の低い色にした場合は、文字色を白や黄色など明度の高い色を組み合わせることで見やすくなるでしょう。

誘目性を意識した組み合わせで決める

誘目性（ゆうもくせい）とは注目を誘う度合いのことです。意識していない状態でふと目に入ってしまうような、人の視線を引きつける配色の組み合わせを考えましょう。

暖色系に分類される赤色や黄色は誘目性が高く、寒色系に分類される青色や緑色は誘目性が低いといわれています。点字ブロックや通学帽は誘目性の高さから黄色が使用されています。

背景色が白色や黒色も誘目性が高いパターンの配色です。白い背景に対して赤の文字、黒い背景に対して黄色の文字は最も誘目性が高くなる配色の組み合わせです。

可読性を考慮して決める

可読性とは文字を見たときに瞬時に読むことができる度合いのことです。文字の可読性を上げるためには、文字に黒や白で縁取りをしたりするとよいでしょう。縁取りがあると背景色と文字色の境界がはっきりするので、パッと見たときに書かれている内容が頭に入りやすくなります。

可読性が高いデザインにすることで文字を読むスピードが早くなり、読みにくさからくるストレスを軽減させることができます。

目立つ色を使ったマグネットシートのデザイン例

ここまで、目立つ色や配色の決め方についてお伝えしてきました。配色の具体例について、マグネットシートのデザインをもとにご紹介します。