エンジニアが色彩検定を受けてみて

デザインについて少しでも知見を増やしておくために昨年の11月に色彩検定3級を受けました。色彩検定を学習すれば色についての知識を学べるのはもちろんのこと、配色について直感的ではなく知識に基づいて説明することができるようになります。
また照明、ファッション、インテリアを交えた問題もあるので日常生活で役立つこともあり、デザイナーかどうか関係なく受けてみるのも良いかもしれません。試験の難易度ですが直感で解けてしまう問題も多く、そこまで難しくはありませんでしたので知識がほとんどない私でも合格することができました。
学習は、1回1時間程を週3~4のペースで3ヶ月間続けました。市販の参考書1冊と公式の過去問1冊で勉強しました。
そこで今回は勉強した中で色彩に関する主要な知識を一部紹介します。色とは実際にどういうものかを分かっていただければと思います。

色の3属性

色彩の知識を問う基本中の基本です。色には色相、明度、彩度の3属性があります。色相は色の種類(ex:赤、黄色、緑、青、紫など)、明度は色の明るさの度合い、彩度は色の鮮やかさの度合いを示します。下記画像が例です。

カメラをやっている人なら馴染みがあると思います。他にもゲームをやっている人だったらキャラクターを作成するときに髪の色だったり、目の色などをこの3属性を駆使して作ったことがあるかもしれません。

PCCS色相環

PCCSは「日本色研配色体系」を意味します。PCCS色相環は24色相を順番に並べて輪にしたものです。下記画像がPCCS色相環です。

数字部分は色相番号、アルファベット部分は色相名を表しています。
上記を例にすると2:RはRed(赤)、8:YはYellow(黄)を意味し、このように番号だけで色相が分かるようになります。この色相番号と色相名をセットで覚える必要があります。
試験では、これらを使って対象色相の補色を答える問題があります。
補色とは色相環において対象の色の180度反対側の色を指し、補色関係にある色はお互いの色を引き立たせる、とされています。例えば2:Rの補色は14:BGとなります。

補色効果

補色の一例を紹介します。下記の画像は2:Rと14:BGを組み合わせたものです。
補色同士の配色にすると単独で見たよりもより鮮やかに見えます。これを補色対比と言います。また、色の境界あたりがチカチカしたりで少し見づらい現象をハレーションと言います。

このハレーションを和らげるために以下のように境界に白を加えました。
先ほどより見やすくなったと思います。白、黒、灰色、金、銀などの色で強烈な色の配色を和らげたりすることをセパレーションと言います。

これをファッションに置き換えると以下のように出来ます。トップスを赤、ボトムスを緑、セパレーションを白のベルトとしています。白のベルトを入れることにより配色が調整できました。

トーンについて

これまでの紹介では「ビビッドトーン」に分類される色を用いてきました。ビビッドは彩度がとても高く明度は中位のものです。トーンは同じような彩度、明度の分類に入ることを示します。分かりやすく説明すると以下の画像のようになります。本当なら有彩色は12種類、無彩色は5種類ありますが、簡易的に説明するため5種類で説明します。縦軸を明度、横軸を彩度とします。
明度が高いほど色が明るくなり、低いほど暗くなります。
彩度が高いほど色が鮮やかになり、低い程鮮やかさが無くなっていきます。
赤青黄色で色相は異なりますがトーンが一緒なので調和が取れています。
ファッション、インテリアにおいても異なる色相の配色でもトーンが同じであれば同様に調和が取れます。試験においてもこのトーンを覚えることは必須です。

これまで紹介してきたものは基本です。他にも色の名前を答える問題であったり、照明の効果、目の構造、光、ファッションの配色、インテリアの配色などに関する問題があります。 どれも私生活で役立つのはもちろん、WEBページデザインでの配色を考えたりすることにも大きく役立ちます。この色彩検定を勉強をしてから目に映る色の色相、トーンを考えてみたり、他人のファッションがどのように配色しているのか考えるようになりました。
先ほど述べた直感的でなく知識に基づいて考えることができるようになって人に対して説明することにも繋がると思いました。 実際に業務においてもデザイン前のページを先行して作成するにあたり、自分なりにHTMLのヘッダー、ボディの色とフォントの色の配色を考えて作成できるようになり、一部作成したものが採用されたりもしました。これだけでも全体の作業効率が良くなったと思います。是非皆さんも受けてみてはいかがでしょうか。
以上、最後まで読んでいただきありがとうございました。