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

ポスターを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つの役割と面積比をセットで覚えることが、この分野の出発点です。