Webデザインと色彩心理学:色と心理の不思議な力
![色が与える心理効果](https://static.wixstatic.com/media/bb1bd6_6017a3c41f634ae68baf06dd9f0239a2~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/bb1bd6_6017a3c41f634ae68baf06dd9f0239a2~mv2.png)
世界は色で溢れています。
私たちは常に色に触れ、個人的または文化的な背景をもとに、色と感情を結び付けています。たとえば、ある物を人に説明するとき、最初に色を伝える人も多いのではないでしょうか?これは私たちにとって色がどんなに大事かを表しています。
ウェブデザインにおいても、色はサイトの構成やナビゲーションと同じくらい重要です。色を使って、サイト訪問者の注意を引いたり、ブランドの雰囲気を表現したり、あなたが訪問者に期待する行動(商品の購入、申し込み、問合せなど)を効果的に促したり...
ロゴや背景、ボタンなどの色全てがホームページのユーザーエクスペリエンスを向上させ、ブランドイメージをアップさせる要因の一つになります。
ホームページで伝えたいメッセージをきちんと伝えるために、色彩心理学の基礎を理解し、ホームページや会社のブランディングに利用しましょう!
色彩心理学の基礎
まずは、代表的な色とそれぞれの色が与える印象をみていきましょう。次に、Facebook、コカ・コーラ、Appleのロゴを思い浮かべてみてください。
![色が与える心理効果](https://static.wixstatic.com/media/bb1bd6_56eb287651714a04b558860e8ac8db85~mv2.png/v1/fill/w_46,h_20,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/bb1bd6_56eb287651714a04b558860e8ac8db85~mv2.png)
ロゴと一緒に、青、赤、白の色が頭に浮かびませんでしたか?これらのロゴの色は漠然と選ばれた訳ではありません。消費者にどんなイメージを持ってもらいたいかを基に決定されています。
![Facebookロゴ](https://static.wixstatic.com/media/bb1bd6_9cffb5c58348467690d8db0cfda46afe~mv2.png/v1/fill/w_46,h_4,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/bb1bd6_9cffb5c58348467690d8db0cfda46afe~mv2.png)
界一のソーシャルメディアであるFacebook。 青は信頼や誠実といったイメージがあるので、個人情報を取り扱う企業のロゴやホームページにぴったりな色です。実際、青はコーポレートカラーとして多くの企業に使われており、多くの人に好まれる無難な色といえます。
![コカ・コーラロゴ](https://static.wixstatic.com/media/bb1bd6_4e6f4841c0d04391a9614a734323e601~mv2.png/v1/fill/w_46,h_4,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/bb1bd6_4e6f4841c0d04391a9614a734323e601~mv2.png)
1892年に設立されたコカ・コーラ。 このロゴは世界中のほとんどの人が知っているはずです。赤い背景と筆記体で作られたこのロゴは、設立当初からほぼ変わっていません。赤は心拍数を上げる色ともいわれ、興奮やエネルギーを表す、活発なイメージの色です。また緊急性を表したり、すぐに目につくことから、赤はセールの告知などにもよく使われます。
![アップルロゴ](https://static.wixstatic.com/media/bb1bd6_6bc2da5e134d40d7a26895aae6d3b43f~mv2.png/v1/fill/w_46,h_4,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/bb1bd6_6bc2da5e134d40d7a26895aae6d3b43f~mv2.png)
デザインにこだわりがあるアップル。 アップルのロゴは「無機質なコンピューターを親しみやすいものにしたい」との理由で昔はカラフルなものでしたが、90年代後半に、今のロゴに近い、シンプルなロゴに変更されました。白一色のロゴは、シンプルさや純潔を表します。
色の呼び方
面白いことに、色の呼び方によっても人は商品の見方を変える事があります。
例として、サムソンのスマートフォン「Galaxy S7 」をみてみましょう。スマートフォンの色をブラックやホワイトと呼ぶ代わりに、サムソンは「ブラックオニキス」「ホワイトパール」というような名称をつけています。
また、多くの色が入った高級色鉛筆についても同様です。「台風一過の夕焼け空」であったり、「甲子園の砂」であったり、個性的な色鉛筆の名前は忘れられないですよね。
単純に色を表すだけでなく、人のイメージを掻き立てるような表現をすることで、より商品を魅力的に、高級感にみせることができます。商品のカラーオプションが豊富にある場合、これはとても効果的な戦略です。購入の最後の決め手になるかもしれませんので、是非活用してください。
色を基準にホームぺージテンプレートを決定する方法
最後に、色を基準にホームページテンプレートを決定する方法をみていきましょう!
テンプレートはコンテンツを元に決定するのが基本ですが、色についても考えることで、テンプレートの選択を絞りこむことができます。(お気に入りのテンプレートが既にあり、色を変えたい場合にもWixであれば簡単に変更可能なので、ご心配なく!)
あなたのホームページデザインの参考になれば幸いです。
![法律事務所ホームぺージテンプレート](https://static.wixstatic.com/media/bb1bd6_1e0ce235fc6d4d308494afde3471281f~mv2.png/v1/fill/w_46,h_35,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/bb1bd6_1e0ce235fc6d4d308494afde3471281f~mv2.png)
![ゲームアプリホームぺージテンプレート](https://static.wixstatic.com/media/bb1bd6_69922e11b2284f8a8e521a54349bb7ec~mv2.png/v1/fill/w_46,h_35,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/bb1bd6_69922e11b2284f8a8e521a54349bb7ec~mv2.png)
![フィットネスコーチホームぺージテンプレート](https://static.wixstatic.com/media/bb1bd6_0bc3932688bf4b55b77adfa4ea2284d7~mv2.png/v1/fill/w_46,h_42,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/bb1bd6_0bc3932688bf4b55b77adfa4ea2284d7~mv2.png)
色彩心理学を考慮する際の注意点
色彩心理学は全てにおいて正しいわけではありません。年齢や性別、文化によっても、色の印象は異なってくるからです。ターゲット市場を良く理解することが大切です。
例えば、このオーダーメイドスーツのテンプレートを見てみましょう。シンプルで分かりやすいこのテンプレートは、優雅さやクラッシックな雰囲気もあるので、年配の方があなたのターゲット顧客であれば良いですが、子供がターゲットの場合、おすすめできないデザインです。
![仕立て屋ホームぺージテンプレート](https://static.wixstatic.com/media/bb1bd6_9ba1e5ede5154c9fa7eb315383be09d5~mv2.png/v1/fill/w_46,h_44,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/bb1bd6_9ba1e5ede5154c9fa7eb315383be09d5~mv2.png)
ホームページデザインのアイデアが湧いてきましたか? 関連記事も参考に、ホームページの色を決めていきましょう!
![](https://static.wixstatic.com/media/bb1bd6_af66f1a58c724a19aba56901b6ea5a40~mv2.png/v1/fill/w_60,h_60,al_c,q_85,blur_3,enc_auto/bb1bd6_af66f1a58c724a19aba56901b6ea5a40~mv2.png)
ライター: Wix Team