ビジュアルデザインの配色基礎｜主調色・強調色と図地・誘目性の使い分け

ポスターを1枚デザインするとき、何色を使うかと同じくらい重要なのが「どの色をどれだけの面積で、どこに置くか」という配色計画です。色彩検定3級のビジュアルデザイン分野では、ポスター・広告・Web・サイン(標識)といった具体的な媒体を題材に、色を機能的に配置する考え方が問われます。

本記事では、配色を担う3つの役割と70:25:5という面積比、伝えたい情報を背景から浮かび上がらせる図と地の関係、広告と標識で使い分ける誘目性と視認性、そして情報の優先順位を色で設計する手順までを、実際の制作場面に即して整理します。PCCS(日本色研配色体系)の色相番号とトーン記号を使いながら、配色を感覚ではなく計画として組み立てる視点を身につけてください。

ビジュアルデザインの配色は、面積の大きい順にベースカラー(主調色)・アソートカラー(配合色)・アクセントカラー(強調色)の3つの役割に分けて設計します。目安となる面積比はおよそ70:25:5で、最も広い70%をベースカラーが占め、25%をアソートカラー、残りわずか5%をアクセントカラーが担います。インテリアの壁・床・小物の関係とまったく同じ構造で、Webページなら背景・カード/見出し帯・ボタンの関係に置き換えられます。

ベースカラーは配色全体の印象を支配する土台で、広い面積を占めるため彩度を抑えた色が向きます。例えばPCCSのライトグレイッシュ(ltg)やペール(p)トーンのように、明度が高く彩度の低い色を選ぶと、上に乗る情報を邪魔しません。面積対比により、サンプルで見たときより大面積では色が鮮やかに強く感じられるため、ベースは想定より1〜2トーン抑えめに選ぶのが実務の定石です。

アソートカラーはベースとアクセントをつなぐ中間の色で、配色に方向性を与えます。ベースと同一色相でトーンを変えたり、類似色相(PCCS色相差2〜3)で選ぶと統一感が出ます。アクセントカラーは最も狭い5%に置く差し色で、ここで初めて高彩度のビビッド(v)トーンや、ベースの補色(色相差12)を使い、視線を集めます。3つの役割と面積比をセットで覚えることが、この分野の出発点です。

配色計画でベースカラーと同じくらい重要なのが、図と地の関係です。図(figure)は伝えたい情報そのもの、つまり文字・ロゴ・主役の図形を指し、地(ground)はその背景です。デザインの役割は、図を地からくっきり浮かび上がらせることにあり、これを左右する最大の要因が図と地の明度差です。彩度差や色相差よりも明度差が支配的であるという原則は、色彩検定3級で繰り返し問われます。

具体例で考えます。白い紙(高明度の地)に黒い文字(低明度の図)を置くと、明度差が最大級になり、遠くからでもはっきり読めます。逆に、同じ赤でも中明度の緑の地に中明度の赤の図を重ねると、色相は大きく違うのに明度が近いため、図と地の境界がにじんで見え、近づくまで内容を判別しにくくなります。配色を決めたら、色相やトーン名だけで満足せず、図と地の明度が十分離れているかを必ず確認してください。

明度差を確保したうえで、図と地が同じくらいの強さで主張し合い、どちらが主役か決まらない状態(図地反転が起きやすい配色)を避けることも大切です。地を広く静かなトーンでまとめ、図に明度のコントラストと必要なら高彩度を与えると、視線が自然に図へ向かいます。ベースカラー=地、アクセントカラー=図の最も目立つ部分、と対応づけると、面積比と図地の話が一本の線でつながります。

色の見やすさには複数の種類があり、デザインの目的によって優先する性質が変わります。とりわけ広告と標識では、狙う性質が異なります。広告で重視するのは誘目性、標識で重視するのは視認性です。両者を取り違えると、目的に合わない配色になってしまいます。

誘目性(conspicuity)は、見る人が探していなくても視線を引き寄せる強さで、最も高いのは赤や黄など高彩度の暖色です(誘目性・視認性そのものの定義は、色の役割を扱った関連記事でも詳しく解説しています)。広告でこれを活かすなら、ベースを落ち着かせたうえでアクセントに高彩度暖色を置き、通行人がこちらを見ていなくても目に飛び込ませる設計が有効です。街頭広告やセールのPOPに赤系の差し色が多いのはこのためです。

視認性(visibility)は、対象が背景からどれだけ際立ち、発見しやすいかの度合いで、決め手は図と地の明度差です。道路標識や避難誘導サインは、ドライバーや避難者が確実に・素早く情報を見つけられることが最優先なので、彩度の派手さより明度差による視認性を優先します。高速道路の案内標識が濃い地に白い文字で構成されるのは、明度差を最大化して視認性を確保するためです。広告は誘目性、標識は視認性、と目的から逆算して使い分けてください。

アクセントカラーと並び、配色全体を引き締めるのが「統一と変化」のバランスです。全体を1つの色相やトーンで支配して統一感を出す手法をドミナント配色と呼びます。ドミナントカラー配色は色相を固定してトーンを自由に変える方法、ドミナントトーン配色はトーンを固定して色相を自由に変える方法で、どちらも配色全体に共通項を持たせることで一体感を生みます。

ただし統一だけでは単調になり、視線が止まりません。そこで、ドミナントで統一した配色の中に、ごく狭い面積のアクセントカラーで変化を加えます。アクセントには、周囲(ベース・アソート)と対照的な色を選ぶのがセオリーで、ベースの補色(PCCS色相差12)や、明度差・彩度差の大きい対照トーンを5%前後の面積で配置すると、統一感を壊さずに視線を意図した一点へ誘導できます。

例えばWebのフォームで、画面全体を青系のドミナントカラーでまとめつつ、送信ボタンだけを補色に近いオレンジの高彩度色にすると、ユーザーの視線と操作が自然にボタンへ集まります。統一が土台、変化がフック、という役割分担を理解すると、「まとまっているのに退屈」「派手だけど散らかって見える」という両極端を避けられます。アクセントは少面積・対照配置が鉄則です。

実務の配色計画では、色を「装飾」ではなく「情報の優先順位を伝える道具」として使います。1つの紙面やページに、見出し・本文・注意書きといった役割の異なるテキストが混在するとき、それぞれに別の見え方を与えることで、読者は読む前から重要度を把握できます。これは色の識別性(色の違いで複数を区別する性質)を、情報設計に応用したものです。

基本の組み立てはこうです。最も伝えたい見出しには、ベースとの明度差が大きく必要なら高彩度の色を与えて最優先で目立たせます。本文は長時間読まれるため、背景との明度差は確保しつつ彩度は抑え、可読性(文字の読み取りやすさ)を最優先にします。注意書きや補足は、あえて明度差を小さめにして控えめに沈めるか、逆に警告ならJIS安全色に倣って赤系で強調します。優先順位の高い情報ほど明度差・彩度を強く、低い情報ほど弱くという勾配をつけるのが要点です。

色だけに頼らない配慮も欠かせません。色の見え方には個人差があるため、優先順位を色相の違いだけで表すと、一部の利用者には区別がつきにくくなります。文字の大きさ・太さ・余白といった色以外の手がかりを併用し、明度差(コントラスト)で差をつけておくと、誰にとっても優先順位が伝わる堅牢な配色計画になります。

最後に、同じ配色計画でも出力媒体によって色の見え方が変わる点に注意が必要です。紙などの印刷物は色料の三原色(CMY)の減法混色、ディスプレイは光の三原色(RGB)の加法混色で再現され、混ぜると暗くなるCMYと混ぜると明るくなるRGBという原理の違いから、再現できる色の範囲(色域)がずれます(加法・減法・中間混色の仕組みそのものは、混色を扱った関連記事で詳説しています)。そのため同じ意図の色でも、媒体が変われば見え方が変わります。

実際の制作では、ディスプレイ上で鮮やかに見えた高彩度の色が、印刷すると一段くすんで沈むことがよくあります。発光して見せるRGBに対し、紙は反射光で、しかも用紙の白さやインクの吸収特性に左右されるためです。ポスターやチラシのように紙で配る成果物は、画面の見た目を最終とせず、可能なら試し刷りで図と地の明度差やアクセントの効き具合を実物で確認することが重要です。

媒体差を踏まえた配色計画のコツは、色相やトーンの「関係性」で設計しておくことです。ベースとアクセントの明度差、図と地のコントラスト、ドミナントによる統一といった関係は、CMYでもRGBでも保たれます。個々の色の絶対的な発色は媒体で変わっても、面積比70:25:5と明度差を軸にした骨格を崩さなければ、紙でも画面でも意図した優先順位と視線誘導が機能します。

本記事は色彩検定3級の試験対策を目的とした独自の解説であり、公益社団法人色彩検定協会が発行する公式テキストや公式問題集の内容を転載・代替するものではありません。配色の役割名・面積比の目安・図と地や誘目性などの用語の定義は、公式テキストの版やPCCS体系の運用によって細部の表記が異なる場合があります。

出題範囲・配点・解答基準などの最新かつ正確な情報は、必ず色彩検定協会の公式ウェブサイトおよび最新版の公式テキストでご確認ください。本記事は試験対策の補助教材としての利用を前提としており、記載内容によって生じたいかなる損害についても執筆者および掲載サイトは責任を負いかねます。実務での配色設計に応用する際は、印刷条件やモニタ環境による色の違いを実物で検証してください。