デザイン

デザインで参考になる配色と3つの効果

Webサイトやポスターを作る際に、どんな色を使ってどのように配置すれば良いのか迷うことはないだろうか?

色には、組み合わせた時に合う合わないなどの相性があったり、涼しい・情熱的な・愛情といった印象をそれぞれ持っている。

これらの役割をうまく使っていくことで、Webサイトやポスターの印象が変わってきたり、人々を引きつけることができるかどうかも大きく変わってくる。

目的にあった配色ができるように、色のもつ役割を紹介していきたい。

[adsense]

色がもたらす効果には、そのデザインがもつ統一感や違和感・視認性・ユーザーに与える印象・心理的効果などの心理的・機能的効果を与えたいときに使われる。企業のイメージカラーなどは、統一感や信頼性、購買意欲などに繋がることが多い。

配色の知識には、どういったものがあるのか見ていこう。

色を構成する要素とその機能


配色をする上で最も必要なことは、色を決めることだ。
色を決める要素には、明度・彩度・色相の3要素が非常に良く使われる。

これは、色を定量的に表す体系である表色系の1つで、マンセル・カラーシステム(Munsell Color System)と呼ばれているものだ。

明度・彩度・色相には、それぞれ役割と持つ印象があり、それらを調整することで効果が大きく変わってくる。

次に、それぞれの役割や印象を紹介していく。

 

[adsense]

色相(Hue)

色相は、色味扱う要素です。色味を扱う事で暖かさやクールさなどの寒暖感を決める事が出来きる。アットホームな配色にしたければ暖色系の色を、企業などきっちりしたイメージにしたければ寒色系などを選ぶといいだろう。

明度(Brightness, Value)

明度は、色の明るさを扱う要素だ。明度を高くすれば白に、低くすれば黒に近くなる。軽さや軟らかさ・重さや固さなどの軽重感を決める事が出来る。これは、色が白に近ければ軽い、黒に近ければ重いという考え方に基づいているためである。

彩度(Chroma)

彩度は、色の鮮やかさを扱う要素だ。元気さや落ち着き、シックさなどの気持ちの抑揚を決める事が出来る。

トーン(Tone)

トーンは、似たような明度と彩度で色をまとめたものだ。それぞれのトーンは、それぞれの明度と彩度から導きだされた印象を持っており、それらを意識する事で色同士を調和させることができる。

  • トーンの種類
  • ホワイト(White)
  • グレイ(Gray)
  • ブラック(Black)
  • ペール(p+)
  • ライトグレイッシュ(ltg)
  • グレイッシュ(g)
  • ダークグレイッシュ(dkg)
  • ライト(lt)
  • ソフト(sf)
  • ダル(d)
  • ダーク(dk)
  • ブライト(b)
  • ビビット(v)
  • ストロング(s)
  • ディープ(dp)

 

各色が持つ印象

色には、それぞれが持つ印象というものがある。これは、どの色にも存在するもので、多くの人が普段見ている自然の色と密接に関わっていることが多い。

青(寒色)

海・清潔感・冷たい・信頼感などの落ち着いたイメージ
企業系の Webに多く使われている

緑(中性色)

自然・癒し・調和・健康・安心感など心が落ち着くイメージ

黄色(暖色)

アクティブ、元気、明るいイメージ。主張の弱い色。

オレンジ(暖色)

食欲、楽しい、暖かい、自由イメージ
食品系のパッケージなどで良く使われている

赤(暖色)

情熱的、刺激的、衝動的、ダイレクト感、警告、生命のイメージ
基本的に強い色なので彩度を高くすると主張が強くなる

紫(中性色)

優雅、魅力的、神秘的、おしゃれ、アダルトなイメージ
主張の強い色

白(無彩色)

純粋、無垢、潔白、純粋、汚れのないイメージ
色を際立たせるのでベースの色としてよく使われている

銀色(無彩色)

洗練、知的、誠実、冷たさ、先進的、上品イメージ

灰色

憂鬱、不安、過去、薄暗い

黒(無彩色)

高級感、機能的、闇、死、悪、夜、男性的

色がもたらす効果

色を効果的に使うことで、見る人や読む人に対して様々な効果や印象を与える事が出来る。

機能的効果

  • 視認性を上げる
  • 可読性を上げる
  • 誘視性を上げる
  • 識別性を上げる

 

情緒的効果

これは、見た人の心理に直接的に働きかけるような効果が多く出ます。何か商品を買ってもらいたかったり、コレクションするきっかけなどユーザーの行動を誘導したいときに大きく影響する。

しかし、人によって効果が異なることも多いので、定量化するのが難しいものでもある。

購買意欲

イラストやレイアウトが同じでも色が異なる事で、購買意欲が左右される。特に効果の高いのが誘視性の高い、高彩度の暖色系の色。

この色はもともと、注目度が高く心理的に興奮させる色。その中でも赤は、緊張感や興奮感を増幅させるので、ネットショップなどいろいろなところで使われる。黄色やオレンジは、興奮感やカジュアル感を高め、より身近に感じやすい。

  • カラーバリエーション
  • ターゲットを増やせる
  • 各色が魅力的であること
  • 全ての色を並べたときに美しくなる事
  • 捨て色を用意すること
  • 統一感を持たせられる
  • 印象を変えられる
  • 付加価値を上げられる
  • 企業やメーカーなどに色を定着させる事ができれば、その色がブランドとなり付加価値をより上げてくれる
  • オリジナル性が求められるため、汎用性の高い色や心理四原色を使ってこの効果を得るのは難しい

 

まとめ

今回は、配色がそのデザインが見た人にどのような印象を与えるのか、その人の行動にどう繋がるのかなどの心理的効果をまとめた。最後にもう一度紹介する。

  • 色を構成する要素とその機能
    • 色相
    • 明度
    • 彩度
    • トーン
  • 各色が持つ印象
  • 色がもたらす効果
    • 機能的効果
    • 情緒的効果
    • 購買意欲

配色にはまだまだ、バランスや調和など様々な知識がある。今度はその辺りについても、ブログに書いて行きたい。

関連記事

  1. テクノロジー

    売れるiOSアプリが作れるようになるおすすめの本8選

    アプリを作ってみたいけど作り方がわからない。…

  2. デザイン

    Trick or Treat! デザインの凝ったハロウィン2013 Webサイト

    もうハロウィン直前ですね!ハロウィンは1年に1回ある、みんなで仮装して…

  3. デザイン

    アンティーク風デザインに使える3つのフリー素材サイト

    ポスターや広告、カバー写真などの制作物を作成するとき、それらに使う画像…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

  1. テクノロジー

    Firebase iOSの解説・セットアップ編
  2. アイディア

    すぐできる生産性を劇的に上げる6つの方法
  3. アイディア

    最高のサービスを作る7つのポイント
  4. テクノロジー

    今週のITニュースハイライト 7/2 – 7/8
  5. 日記

    先日、ディレクターだらけの大忘年祭 2013へ参加してきました!
PAGE TOP