こんにちは。ディレクターのtakikawaです。

デザインをするうえで重要な要素のひとつに“色”があります。WEB、ポスターやパンフレット、そして提案書だって、色によってさまざまに印象が変わってきますよね。
デザインの仕事では色を選んで他の人に伝えたり、あるいは選んだ色の変更を人にお願いしたりするシーンがよく発生します。
例えばデザイナーが、ディレクターから「クライアントの要望で、サイトのメインカラーは青にしたいと言われた」と伝えられました。青ではあまりにおおざっぱですので、どういう感じの青にしたいか?を確認しなければなりません。
そんな時「う〜ん。どちらかといえば深い青かな」とか「割と落ち着いた青のことだと思うけど」といった会話がかわされるのではないでしょうか。しかし「深い青」とか「落ち着いた青」って、人それぞれの感覚のように思えます。色を言葉で表現するのって難しい…。いったい何を基準にすればいいのでしょう。
そこで今日は、WEB制作の際に把握しておきたい色彩の基礎知識の中から「言葉による色の表現を、実際の色に置き換えるための知識」をとりあげたいと思います。

 

基本となる「色相」について

色相とは、赤、黄色、緑、青、紫といった色味のことです。こんな感じです。

 

 

 

 

 

 

 

 

色相について、もう少し詳しく見ていきます。

色相を近しい順番に並べて輪にしたものを色相環(しきそうかん)といいます。すると180度反対で向かい合う色は、一番遠い色ということになりますが、これを「補色」といい、お互いの色をより引き立てあうことができるとされています。
下の色相環は、24色を横に並べたものです。この数は、もっと多くしたり少なくしたりすることもあります。増やすほど最初の選択の幅がひろがり、減らすとその逆ということはおわかりいただけますよね。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

この24色はPCCS(日本色研配色体系)準拠の色で、このような名称がついています。

1:pR(purplish Red)紫みの赤
2:R(Red)赤
3:yR(yellowish Red)黄みの赤
4:rO(reddish Orange)赤みのだいだい
5:O(Orange)だいだい
6:yO(yellowish Orange)黄みのだいだい
7:rY(reddish Yellow)赤みの黄
8:Y(Yellow)黄
9:gY(greenish Yellow)緑みの黄
10:YG(Yellow Green)黄緑
11:yG(yellowish Green)黄みの緑
12:G(Green)緑
13:bG(bluish Green)青みの緑
14:BG(Blue Green)青緑
15:BG(Blue Green)青緑
16:gB(greenish Blue)緑みの青
17:B(Blue)青
18:B(Blue)青
19:pB(purplish Blue)紫みの青
20:V(Violet)青紫
21:bP(bluish Purple)青みの紫
22:P(Purple)紫
23:rP(reddish Purple)赤みの紫
24:RP(Red Purple)赤紫

この図では8と20の色は補色の関係にあるわけですね。
まずはここから使用する色味(色相)を選びます。
例えば青なら18を選んでみます。そしてもう少しだけ紫に寄せてみたらどうだろう?と思ったら、隣の19で試してみればよいわけです。

 

「色相」に加わる「明度」と「彩度」とは

さて、「色相(Hue)」の次に色を決める要素は「明度(Brightness)」「彩度(Saturation)」です。この三つで色の3属性と呼ばれ、色の“モノサシ”となります。

<明度(Brightness)>
色の明るさのことです。明度を上げると白っぽくなり、明度を落とせば暗くなります。

 

 

 

 

 

 

 

 

<彩度(Saturation)>
色の鮮やかさのことです。「原色」という呼び名がよく使われますが、それぞれの色相でもっとも彩度が高い色が原色です。前に掲載した色相環では、もっとも彩度が高い原色が使われています。ここから彩度をどんどん低くしていくと最後には無彩色(灰色)になります。

 

 

 

 

 

 

なお色は大きく色味を持つ「有彩色」と、色味を持たない「無彩色」に分けられます。「無彩色」とは「白」、「灰色」「黒」で、彩度を持たず、明度のみで表されます。
JIS(日本工業規格)では有彩色10種類、無彩色3種類を基本色名としています。

<有彩色の基本色名(10種類)>
赤、黄赤、黄、黄緑、緑、青緑、青、青紫、紫、赤紫

<無彩色の基本色名(3種類)>
白、黒、灰色

 

「色相」「明度」「彩度」でトーンが生まれる

色相に明度と彩度を合わると、「トーン」という概念が生まれ、色の調子を表すことができます。色は明るい、暗い、薄い、濃いなど、誰もが共通してイメージする「調子」をもっています。デザインのテイストを決める打ち合わせ時には、この概念を把握しておくと大変便利です。下の図をご覧ください。

 

v、b、sなどは「トーン記号」といいます。
各記号は、それぞれ次のような色の調子を表します。

●トーン記号v(vivid)ビビッド
さえた、鮮やかな、派手な、目立つ、生き生きとした

●トーン記号s(strong)ストロング
強い、くどい、動的な、情熱的な

●トーン記号b(bright)ブライト
明るい、健康的な、陽気な、華やかな

●トーン記号dp(deep)ディープ
深い、濃い、充実した、伝統的な、和風の

●トーン記号lt(light)ライト
浅い、住んだ、子供っぽい、さわやかな、楽しい

●トーン記号sf(soft)ソフト
やわらかな、穏やかな、ぼんやりした

●トーン記号d(dull)ダル
鈍い、くすんだ、中間色的

●トーン記号dk(dark)ダーク
暗い、大人っぽい、丈夫な、円熟した

●トーン記号p(pale)ペール
薄い、軽い、あっさりした、弱い、女性的、若々しい、優しい、淡い、かわいい

●トーン記号ltg(light grayish)ライトグレイッシュ
明るい灰みの、落ち着いた、渋い、おとなしい

●トーン記号g(grayish)グレイッシュ
灰みの、濁った、地味な

●トーン記号dkg(dark grayish)ダークグレイッシュ
暗い灰みの、陰気な、重い、固い、男性的

 

以下は無彩色ですので彩度はなく明度のみの差異になります。

●トーン記号w(White)ホワイト
白、清潔な、冷たい、新鮮な

●トーン記号ltGy(light Gray)ライトグレイ
明るい灰色、スモーキーな、しゃれた、寂しい

●トーン記号mGy(medium Gray)ミディアムグレイ
灰色、スモーキーな、しゃれた、寂しい

●トーン記号dkGy(dark Gray)ダークグレイ
暗い灰色、スモーキーな、しゃれた、寂しい

●トーン記号Bk(Black)ブラック
黒、高級な、シックな、おしゃれな、締まった

 

デザインチェックの際に、「もっと深い青のほうがいいんじゃないかなあ」ということになったら、図の「dp」に向かっていく、つまり明度を低めに、彩度を低めに寄せてみればいい、ということになりますね。
「もう少しさわやかな青で見てみたいですね…」であれば「lt」に向かう、つまり明度高めに彩度を中間あたりに寄せていきます。
抽象的に思えた言葉による色の表現が、これではっきりしてくると思います。

 

慣用色名で伝えることも

言葉で色を表現する場合、藍色、コバルトブルー、マリンブルーなど、固有の色名を使うこともあります。

顔料、染料、動物、植物、鉱物などの名前を使って表す色名のことを「固有色名」といいます。その中でも、比較的よく知られている色名を「慣用色名」といいます。現在JISの慣用色名は269色制定されています。(和色名147色、外来色名122色)
よく耳にする「朱色」「群青(ぐんじょう)色」「マリンブルー」「コバルトブルー」「エメラルドグリーン」「ターコイズブルー」など、みなさんはとっさに思い浮かべることはできますか? 「ワインレッド(こい紫みの赤)」と「ボルドー(ごく暗い赤)」の違いを見分けることはできますでしょうか?
聞きなれた色名でも、調べて見てみると、自分が思い浮かべていたものとなぜか微妙に違うときがあります。しかしながら一般的な言葉でもありますので、相手もこういう表現で希望を伝えてくるかもしれません。
インターネットでも「慣用色名」で検索すると一覧が閲覧できますので、確認してみてはいかがでしょう。

<参考サイト>
color-sample.com

 

まとめ

いかがでしたか?
以上のことを知っておけば、色を選んだり調整したりした場合、ただ「青です」というだけではなく、「この色は『紫より』の『あざやか』な青です」というように具体的な表現をすることができます。さらに「目立つように」「生き生きとした感じにするため」など、この色を選択した理由も明確に伝えることができます。
これを把握しておけば、相手に対し配色について論理的な説明がしやすくなると思います。画像ソフトをマスターするのと同時に、こういう基礎知識も覚えておくと便利ですね。ではまた!

<関連記事>
デザイナーでないあなたも、 お助けツールで配色に強くなる