デザイナー初級編 デザイン

狙った色を作りだそう!色の基本をわかりやすく解説!

あなた

色彩検定を受けるとかではないのですが、デザイナーとしてはやっぱり色の基本は身につけておいた方が良いかなと思っています。

そもそも、色ってどうなっているんですか?作り方は?

色紙検定などの試験を受ける訳ではないのでしたら、ガツガツと色の勉強をしなくても良いです。

基本部分だけでも知っておくと良いです。

色の基本をきちんと理解すれば、色で悩んで多くの時間を取られることが少なくなりますので、ぜひこの機会に学んでおきましょう。

ポイント

  • 色相・彩度・明度のこと
  • 色はどうやって作るのか
  • 色はどんなイメージを持っているのか

以上が今回学ぶポイントです。

この記事を書いた人

【主なWebメディアの実績は以下です】
>HOUSTO-おウチの収納.com
>売場の安全.net

そして私はデザイン学校に通わずに、営業マンから独学でデザインを習得して、独立しました。

この記事を読むと、色のことが理解でき、数値で色が作れるようになり色の数値分解までが出来るようになります。

色彩の基本知識

色を客観的に表す方法はいくつかありますが、直感的に理解しやすいのが「HSB(Vという場合もある)の3属性」です。

まずHSB3属性から覚えていきましょう。

ポイント

  • 色相(Hue=色味)
  • 彩度(Saturation=鮮やかさ)
  • 明度(Brightness=明るさ)※「Value」という場合もある

HSB

「鮮やか」とか「明るい」とか、普段何気なく感覚で言っているもののことですので、身近に感じられると思います。

色相(Hue)

赤や黄、緑、青などのその色の「色味」のことをいいます。
普段、色を示す時に何色の〜と言っているのは色味のことになります。

彩度(Saturation)

その色の「鮮やかさ」を示します。
彩度が高いほど鮮やかで、低くなるほど灰色になります。彩度がゼロだと無彩色(黒・グレー・白)になります。

明度(BrightnessまたはValue)

色の「明るさ」のことをいいます。
色相が同じでも、明度が低いほど黒っぽくなり、高いほど明るい色になります。

やや難しいかもしれませんが、大前提となる部分です。目に見える色にはこの3つの要素が備わっていることを覚えておきましょう。

3色の組み合わせで狙うイメージカラー作り

3原色

シアン、マゼンダ、などと聞くと、パソコンのプリンターや会社の複合機などのインクやトナーをイメージするかと思いますが、まさにそれです。
これらのインクやトナーは色の3原色で、プリントや印刷はこの3原色+ブラック(K)で色を出しています。

モニターなどで見る色は「光の三原色」と呼ばれ、R(レッド)・G(グリーン)・B(ブルー)で色が構成されています。

パソコン画面で見る色と、本で見る色とは、色の構成が違うのでお間違えないように!

まずは、C・M・Yの基本3色で組み合わせを作ってみましょう。

色の三原色

  • C(シアン=青系)
  • M(マゼンダ=赤系)
  • Y(イエロー=黄)

1.色相を決める

使いたい色味3色(C・M・Y)をC+M、M+Y、Y+Cで100%と50%で組み合わせて行くと、ほぼすべての色相を表現することができます。

混色

1.色相を決める

  • 元となる色+1色100%
  • 元となる色+1色50%

→CMYの3色を総当りで組むと標準色のような鮮やかな色が作れる

この中から、イメージに近い色を選びましょう。

2.明度を決める

色の明るさを設定していきます。

パソコン上のCMYでは、白を足すのではなく、数値を下げていくことで明るさ調節ができます。

逆に暗くしたい場合はK(ブラック)を足していきます。

明度

2.明度を決める

  • CMYそれぞれに無彩色(白⇔黒)を足す
  • 白を足す場合、Illustratorなどでは、CMYそれぞれの%を下げる(C=100% → C=70%など)

3.彩度を決める

鮮やかさをそのまま保つ場合は何もしなくてOKです。
鮮やかさを減らして、くすませていきたい時は、使っていない色を混ぜていくと濁りが増していきます。

このように彩度を調節してみてください。

彩度

4.微調整して狙った色を作る

色の方向性が決まったら、あとはCMY(暗くしたい場合はKも)の数値を微調整してみましょう。

ここで以下のことを意識してください。

ポイント

Illustratorで調色する場合、できるだけキリのいい数字でフィニッシュする(5%単位)

なぜなら、微妙な数値(小数点など)では、今後色を構成する時に何をどれくらい足せばこういった色になる、という感覚的なことを覚えにくいからです。

できるだけキリの良い数値でフィニッシュして、色の足し引きの感覚を養っていきましょう。

このように足したり引いたりして色を作っていくと、色を数値的に理解できるようになり、色を見ただけでCMYKの数値分解ができるようになりますので、あっという間に狙った色を作れるようになります。

色の持つイメージ

色、それだけで大きく印象を変えてしまいます。色の持つ性格を理解して正しく選びましょう。

どの色味もポジティブ要素とネガティブ要素を持っています。
以下のようにまとめてみました。

色のイメージ

良し悪しがあるので、適切に使い分ける必要があります。
例えば、冬の防寒アイテムのチラシに、若者向けだからといって青を使うのは、慣習に合っておらず寒々しく感じるので間違っています。

しかし、適切に選べば間違いなくイメージにぴったりとなりますので、

ポイント

  • 誰に
  • いつ
  • どのような

いう基本的なことをベースに選びましょう。

間違った色選びをしてしまうと、思いっきりマイナスイメージになります。
色選びは慎重に、慣習やその場面にあった適切な色を選択してください。

まとめ

この先、配色について学ぶ前にまず色というものがどのような要素でできているかということを理解して、きちんと自分で色を作れるようになっておきましょう。

HSB3属性

  • 色相(Hue=色味)
  • 彩度(Saturation=鮮やかさ)
  • 明度(Brightness=明るさ)※「Value」という場合もある

色の三原色

  • C(シアン=青系)
  • M(マゼンダ=赤系)
  • Y(イエロー=黄)

このCMY+Kを混ぜて、色相・彩度・明度を決めていきましょう。

1.色相の作り方

  • 元となる色+1色100%
  • 元となる色+1色50%

→CMYの3色を総当りで組むと標準色のような鮮やかな色が作れる

2.明度の決め方

  • CMYそれぞれに無彩色(白⇔黒)を足す
  • 白を足す場合、Illustratorなどでは、CMYそれぞれの%を下げる(C=100% → C=70%など)

3.彩度の決め方

  • 鮮やかさをそのまま保つ場合は何もしなくてOK
  • くすませていきたい時は、使っていない色を混ぜていく

色はポジティブ要素とネガティブ要素をあわせ持ちます。

そして、イメージや慣習に合う適切な色を選ぶために、以下の点を意識しましょう。

色ぎめの際に意識すること

  • 誰に
  • いつ
  • どのような

色はそれだけで大きく印象を変えてしまいます。

何をイメージしてその色を選ぶのか、また色の持つ性格を理解して正しく選びましょう。

  • この記事を書いた人

ハタケイスケ

【経歴】大学卒業 ▶営業マン ▶広報マン(Webデザイナー・DTPデザイナー・メディアプランナー兼務)▶メディアサイト12万PV/月実績 ●東京都在住、パンクロッカーです。ヘタなドラムを叩いてます

-デザイナー初級編, デザイン
-