CREATIVE SKILLS

初心者向けカラーデザインの学習 #1【配色とは】

初心者向けカラーデザインの学習 #1【配色とは】

こんにちは、

氷河期世代クリエイターのYOHEIです。

今回は、初心者向けのカラーデザインのお話です。

そのPart1ということで、配色(カラーデザイン)についての基礎知識を紹介します。

デザインをしたことがない方からすれば「配色ってセンスがないと難しいのでは?」と思われるかもしれませんが、知っているだけですぐに仕事の企画書やブログサイトに活かせる知識がけっこうあります。

例えばデザインをやった事がない方やデザインに関わりがなかった方は、サイトを作るときなどの配色を感覚でされていると思います。

それでイメージどおりにできていれば良いのですが、

うまくできていますか?

 

悩んでる方
なんか、まとまった感じがしない。

目がチカチカして見ずらい感じになってしまった。

クールな印象にしたいのに、雰囲気が暗いだけの感じになってしまう。

 

本記事は、こういった悩みの解決に役立つと思います。

 

本記事の内容

もくじ

1.【配色とは】カラーデザインの学習で最初に知っておくべき色の基本概念

2. 色を決定づける、色の三属性

3. トーン(色調)について

4. まとめ:配色するなら、最低限知っておきたい色についての基礎知識

 

本記事の信頼性

この記事を書いている私は、デザイン歴20年ほどです。

カラーデザイン初心者の方に、できるだけわかりやすく紹介したいと思います。

(・o・)/

 

1.【配色とは】カラーデザインの学習で最初に知っておくべき色の基本概念

まずはじめに、色が見える基本概念(しくみ)について紹介します。

色には「光の三原色」「色材の三原色」があります。

原色とはすべての色のもとになる色で、それぞれ三つの原色があります。

その三原色を混ぜ合わせることで、どんな色も作ることができます。

では「光の三原色」と「色材の三原色」の違いを見てみましょう。

配色とは「光の三原色」と「色材の三原色」があります。

 

光の三原色とは

・発光によって見える色。

・「Red:赤」「Green:緑」「Blue:青」の三色。

・混色方法は、混ぜるにつれて白くなる(明るくなる)「加法混色」で色を作ります。

いわゆる「RGBカラー」と呼ばれているもので、TVやパソコンモニターの表示など発光するものは、この方法で色を表示しています。

 

色材の三原色とは

・色材(絵の具など)によって見える色。

・「Cyan:シアン」「Magenta:マゼンタ」「Yellow:イエロー」の三色。

・混色方法は、混ぜるにつれて黒くなる(暗くなる)「減法混色」で色を作ります。

いわゆる「CMYKカラー」と呼ばれているもので、印刷物など光が当たって反射して見える色は、この方法で色を表示しています。

 

ここで「CMYK」の「K」って何?となると思います。

「K」は何かというと、黒色インキのことで、シアン・マゼンタ・イエローの3色を同じ割合で混ぜ合わせると理論的に黒色になるのですが、実際は濃い茶色のような色になります。そこで、印刷では黒を再現するために黒色インキを加えます。

なので、CMYKが印刷の四原色とされています。

 

2. 色を決定づける、色の三属性

色を決定づける、色の三属性

色には「色相(Hue:ヒュー)」・「明度(Value:バリュー)」・「彩度(Chroma:クロマ)」という三属性があります。

この3要素を理解することが、配色をしていくうえでとても重要になります。

では、それぞれについて見てみましょう。

 

色相(Hue:ヒュー)とは

一言でいうと、赤・黄・青・紫といった「色味」のことで、イメージの違いを表現するのに最も優れた要素です。

色相を円環状に配置したものを「色相環」といいます。

色相環は「記号」や「数字」で色を表すことができるので、言語の壁を越えたコミュニケーションが可能です。また、色を体系化する時や配色を考える際に役立ちます。

色相環には「マンセル色相環」・「PCCS色相環」・「オストワルト色相環」の3つがあり、なかでも「マンセル色相環」は、世界的に普及しています。

 

【マンセル色相環について】

マンセル色相環

この図の色相環は「マンセル色相環」というもので、アメリカの画家マンセルが創案し、アメリカ光学会が修正を加えて現在の形になっりました。

この色相環は、時計回りに等間隔に配置された「R(赤)・Y(黄)・G(緑)・B(青)・P(紫)」を主要5色と、その間に「YR(黄赤)・GY(黄緑)・BG(青緑)・PB(青紫)・RP(赤紫)」の5色を加えた、合計10色で成り立っています。また、色名の前に表記されている数字は、主要10色相がそれぞれ4分割されて2.5、5、7.5、10の数字が当てられたもので「5R、10R」などと表示されたものです。

この図をみるとわかるように、色相環には同じ赤でも黄色よりの赤や、青よりの赤といったように、いろいろな種類の赤があることがわかりますね。それはなぜかというと、色は光の波長の違いによって赤・橙・黄・緑・青・紫というように連続的に変化して知覚されます。それを連続的に配列し円環状にしているからです。

 

色相環について詳しく知りたい方はこちらを

参照サイト:DICカラーデザイン株式会社 マンセル表色系とは

 

【補色とは】

色相環を初めて見ると、なんだか難しそうに思うかもしれませんが、一つだけ覚えておくと役立つことがあります。それは、それぞれの色の正反対側の色を「補色」といいます。

補色は隣接して配置すると、お互いに引き立て合って鮮やかに見えます。なので、効果的に配色すると印象の強い配色にすることができます。しかし、配置場所や割合等によっては、チカチカ(ハレーションを起こす)してまぶしく見づらい印象になります。

もう一つの特徴として、補色どうしを混ぜると無彩色(灰色)なります。

補色とは

 

明度(Value:バリュー)とは

明度とは、色の明るさの度合いのことです。

明度を上げると白になり、明度を下げると黒になります。

白色がもっとも明度が高い色で、黒色がもっとも明度が低い色です。

また色に明度差があるほど、お互いの色が見えやすくなります。

明度(Value:バリュー)とは

 

彩度(Chroma:クロマ)とは

明度とは、色の鮮やかさの度合いのことです。

有彩色の中でもっとも彩度が高い太陽光のスペクトルの色を「純色」と呼びます。

彩度を低くしていくと色味を感じない色になっていき、最後は「無彩色(灰色)」になります。

一般的に彩度が高いほど派手で印象に残りやすく、彩度が低いほど地味で印象に残りにくいですが、使い方と内容やデザインによります。

●彩度が高い:派手・奇抜・POP・若い

●彩度が低い:地味・シック・クラシカル・お年寄り

彩度(Chroma:クロマ)とは

ポイント

【色彩には「有彩色」と「無彩色」がある】

色彩には色味のある「有彩色」と、白・黒・灰色といった色みを感じない「無彩色」があり、少しでも色味があれば有彩色となります。

色彩には「有彩色」と「無彩色」がある

 

3. トーン(色調)について

トーンとは、明度と彩度との関係による色の調子のことです。

純色と無彩色との混ざり具合で、明るい~暗い、淡い~濃い、弱い~強いなどの幅広いトーンを作ることができます。

色を調整するときに、明度と彩度のどちらかを固定して色相を変えると、統一したトーンを得ることができます。

全体のトーンを合わせると、まとまりのある配色となり世界観やイメージを統一することができます。

なので、トーンを意識してコントロールできることが、配色するうえで重要になります。

参考としてPCCS(日本色研配色体系)が定める色相環カラーチャートを紹介します。

トーン(色調)について

PCCSでは色調(トーン)による色の分類法を設定していて、ビビッド、ソフト、ペールなど、鮮やかさの印象によって12の色調群に分けられています。ビビッドトーンは純色に近い色のグループで、この明度を上げていくと淡く明るい調子のペールトーンに、明度を下げていくと濃く暗い調子のダークグレイッシュトーンになります。

※各色彩を厳密に再現したものではありません。閲覧環境により色彩が異なって見える場合があります。

また、それぞれのトーンにはイメージがあります。

【ビビッドトーン:鮮やか・冴えた・いきいきした・派手】

article_srgb_200706_vivid

 

【ブライトトーン:明るい・健康的・陽気】

article_srgb_200706_bright

 

【ストロングトーン:強い・動的・情熱的】

article_srgb_200706_strong

 

【ディープトーン:深い・伝統的・濃い】

article_srgb_200706_deep

 

【ライトトーン:浅い・さわやか・幼い・楽しい】

article_srgb_200706_light

 

【ソフトトーン:柔らかい・穏やか】

article_srgb_200706_soft

 

【ダルトーン:鈍い・くすんだ】

article_srgb_200706_dull

 

【ダークトーン:暗い・大人っぽい・重厚】

article_srgb_200706_dark

 

【ペールトーン:淡い・軽い・弱い・女性的・若々しい・かわいい】

article_srgb_200706_pale

 

【ライトグレイッシュトーン:穏やか・落ち着いた】

article_srgb_200706_lightgrayish

 

【グレイッシュトーン:渋い・濁った・地味】

article_srgb_200706_grayish

 

【ダークグレイッシュトーン:深く重い・陰気・男性的】

article_srgb_200706_darkgrayish

 

最後にトーンの見え方の一例です。

article_srgb_200706_8

トーンがバラついた状態とトーンが揃った状態だと、見え方に違いがあります。どちらが良いというより、意図した見え方になっていればOKです。

 

4. まとめ:配色するなら、色について最低限知っておきたい知識がある。

今回は初心者向けカラーデザインの学習として、配色するうえで最低限知っておきたい色についての基礎知識を紹介させていただきました。

今回の内容をおさらいとしてまとめました。

まとめ

●色には「光の三原色(RGB)」と「色材の三原色(CMYK)」がある

・光の三原色:発光によって見える色で「Red」・「Green」・「Blue」の三色。混色方法は、混ぜるにつれて白くなる(明るくなる)「加法混色」。

・色材の三原色:色材(絵の具など)によって見える色で「Cyan」・「Magenta」・「Yellow」の三色。混色方法は、混ぜるにつれて黒くなる(暗くなる)「減法混色」。

●色には「色相」・「明度」・「彩度」という三属性がある

・色相:赤・黄・青・紫といった色味のこと!

・明度:色の明るさの度合いのこと!

・彩度:色の鮮やかさの度合いのこと!

●トーンとは、明度と彩度との関係による色の調子のこと!

全体のトーンを合わせると、まとまりのある配色となり世界観やイメージを統一することができる!

ということで今回の初心者向けカラーデザインの学習 #1【配色とは】はここまで。

最低限、今回の内容を知っているのと知らないのでは、配色に大きな違いがでます。なので、ここまで読んでもらえたらレベルアップしていると思います。

また、ここまでの内容でもサイトデザインや企画書などに十分活かすことができます。

今まで何も意識せず配色していたなら、一度今回の知識を試してみてください。

次回も配色について、さらに深掘りしていきます。

ではでは。

(・o・)/

おすすめの配色サンプルブック




《人気関連記事初心者できた!ワードプレスブログ始め方Step1【すぐ開設!準備編】

-CREATIVE, SKILLS