印刷やWebデザインで必要な配色の基本とルール

この記事を読むのに必要な時間は約 5 分です。

配色には様々なルールがある

チラシやDM、ポスター、Webデザインなどの色使いで気をつけなくてはいけないことはどんなことでしょうか？

例えば、素人が作成したやチラシやPowerPoint資料などで時折見かけるのが、「調和がとれていない」「色が多すぎる」「見づらい」デザインです。

なぜこのような現象が起きるかというと、配色のルールを無視しているからです。

配色とは、色を配置、構成すること、つまり色の組み合わせです。

配色には様々なルール、理論があります。あまりにも専門的になってしまうと非常に難しい話になりますので今回は割愛しますが、とってもシンプルな法則だってあります。

そこで今回は、チラシやDM、Webデザインにおける配色のルールや注意点をご紹介したいと思います。

配色のルール1.「70：25：5」の比率

配色には70：25：5という比率があります。

これは印刷物だけでなくWebサイトやプロダクトデザインなどで使用されている配色の比率で、3つの色を以下の割合で配色します。

「ベースカラー：メインカラー：アクセントカラー＝70%：25%：5％」

まずは、この比率に使用される色についてご紹介したいと思います。

ベースカラー

ベースカラーは70%と一番割合が高く、背景などの広い面積に使用する色です。

そのため、白や明度の高い色、淡い色、薄めの色がよく使われます。

メインカラー

30%と２番めの割合であるメインカラーは、イメージカラーやコーポレートカラーなどが該当します。

ロゴやキャッチフレーズ、メインコンテンツなど読み手に一番見てもらいたいコンテンツに使用します。

アクセントカラー

アクセントカラーには、目立たせたい、見落とされたくないコンテンツに使用します。

アクセントカラーには、メインカラーと真逆の色（色相環でいう補色）を使用することで、メリハリをつけることができます。

色相とは、色合い（色味）や色調のことです。色相環とは、色相の総体を順序立てて円環にして並べたものです。

参考：
デザインするなら押さえたい「彩度・色相・明度」と視覚効果

全体の色数を4色にしたい場合は、アクセントカラーを１色増やし割合を2.5%にして、「70%：25%：2.5％:2.5%」とするとバランスが取りやすくなります。

配色のルール2.文字と形のコントラストを意識する

文字や形の「見やすさ」を上げるためには、コントラストがとても重要になります。つまりメリハリです。

以前も、フォントの大きさやウェイト、字間や図版率を変えることによってメリハリをつける重要性をご紹介しましたが、色使いにもメリハリが必要です。

参考：
読まれるチラシを作るたった4つのルール
効果抜群！チラシの集客力・反響率を上げるフォントの使い方

チラシやDMにはもともと業界や商品が持つイメージカラーなどがありますが、視認性を意識して配色を行えば、より読み手に伝わりやすいデザインになるでしょう。

視認性には大きく可読性（文字や数字の認知）と明視性（形の認知）の２種類がありますので、簡単にご紹介します。

可読性

可読性とは、読みやすさの度合いのことです。

参考：
文章の読みやすさを決める可読性、視認性、判読性とは

可読性を高めるには、背景色と対象になる色の明度や色相に差を与える必要があります。

例えば、明度が近い色同士を組み合せると、文字が読みにくくなります。逆に、明度が高い色と低い色の組み合わせは、文字が読みやすくなります。

また、色相が隣り合っている色同士は馴染みが良いのですが、背景と文字の組み合わせとしては相性が悪く、読みづらくなります。逆に、背景と文字の色相に差がある場合は可読性が高くなります。

このように、色の組み合わせは可読性に大きな影響を与えます。

明視性

明視性とは、遠くからでもハッキリと形が認識できるかどうかの度合いのことです。

明視性は可読性と同じく色のコントラストに影響されます。

明度差や色相差が小さいと形を認識しづらくなり、逆に大きければ形を認識しやすくなります。つまりコントラストが低いと形を認識しづらくなるのです。

明視性の高いもの代表例としては、非常時の避難経路を案内する避難誘導灯や危険を認識するための標識などです。確かに道路標識に使われる黄色と黒の組み合わせはコントラストが強く、記号の形もハッキリと見えます。

また、黄色は昼夜問わず認識しやすく、特に黄色と黒の組み合わせはコントラストが非常に目立つことから、「警戒色（警告色）」として交通標識や踏切工事現場などによく使われます。

参考：寒色・暖色だけじゃない！色が与えるイメージ、心理的な影響とは

配色を考えるときは、このような可読性や明視性を意識してみると良いでしょう。

配色のルール3.色数を抑える

いくらシンプルなデザインでも、色数が多いととたんに見えづらくなり、煩雑な印象になります。

色数はできるだけ少なくし、不必要な色を使うのは避けましょう。

先ほどご紹介した70：25：5の比率も使用している色は3〜4色でしたね。

どうしても色数を増やしたい場合は、すでに使用している色と同系色（類似色）を使ってみてください。

色馴染みがよいため違和感なく見えるはずです。

まとめ

今回ご紹介した配色のルールは非常にシンプルで簡単なものですが、これを守るだけでデザインが格段と良くなるはずです。

チラシやDMの制作とまではいかなくとも、プレゼン用のスライドや社内資料を作る上でも、このルールは役に立ちます。

資料が読みにくかったり見づらいと、内容がいくらよくても全体の印象が悪くなることがあります。

デザイナーほどのセンスはなくとも、このルールを覚えておけば簡単にセンスの良い資料を作ることができます。

ぜひ参考にしてみてください。