owned mediaウェブ制作に役立つコンテンツを発信中!

イメージ別の配色についてまとめてみる(1)

最終更新日: Update!!
今回はデザインをする上でも悩む時が多い配色についての記事をまとめてみました。適当に決めたり、その時の気分に任せるのではなく、きちんと理論に裏付けされたカラーの選択が必要です。イメージ別に代表的な配色をあげていますので是非参考にしてみてください。   【目次】
  1. デザインの中で色が与える効果
  2. 1. 高級なイメージの配色
  3. 2. ポップなイメージの配色
  4. 3. 高貴なイメージの配色
  5. 4. 素朴なイメージの配色
  6. 5. ダイナミックなイメージの配色
  7. 6. ソフトなイメージの配色
  8. 7. モダンなイメージの配色
  9. 8. レトロなイメージの配色
 
デザインの中で色が与える効果
デザインをするなかで色というのはとても重要な役割を果たします。その色が持つイメージがそれぞれ存在し、目的にや用途に合わせた配色を行います。   例えば、赤色からは情熱的なイメージや戦闘的なイメージを感じ取ることができ、青色であれば誠実さや冷徹感などいった具合に、世間一般として色の持つ心理的効果はある程度、統一しており認知もされています。   それらをうまく組み合わせることで、より効果的にイメージを伝えることができます。   その効果は広告やメディアとして活用するウェブサイトでも非常に有効です。色の持つ力が売り上げや業績につながるといっても過言ではありません。それぞれの色が持つ効果をしっかりと理解しイメージに合わせた配色をすることが大切です。  
1. 高級なイメージの配色
イメージ別の配色についてまとめてみる(1)   ローコントラスト・低明度・ダークトーン・金属色 黒やエンジ色、ダークブラウンなどの重厚感や深みのあるダークトーンがよく使用されます。またゴールドをはじめとした金属色も効果的です。  
2. ポップなイメージの配色
イメージ別の配色についてまとめてみる(1)   ハイコントラスト・高明度・高彩度・ビタミンカラー イエロー、ライトグリーン、オレンジなどのいわゆる「ビタミンカラー」をメインに使用することでポップな雰囲気を表現できます。明るく鮮やかなトーンにすることでより強調されます。  
3. 高貴なイメージの配色
イメージ別の配色についてまとめてみる(1)   低明度・中彩度 深みのある色で配色することにより、品位が高い印象を与えます。彩度は低くすぎると華やかさがなくなり、高すぎると品がなくなってしまいます。  
4. 素朴なイメージの配色
イメージ別の配色についてまとめてみる(1)   ローコントラスト・中明度・低彩度・アースカラー コントラストと彩度を抑えて控えめな配色になります。派手さを出さずに地味さを表現します。色相は自然界に存在するアースカラーをメインに。  
5. ダイナミックなイメージの配色
イメージ別の配色についてまとめてみる(1)   ハイコントラスト・高彩度・ビビットカラー コントラストと彩度を上げ、メリハリをつけることによりインパクトが高い配色になります。目立たせるために原色に近いビビットカラーを使うのも効果的です。  
6. ソフトなイメージの配色
イメージ別の配色についてまとめてみる(1)   ローコントラスト・高明度・低彩度・パステルカラー 高明度で低彩度のペールトーンと呼ばれる色域で表現します。パステルカラーと呼ばれる淡い色などが含まれます。コントラストを下げ、統一感を出すこともポイントです。  
7. モダンなイメージの配色
イメージ別の配色についてまとめてみる(1)   ハイコントラスト・高彩度・モノトーン+ビビットカラー メリハリがあり、アーティスティックで奇抜な配色が多くなります。モノトーンにビビットカラーを加えると表現しやすくなります。色数は少なくなるように抑えたほうが綺麗に見えます。  
8. レトロなイメージの配色
イメージ別の配色についてまとめてみる(1)   ローコントラスト・中明度・中彩度・中間色 ダルトーンと呼ばれる、中明度中彩度のトーンをメインに使うことでくすんだ印象を表現します。トーンだけでなく色相についても暖色と寒色の中間色であるグリーンやブラウン、パープルなどを使うとより雰囲気が出ます。     いかがでしょうか、このようにカラーの特性を生かしながら、ロジカルに配色を行うことでイメージや雰囲気を効果的に伝えることができます。引き続き、「イメージ別の配色についてまとめてみる(2)」の記事でいろんな配色パターンをまとめていきたいと思います。    
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram