Toshi’s Enjoy Life

書きたいことを書く雑記ブログ!

【色の知識】知ることでもっと楽しくて面白くなる!(色相・明度・彩度について)

f:id:tosikun0119:20170410225728p:plain

 

みなさんこんにちは!

 

昨日はRGBとCMYKについて書きました。光の三原色と色の三原色でしたね!

そして今日は「色相・明度・彩度」について書いていきます!

ではいってみましょう! 

 

 目次

 

色相ってなーに?

f:id:tosikun0119:20170410210535p:plain画像引用元:http://acir.jp/dl/text_color.html

 

この画像を見てもらうと分かりやすいと思うので載せさせていただきました。

こう見るとなんか綺麗ですよね!

 

色相とは「それぞれの色味を表しやすくしたもの」といえば分かりやすいかと思います。色見によっては様々な効果をもたらす効果があります!

 

  • 暖かさを感じさせる「暖色」
  • 冷たさを感じさせる「寒色」
  • どちらにも属さない「中性色」

 

というものがあります。では具体的にはどういうことか詳しく見てみましょー!

 

暖色がもたらす効果

暖色は暖かさを感じさせることができます。なんかホンワカするイメージです。

暖色の組み合わせによっては飛び出て見えたり、膨らんで見えたりする効果があります!

f:id:tosikun0119:20170410203809p:plain

どうでしょうか!?膨らんで見えたり飛び出てるように見えませんか!?

暖色系の色を、中心から外側に向かって濃く並べるだけでこういう効果が見えてくるんです。

 

ネットショップでは、こういう暖色系の色を使うことにより潜在的に購買意欲を沸き立たせる効果があるので、非常にデザインでは重要になってきます。

※ネットショップ検定にも「色の効果」というのも出題範囲になってきますのでそれだけ色がもたらす効果というのは重要です!

 

寒色がもたらす効果

寒色は冷たさやクールさを感じさせる効果があります。見た感じ寒そうです・・・。

寒色にも組み合わせによっては特別な効果が生まれてきます。

f:id:tosikun0119:20170410203846p:plain

どうでしょう。暖色とは逆に凹んでいるように見えませんか!?

暖色とは逆に、中心に向かって濃い色にしていくことによってこう見えてきます。

 

寒色には落ち着いたイメージを持たせる効果があるので、信頼が必要になってくるコーポレートサイトなどに多く使われている傾向にあります。

 

明度と彩度ってなーに?

この図をみて下さい!こちらがすごい分かりやすいです!

 

f:id:tosikun0119:20170410210148p:plain

画像引用元:日本色研事業株式会社 HomePage

 

さきほどの色相の図がいっぱい並んでますね。

いろいろグループ分けされていますが、このグループ分けのことを「トーン」といいます。これからどんどん使う言葉ですので要チェックです!

 

トーンの並びを見ると、なんとも綺麗でついつい見入っちゃいませんか!?(私だけ?)

 

どうも私だけみたいなので次参ります・・・・。

 

明度:色の明るさを表す

名前の通り「色の明暗」を表します。図でいうと縦の方向ですね!

明度を一番高くすると「真っ白」になり、一番低くすると「真っ黒」になります。

 

一般的に明度によってもたらす効果があります。

  • 明度が高い:かわいい、女性的
  • 明度が低い:落ち着いた、男性的

 

図の左上の「p」を見ると、とってもかわいらしくで女性的に見えませんか!?

かわいく見えるので、「子供服」や「ベビー用品」のサイトに多く使われている傾向があります!

 

逆に左下の「dkg」を見ると、なんか重々しくて男性的なイメージが湧くと思います。

この色が使われる傾向は、例えば「缶コーヒーのブラック・微糖」などに使われていると思います。

うわぁ・・・苦そう・・・みたいなイメージですね!

 

彩度:色の濃淡を表す

彩度も名前の通り、「色の彩り・鮮やかさ」を表します。図でいうと横方向!

 

では、彩度によってどういう効果があるのでしょうか?

  • 彩度が高い:派手、目立つ、鮮やか
  • 彩度が低い:濁る・くすんでみえる

 

図の一番右を見ると、一番彩度の高い「V」を見てもらうと分かると思いますが、発色がキレイですよね。すごい鮮やかで、すごい目立つ感じがします!

 

逆に「ltg」を見ると、ちょっと濁っているように見えます。くすんだり、地味な印象を与える効果があります。

 

各色で明度を一番高く・低くするとどーなる?

まずはこの図を見てみるとイメージしやすいと思います!

 

f:id:tosikun0119:20170410215717p:plain

 

ペイントの「色の編集」から引っ張ってきました(笑)

 

見た瞬間すぐイメージできるかもしれませんが、色相(色の種類)に関係なく、

  • 色相に関係なく、明度を一番高くすると真っ白
  • 色相に関係なく、明度を一番低くすると真っ黒

 

ということがわかります。

 

まとめ

今回は「色相・明度・彩度」について書きましたが、いかがだったでしょうか!?

ちょっと長くなってしまったので、ここで改めてまとめると・・・

 

  • 色相:色見を表しやすくしたもの
  • 明度:色の明るさや暗さを表すもの
  • 彩度:色の彩りや鮮やかさを表すもの
  • 明度・彩度によって、男性的・女性的などのイメージが変わる
  • 明度を最大で「白」になり、最小にすることで「黒」となる

 

などなどが今回ご紹介した内容のまとめとなります!

 

サイトやブログをデザインするとき、自分のイメージやコンセプトに合った色の使い方が大事になってきます!

ネットショップだったら「購買意欲を高めるために暖色系を使おう」が効果的だったりするので!

 

かっこいい雰囲気を出したりするなら「明度と彩度をすこし低め」にしたり

かわいい雰囲気だすなら「明度高めにして、彩度を低めにしよう」だったり

 

などなどいろいろなことが見えてくると思います!

日常的に「色」を見てる私たちには無くてはならない存在です。その「色」という知識をすこしでも身につけることで、潜在的に有利な方へ導くことができる可能性を秘めていると思います!

 

次回は色相についてもうちょっと踏み込んだ「色相環」というものについて書いていきます!

では今回はこの辺で☆

 

関連する記事です!併せてどうぞ!

www.toshi-enjoy.com

 

www.toshi-enjoy.com

 

www.toshi-enjoy.com