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

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

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

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

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

色相を近しい順番に並べて輪にしたものを色相環（しきそうかん）といいます。すると180度反対で向かい合う色は、一番遠い色ということになりますが、これを「補色」といい、お互いの色をより引き立てあうことができるとされています。
下の色相環は、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)赤紫

この図では８と２０の色は補色の関係にあるわけですね。
まずはここから使用する色味（色相）を選びます。
例えば青なら１８を選んでみます。そしてもう少しだけ紫に寄せてみたらどうだろう？と思ったら、隣の１９で試してみればよいわけです。

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

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

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

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

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

＜有彩色の基本色名（10種類）＞
赤、黄赤、黄、黄緑、緑、青緑、青、青紫、紫、赤紫

＜無彩色の基本色名（3種類）＞
白、黒、灰色

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

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

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

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

●トーン記号ｓ（strong）ストロング
強い、くどい、動的な、情熱的な

●トーン記号ｂ（bright）ブライト
明るい、健康的な、陽気な、華やかな

●トーン記号ｄｐ（deep）ディープ
深い、濃い、充実した、伝統的な、和風の

●トーン記号ｌｔ（light）ライト
浅い、住んだ、子供っぽい、さわやかな、楽しい

●トーン記号ｓｆ（soft）ソフト
やわらかな、穏やかな、ぼんやりした

●トーン記号ｄ（dull）ダル
鈍い、くすんだ、中間色的

●トーン記号ｄｋ（dark）ダーク
暗い、大人っぽい、丈夫な、円熟した

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

●トーン記号ｌｔｇ（light grayish）ライトグレイッシュ
明るい灰みの、落ち着いた、渋い、おとなしい

●トーン記号ｇ（grayish）グレイッシュ
灰みの、濁った、地味な

●トーン記号ｄｋｇ（dark grayish）ダークグレイッシュ
暗い灰みの、陰気な、重い、固い、男性的

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

●トーン記号ｗ（White）ホワイト
白、清潔な、冷たい、新鮮な

●トーン記号ｌｔＧｙ（light Gray）ライトグレイ
明るい灰色、スモーキーな、しゃれた、寂しい

●トーン記号ｍＧｙ（medium Gray）ミディアムグレイ
灰色、スモーキーな、しゃれた、寂しい

●トーン記号ｄｋＧｙ（dark Gray）ダークグレイ
暗い灰色、スモーキーな、しゃれた、寂しい

●トーン記号Ｂｋ（Black）ブラック
黒、高級な、シックな、おしゃれな、締まった

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

慣用色名で伝えることも

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

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

＜参考サイト＞
color-sample.com

まとめ

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

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