Webデザインに活かせる色彩検定の知識 TOP10

76thumb

Webデザイナーの勉強には色彩検定は必要か?』と考えたことのあるデザイナーさんは少なくないと思います。
自分も最初受けるかどうか迷いました。

でも、ネットでは賛否両論でよくわからず。
3級を勉強し始めても、どれが使える知識かいまいちわかりませんでした。

それから最終的に色彩検定を2級まで取得、Webに関してもある程度経験したので、どれがどう役に立つのかもわかってきました。

そこで、最初の頃に知りたかった『実際使える色彩検定の知識』をランキング形式でまとめたいと思います。
(3級2級は結構かぶってる部分もあるので特に区別せず、項目も任意で分類してます。)

☆1位 色の3属性 ー 色相・明度・彩度

3属性は色彩検定でも一番最初に出てくる項目で、色を『色相・明度・彩度』という3つの属性に分けたもの

色を決める尺度となる『色の物差し』で、配色で避けて通れない『基本のき』と言えます。

合わせて有彩色・無彩色という用語もセットで出てきてます。

色相 赤・青・緑などの色味
明度 明るさの度合い
彩度 鮮やかさの度合い
有彩色 色味のある、色相・明度・彩度全てで表す色
無彩色 彩度を持たない白・グレー・黒のこと

76-01

3級のPCCS、2級のマンセル、フォトショ・イラレでは名称が微妙に違うのがややこしいです。
(PCCS、マンセルというのは配色のための色彩体系の種類。)

PCCSでの名称 Hue(ヒュー):色相
Lightness(ライトネス):明度
Saturation(サチュレーション):彩度
マンセルでの名称 Hue(ヒュー):色相
Value(バリュー):明度
Chroma(クロマ):彩度
photoshopでの名称 Hue(ヒュー):色相
Brightness(ブライトネス):明度
Saturation(サチュレーション):彩度
実際の使い所

色を決める際に頻繁に使います。
photoshopでは『カラーピッカー』を開くと『H・S・B』の項目があるので、そこで数値を調整します。

76-02

例えば、既にこの画像を作るのにも使っていて、色相だけ差をつけて、彩度・明度だけ変えてバリエーションを作ってます(黄色だけ彩度明度も微調整)。
色相だけ変えると、簡単に調和のとれた色違いが作れます(後で説明する同一トーン配色という)。

76-03

他にも使い所は様々です。

  • 色が地味なので彩度を上げる。色がうるさいので彩度を下げる。
  • 文字が見えづらいので文字色の明度を落とす
  • 同じ色相、明度・彩度に差をつけて同一色相でバリエーションを作る

ちょっと応用的な使い方としては、例えば同じ黒でも、そのサイトの他のパーツで使われてる色相にした黒にしたりすることがあります。

76-04

このサイトも文字はパッと見黒ですが、商品画像のパッケージが紺色なので、それに合わせて色相は青(H:200)。
色相彩度0の黒と比べると、より全体の雰囲気が調和した印象になります。

☆2位 色相環

『色相環』は虹の7色と言われる赤〜青紫の色に、紫・赤紫を加えて円状に並べたものです。

76-05

調和がとれていて綺麗に見える並び順として参考になったり、下で挙げる『配色テクニック』でも基準として使われます。

3級ではPCCSの色相環(24色)、2級ではマンセルの色相環(20色)が出題されます。

実際の使い所

すでにこの記事に使う画像でも利用してます。『3属性の色相』の5色(赤・黄・緑・紫)は色相環で並べてます。

Web以外の例では、テレビの電子番組表や商店街の旗でも見られます(『配色イメージワーク』は次で紹介します)。

76-06

☆3位 PCCSトーン/ヒュートーンシステム

PCCSトーンとは明度と彩度を合わせた、色の調子・雰囲気のこと
ヒュートーンシステムは色彩(ヒュー)とトーンにより、色を分類したシステム。有彩色で12種類、無彩色で5種類に分けられます。

76-07

トーンはそれぞれ次のようなイメージを持っています。

76-08

実際の使い所

トーンは作るサイトの業種、ターゲット、伝えたい印象をデザイン/色に落とし込む際のヒントになります。

76-09

PCCSトーンに近いものとして、『イメージスケール』というものもあります。
これもイメージを元に配色を分類したものです。

76-21

イメージスケール | 日本カラーデザイン研究所

↓実際、クライアントワークでこのイメージスケールを利用する流れを紹介している記事です。

本では5色で分類している『配色イメージワーク』と3色で分類している改訂版の『カラーイメージスケール』があります。

両方持ってますが、個人的には3色の改訂版の方が目安として使いやすいんじゃないかと思います。

☆4位 ベースカラー・アソートカラー・アクセントカラー

これも実戦的で使い勝手のいい知識です。
知っていないといけないレベルだと思います。

全体の色の割合を
ベースカラー(基調色)・アソートカラー(配合色)・アクセントカラー(強調色) = 75 : 25: 5
にするという方法です。

76-10

実際の使い所

例としては次のものがわかりやすいです。
Webデザインでは目立たせたいコンバージョンをアクセントカラーにすることが多いです。

76-11

この方法はイラストでも使えます。紹介している記事↓

この記事では75%をメインカラー、25%をサブカラーとしています。
Webデザインでいうと、75%の色がベースカラー、25%がメインカラーといった方が合ってるかと思います。

☆5位 色のイメージ・色彩心理

トーンは色の組み合わせのイメージで、こちらは色自体がもっているイメージについてです。

これは学ぶ前から自然と持っている感覚でもあります。
デザイナーとしては色を選ぶ根拠として意識的に知っているべきポイントになります。

色の3属性と心理的効果

76-12

その他に『硬い・柔らかい』『軽い・重い』『興奮・鎮静』『派手・地味』などの心理的効果が色と関わりがあります。

色と連想

これはある意味1位にしてもいいくらいです。
リンゴのサイトなら赤、植物のサイトなら緑と一番に配色を決めるポイントになります。

色彩検定ではその連想の種類を『象徴・具体的・抽象的』と分類しています。

76-13

実際の使い所

使い所は本当に沢山ありますが、特に食品関係は寒色・暖色を使った例がよく見られます。

76-14

☆6位 配色のテクニック

『色相環』を使って、『色相』と『トーン』を軸にした2種類の配色方法です。
これも3級と2級で少し異なりますが、ここでは3級の配色方法を。

6−1 色相を軸にした配色

76-15

6−2 トーンを軸にした配色

同じ『pale』内の色を選ぶ場合は『同一トーン配色』といいます。
『pale』と『light』を組み合わせる場合は『類似トーン』、『pale』と『vivid』を組み合わせる場合は『対照トーン』になります。

76-16

実際の使い所

上で挙げた例でも『同一色相』『同一トーン』配色は使われてますね。
メインカラーが緑、アクセントカラーがピンクの場合は『補色色相配色』と言えます。

シンプルに言うと近い色を選んで『なじませる』か、遠い色を選んで『目立たせる』かという判断の目安になります。

『hue360』やadobeの『Adobe Color』といった配色ツールを使う際も、この基本的な考え方は知っていた方がいいでしょう。

☆7位 見やすさに関わる要素

誘目性・視認性・名視性・可読性・識別性について。

誘目性 注意を向けてない状態での、発見のされやすさ
視認性 注意を向けた状態での、発見のしやすさ
名視性 図形の判読のしやすさ・意味のわかりやすさ
可読性 文字の判読のしやすさ・意味のわかりやすさ
識別性 複数の対象の中での、区別・認識のしやすさ

76-17

自分の経験上、『言葉を知っている・そういう基準があると知っている』とデザインを見る目も厳しくなります。

逆に言えば、『可読性』という言葉を知らなかった頃は可読性の意識が低く、作ったものも読みにくい箇所が沢山ありました。

実際の使い所

視認性・名視性・可読性を上げるには明度差をつけるのがポイント

↓この記事のようにカンプを作成したら最後にモノクロにして、視認性などがチェックすると良いと思います。

また、『(un)crid』という、ブラウザ上でサイトを白黒にして明度差を確認できるChromeの拡張機能もあります。

(un)crid

良いサイトは白黒にすると、装飾云々の前に全体的にクッキリしていて、見やすいし読みやすいデザインだということがわかります。

☆8位 対比

対比では『明度対比』『色相対比』『彩度対比』『補色対比』『縁辺対比』などが出てきます。
これは意識しないと見落としがちなポイントだったりします。

ここでは『明度対比』だけ図で説明します。

『明度対比』は囲まれた色が、周囲の色の明度によって明るさが変化して見える現象です。
同じグレーでも、背景を黒にすると明るく見え、背景が白だと暗く見えます。

76-18

他の対比も一応説明だけ。

色相対比 背景に囲まれた色が背景の色の心理補色側の色味が強く見える現象
彩度対比 低彩度色に囲まれた色はより鮮やかに、高彩度色に囲まれた色はよりくすんで見える現象
補色対比 色相環の補色同士の色はより鮮やかに見える現象
辺縁対比 色と色の境界線にできる明度対比の一種。明るい色と接する所は暗く、暗い色と接する所は明るく見える

『補色対比』はわかりやすいですね。コンバージョンボタンをメインカラーの補色にして、目立たせるという方法はよく使われます。

『辺縁対比』はあとで出てくる錯視の『マッハバンド』と同じ錯視の一種。
これも知らないとなんでそう見えるのか違和感を覚えることがあります(人に指摘されたこともありました)。

実際の使い所

全部に共通する大事な考え方としては、色は『客観的な数値』だけでは測れないということです。

色の組み合わせ、全体のバランスを見て、目で見た感覚で調整していかないといけません。
そういった点で、実務でも重要なポイントです。

☆9位 同化

同化は『明度の同化』『色相の同化』『彩度の同化』があります。

76-19

実際の使い所

実例としてみかんを挙げました。

Webサイトでも、商品を魅力的に見せたい場合は、周りの色の彩度を上げるという風に使えると思います。
(もちろん彩度を上げ過ぎると、商品の存在感を消しますが)

また、ここでは『面積効果』という用語も出てきます。
『面積効果』とは同じ色でも面積によって色の見え方が変わる現象で、これも重要です。

実際の使い所

単純に面積が大きい方が濃くしっかりした色で見えます
例えば、背景色の色と文字色を同じ色にすると、文字の方が面積が圧倒的に小さいので薄く見えます。

なので、背景色と同じ見え方にするには文字色の方を濃く調整します。

☆10位 色の錯覚

ラスト、10位は錯視です。
10個くらい錯視の種類が出てきますが、3つだけ紹介。

76-20

実際の使い所

デザインで特に気をつけたいのは『リープマン効果』。
ハレーション(縁がギラギラ光って見えること)が起こって読みにくくなるし、非デザイナーのHPで見る配色なので、絶対避けたいところです。

さいごに

色彩検定の『Webデザインに活かせる知識 TOP10』でした。
Webに限らず、デザイン全般に通じる内容かと思います。

改めてまとめてみると、全部同率1位から3位と言ってもいいくらい、甲乙つけ難かったです。
それぞれ独立した知識ではなく、関連してる部分もありますし。

順位は参考程度に受け取ってもらえたらと思います。

自分は最初、『トーン』という概念を目にしても、それが実務で実際使う知識とは知らずに頭に残りませんでした。

なので、この記事で『参考書の中だけの知識ではなく、実際使う知識』という意識を持ってもらえたらと思います。

あと自分みたいに『デザインやりたいけど、色彩検定必要なの?』と迷ってる人の参考になればと。

検定を受ける必要はないけど、デザインに有用な知識は多々含まれてます。

参考書籍

色彩検定の参考書は書店で色々見て良さげなのを選べば、大外れはないと思います。
一応自分が使ってこの記事を書くのにも参考にしたのはこの本です。

色彩検定の本じゃないけど、2級3級の知識を一通り知りたいという方には、この本がオススメです。

2級3級の知識が網羅されていて、ボリューム的にも内容的にも充実してます。
なぜ色彩検定の参考書としてアピールしないのか疑問な程、色彩検定の内容を学ぶのに最適な良書です。

あと一冊、身近な商品などの実例で色の理由がわかるこの本もオススメです。

知っている商品などの色の根拠や効果がわかって、目からウロコな情報が満載です。
Webデザイン以外の実用例がメインですが、デザインする際の色選びの参考にもなるし、配色の意識自体が高まると思います。

参考スライド

配色の参考になるスライドです。

ノンデザイナーのための配色理論

色彩センスのいらない配色講座

Webデザインのための配色セオリー

色で失敗しない為に 〜理論に基づく配色フロー〜

理詰めスライド(色彩編)

Webデザインにちょっと役立つ色のはなし

デザインで使う「色」について考えよう

 
【関連記事】
『Webデザインに活かせない色彩検定の知識 WORST5』