色のこと、押さえておけば役に立つ!色そのものの基本のき

色の基本 デザインの基本

デザイン作成の工程で配色について学びました。メリハリ、グルーピング、雰囲気付け。ここでは配色に使う色についてさらに分解して考えてみたいと思います。

配色は3つのポイントで、分かり易く見栄え良く
配色の手順とポイント3つ 前工程が決まっていれば、配色に迷うことはありません いよいよ大詰め配色の工程です。一つ前の工程であるレイアウトがしっかり出来ていれば、配色はさほど難しくありません。逆にレイアウトが曖昧なままでは、配色だけでは解決し...

フォントと同じように、色も無数に存在します。ただ、そう考えてしまうととても難しい。そこでこの記事では頭を柔らかくして、12色の絵の具を思い描いてみてください。

小学生のころに図工の授業で使っていた水彩絵の具。好きな絵を塗るために、もう少し違う色を使いたい、そんな時にパレットの上で絵の具同士を混ぜ合わせ、無い色を作り出したと思います。

色の基本を考える時も、絵の具をイメージすると分かりやすいと思います。ぜひ柔軟に考えてみてください。決して難しいものではありません。

色の三属性、分解すると3つの要素で成り立っています

色は大きく分けると色相、明度、彩度の3つの要素で成り立っています。無数に有る色の種類も、この3つの要素と絡めながら考えれば、すんなり理解することができるでしょう。

色相は色みの違いを表す要素、色相環で考えよう

初めに挙げる要素が、赤や青、黄色や緑といった色の名前で表現できる色相です。色相を考えるときには、色相環(しきそうかん)という虹色のように順に変化していく色を体系的に環状に表した図を使うと理解しやすくなります。

どの色とどの色が近く関連性があるのか、離れて対極にある反対色は何色なのかを、直感的に理解、把握することができます。

色相環

明度は同じ色だったときの明るさの度合い

次に色相で同じ色だった場合の明るさの度合いを明度といいます。白から黒へのグラデーションの階調も明度を表しており、黒のときに明度が低く、白に近づくに従って明度が高くなっていきます。

色が付いていても同じで明度が低くなると黒に近づいていき、高くなると白に近づきます。

明度

彩度は色の鮮やかさを決める要素

色そのものの強さの度合いを表すのが彩度で、彩度が高ければその色味が強く、低くなるにつれて黒や白などの無彩色に近づいていきます。

彩度

三属性それぞれの変化を図でみるとわかりやすい

色相は色味の違いなので3つの中ではイメージがしやすいと思います。明度と彩度については2つの要素が絡み合っているようで、理解が難しいかもしれません。

オストワルト表色系

その場合には上のような図をイメージしてみてください。この図では色相を青色として固定したときの彩度と明度を表現した図になります。

青や赤などその色だけを純色といいますが、純色が多いと彩度が高く、少ないと彩度が低くなります。これが図の縦軸。

そこに含まれる白と黒の量が明度で白が多いと明度が高く、黒が多いと明度が低くなります。これが図の横軸で表現されています。

まず色相環をイメージして色味を選び、彩度と明度を考えて色を決定します。初めは少し難しいかも知れませんが、慣れてくると自然と三属性を使って色彩設計ができるようになります。

ざっくり分ければ虹色プラス白と黒

色相環を思い浮かべて考えられるようにすると便利

三属性を理解したら具体的な配色の手順を考えていきましょう。まずは色相環を思い浮かべて、色味を決定します。

色相環を思い浮かべて

組み合わせは近い色と、遠い反対色、どこを組み合わせるのか。デザインの意味合いを考えながら置いていきます。

考えすぎても始まらない、迷ったら全色置いてみる

なかなか決まらないという場合には、色相環を思い浮かべながら全部置いていきましょう。無数にあるといっても色合いは赤、橙、黄、緑、青、紺、紫と大まかに分けて7色程度です。

PowerPointなどで配色していたら、オブジェクトをコピーして欄外に置くなどし、違う色のデザインをそれぞれ並べてみましょう。その中からピンと来たものを選択すればOKです。

組み合わせは同系色か反対色

組み合わせは、同じグループとして同系色を置くのか。それとも別のものとして、又はメリハリをつけるため反対色を置くのか。

以下に紹介する色のもつイメージなども使って色を選びます。

あわせて覚えたい、代表的な色のイメージ

色にはそれぞれ連想させる固有のイメージというものが存在します。例えば自動販売機のホットとコールド、トイレの男性用と女性用など、色が付いていれば直感的にどちらか迷わず分かるというイメージがありますよね。

そういった色そのものの固有のイメージが、色を選ぶときの手助けをしてくれます。知識として代表的なものを押さえておきましょう。

暖色と寒色、前進色と後退色

まずは色彩について本格的に学ぶなどしなくとも、一度は聞いたことがあるであろう暖色と寒色。その字が表すとおり暖かい温度を感じさせる色、その逆に寒々しい温度を感じさせる色です。

暖色と寒色

そしてもうひとつ前に進んでくる、他のものより前面に浮き出てくる前進色。その逆にほかよりも後退して見える、沈んで見える後退色。目立たせたい場合、逆になじませ落ち着かせたい場合にそれぞれ選択します。

前進色と後退色

季節感と雰囲気と、記憶のイメージを色に置き換える

さらに具体的なイメージから連想される色を見ていきましょう。季節の色

四季にはそれぞれ固有のイメージがありますね、季節の花や気候、イベントなどから連想される色。春であれば桜のピンク、菜の花の黄色。同じ黄色でも夏のひまわりの黄色や海の青。秋の紅葉の色に、冬の雪景色の色。

感情の色

さらに人の感情から連想される色もあります。カワイイ雰囲気の優しい色。重い重厚なで暗い色、軽いライトな色合い、格好いいハッキリとした色。ゴージャスな雰囲気の色。

そのデザインが醸し出す雰囲気や感情から配色することもできます。

企業カラーなど、連想する色も押さえておきましょう

さらに企業やプロダクトから連想される色もありますね。有名な清涼飲料水メーカーだったり、衣料品やIT関連サービスでもその企業が提供するサービスや製品が連想させる色がすぐに自然と出てくると思います。企業のイメージカラー

多くの人が持っている色のイメージをあらかじめ知識として持っておき、配色に利用するのも有効な手法になります。

連想はデザインを考えるうえでとても重要なポイント!

このような連想は配色だけにとどまらず、デザインのアイデアを出すうえでも強力な武器になります。

普段からいろいろなものに興味を持ち、観察することで連想の引き出しが増え、限られた情報から別の情報を連想することでアイデアとすることが出来ます。ひいてはそれがデザインの引き出しとなってくるのです。

要確認!CMYKとRGBはデザインの使いどころで切り替える

そのデザインは画面に映す?印刷する?

最後に知っておきたい重要な要素であるCMYKRGBについても触れておきたいと思います。デザインの作成中ももちろんですが、作ったあとのアウトプットにも影響する重要な項目ですのでしっかりと押さえておきましょう。

CMYKとRGBとはざっくりいうと配色なりでデザインした色をどのように表現するか、その表現の種類になります。CMYKは主に印刷のインク、RGBは主にPCやテレビなどのディスプレイと考えていただければ大丈夫です。

絵の具のイメージCMYK、印刷物の色指定

作ったデザインを最終的に印刷する場合に使用するのがCMYKです。一般的な業務用の印刷機は4色のインクを組み合わせて全ての色を表現しており、それぞれC(シアン)M(マゼンタ)Y(イエロー)K(ブラック)の4色です。

インクの混色CMYK

雑誌やチラシなどの印刷物をルーペで拡大して見ると、この4色のインクの組み合わせ。それぞれの割合の違いにより色を表現していることが分かります。

絵の具をイメージしてみると分かり易いでしょう。黄色(イエロー)と青(シアン)を混ぜると緑が出来たり、赤(マゼンタ)と青(シアン)を混ぜたら紫の色ができますね。

何もインクを使わなければ紙そのものの色、つまり白となり黒はブラックのインクを使用します。

そしてCMYKで重要なポイントは、4色のインクを組み合わせて色を作り出すために表現できる色の範囲が後述するRGBほど広くはありません。画面で表現するような明るい色や蛍光色を表現することができず、使ってしまった場合にはくすんだ色として印刷されてしまいます。

最終的に印刷する資料デザインや、チラシのデザインをする場合にはCMYKで色の指定をし、CMYKが表現できる範囲で配色をしましょう。

モニタに映すならRGB、光の3原色

もうひとつ最終的なアウトプットがPCの画面や、プロジェクターに映し出すプレゼン資料の場合にはRGBで色指定をします。

光の三原色RGB

R(レッド)、G(グリーン)、B(ブルー)の三色の光を使って色を表現し、全ての色を消すと画面本来の黒、全ての色を点灯させると白を表現することができます。

液晶モニタなどの画面をルーペなどで拡大してみると、細かい3色の光の粒が敷き詰められているのがわかると思います。

RGBでの色指定は光の強さで階調を表現できるため、CMYKに比べてはるかに広い色域(色の種類)を扱うことができます。反面、明るすぎる色を指定することが出来てしまうため、目がチカチカしてしまうなど見やすい色を使うことへの注意が必要です。

長くなりましたが、色の基本について確認してきました。奥の深い色のほんの序の口の部分だけに触れましたが、ここだけ押さえておくのでもデザインを考えるのがとてもスムーズになるかと思います。

一度で全て把握し、覚える必要などはありません。配色、色のことで迷うことがあれば何時でもこのページで基本を確認できるようにだけしておいてください。折を見て基本に振り返ることで、着実にデザイン力をつけることができます。

タイトルとURLをコピーしました