デザインで参考になる配色と3つの効果HomeiOSアプリ開発入門Pythonでスクレイピングデザインの知識iOSエンジニアの独立ブログ「現役エンジニアが教えるアプリ開発」や「役に立つ技術」について発信しています。デザインの知識デザインで参考になる配色と3つの効果デザイン2014.04.1デザインで参考になる配色と3つの効果Webサイトやポスターを作る際に、どんな色を使ってどのように配置すれば良いのか迷うことはないでしょうか?色には、組み合わせた時に合う合わないなどの相性があったり、涼しい・情熱的な・愛情といった印象をそれぞれ持っています。これらの役割をうまく使っていくことで、Webサイトやポスターの印象が変わってきたり、人々を引きつけることができるかどうかも大きく変わってきます。目的にあった配色ができるように、色のもつ役割を紹介していきます。与えたいときに使われます。企業のイメージカラーなどは、統一感や信頼性、購買意欲などに繋がることが多いです。配色の知識には、どういったものがあるのか見ていきましょう。配色をする上で最も必要なことは、色のパターンを決めることです。3要素が非常に良く使われます。それぞれ役割と持つ印象があり、それらを調整することで効果が大きく変わってきます。次に、それぞれの役割や印象を紹介していきます。色相(Hue)色相は、色味扱う要素です。色味を扱う事で暖かさやクールさなどの寒暖感を決める事が出来きます。アットホームな配色にしたければ暖色系の色を、企業などきっちりしたイメージにしたければ寒色系などを選ぶといいでしょう。Value)明度は、色の明るさを扱う要素です。明度を高くすれば白に、低くすれば黒に近くなります。軽さや軟らかさ・重さや固さなどの軽重感を決める事が出来ます。これは、色が白に近ければ軽い、黒に近ければ重いという考え方に基づいているためです。彩度(Chroma)彩度は、色の鮮やかさを扱う要素です。元気さや落ち着き、シックさなどの気持ちの抑揚を決める事が出来ます。トーン(Tone)トーンは、似たような明度と彩度で色をまとめたものです。それぞれのトーンは、それぞれの明度と彩度から導きだされた印象を持っており、それらを意識する事で色同士を調和させることができます。色には、それぞれが持つ印象というものがあります。これは、どの色にも存在するもので、多くの人が普段見ている自然の色と密接に関わっていることが多いです。心が落ち着くイメージ黄色(暖色)アクティブ、元気、明るいイメージ。上げる可読性を上げる誘視性を上げる識別性を上げる情緒的効果これは、見た人の心理に直接的に働きかけるような効果が多く出ます。何か商品を買ってもらいたかったり、コレクションするきっかけなどユーザーの行動を誘導したいときに大きく影響します。人によって効果が異なることも多いので、定量化するのが難しいものでもあります。購買意欲イラストやレイアウトが同じでも色が異なる事で、購買意欲が左右されます。効果の高いのが誘視性の高い、高彩度の暖色系の色。この色はもともと、注目度が高く心理的に興奮させる色。その中でも赤は、緊張感や興奮感を増幅させるので、ネットショップなどいろいろなところで使われます。黄色やオレンジは、興奮感やカジュアル感を高め、より身近に感じやすいです。捨て色を用意すること統一感を持たせられる印象を変えられる付加価値を上げられる企業やメーカーなどに色を定着させる事ができれば、その色がブランドとなり付加価値をより上げてくれるオリジナル性が求められるため、汎用性の高い色や心理四原色を使ってこの効果を得るのは難しいまとめ今回は、配色がそのデザインが見た人にどのような印象を与えるのか、その人の行動にどう繋がるのかなどの心理的効果をまとめました。最後にもう一度紹介します。バランスや調和など様々な知識がある。今度はその辺りについても、ブログに書いて行きます。配色CSSによるセンタリングの方法と注意点についてのまとめAppleの新しいMessagesで何ができるのか。人に見せるような資料を作ったり、サービスアイディアを見える化したいと思...プロフィールHiroG’sアカデミーのメンター、モバイルアプリのエンジニア。得意分野はアプリ開発、競泳。