さて今回は、前回に続き「ホームページの配色」について解説しす。
前回は、ホームページの色を決めるとき、意識しておきたいこととして、 以下の３つのポイントを解説しました。
- 会社や商品のブランドイメージ
- ターゲットの心理
- 読みやすさや使いやすさ
今回は、そのポイントをおさえつつメインカラーを選ぶ際に参考にした い、「色の持つイメージ」について具体例をあげて解説します。
◆赤
赤は「エネルギー」「行動」「情熱」などを表現する色です。
購買色、注意喚起の色とも言われ、見る人の行動をひき起こす特性を 持っています。バーゲンセールのＰＯＰが赤い色で作られていることが 多いのはこのせいです。
見る人に強い印象を与えるため、ブランドカラーとして特定の企業や商 品と深く結びついている場合もあります。
例えば「ポッキー」「コカコーラ」といえば、赤が頭に浮かんでくるの ではないでしょうか。
▼ポッキー
https://www.pocky.jp/
▼コカコーラ
https://www.cocacola.jp/
バナーやボタンなどの色として使うと、目立ちやすくクリック率もあが りやすいと言われています。
弊社のホームページも赤をサイトのメインカラーに採用しています。
▼NextCms
http://nextcms.kbhoho.com/
◆オレンジ
オレンジには、「快活」「陽気」「親しみやすい」といったイメージが あります。
ビタミンカラーと呼ばれるように、元気の出る色です。赤と黄色の中間 色で、赤ほどアグレッシブではないため、万人受けしやすい色でもあり ます。
食品や健康に関わるサイトがメインカラーとして採用していることも多 い色です。
▼クラシエ
http://www.kracie.co.jp/
▼カドヤ製油
http://www.kadoya.com/
▼日本大学食品ビジネス学科
http://hp.brs.nihon-u.ac.jp/~fbs/
オレンジもバナーやボタンなどの色として見かけることが多い色ではな いでしょうか。暖色系のバナーがクリック率が高い傾向にあるためのよ うです。
◆青
青は、「さわやか」「涼しげ」「知的」「落ち着き」「信頼」を感じさ せます。
年齢性別や国籍を問わず、好む人が圧倒的に多く、Facebook、Twitter、 Dropboxなど海外のＩＴ系企業でも、採用されていることが非常に多い 色です。
▼Dropbox
https://www.dropbox.com/business/
日本では銀行や病院、教育関係などをはじめ、業種を問わず多くのサイ トで採用されています。
▼ふくおかフィナンシャルグループ
http://www.fukuoka-fg.com/
▼日本歯科大学付属病院
http://dent-hosp.ndu.ac.jp/nduhosp/
▼東京工科大学
https://www.teu.ac.jp/
◆緑
緑は「癒し」「自然」「エコ」「安全」「安心」をイメージさせる色で す。
刺激が少なく、見る人にすんなり受け入れられます。暖色にも寒色にも 入らない中間色のため、一緒に使う色でもイメージが変わります。
赤やオレンジ、黄色などの暖色と組み合わせて使うことが多いです。
住宅関連やリラクゼーション、健康に関わるサイトなどで採用されるこ とも多い色です。
▼Frosh
https://www.asahi-kasei.co.jp/saran/products/frosch/index.html
▼永富調剤薬局
http://www.nagatomi.co.jp/
▼東レエンタープライズ
http://healthyclub.jp/
また通販業界では、バナーやボタンの色で、緑をよく見かけるのではな いでしょうか。
これは、緑には「安心感」「信頼感」があり、安心して押させるには緑 が良いとの説が流れ、緑ボタンが一気に広まったためです。
◆黒
黒には「高貴」「上品」「リッチ」「力強い」「神秘的」などのイメー ジがあります。
周囲の色を引き締めて目立たせる効果を持つ色です。潜在的に負のイ メージがあるため、若い年代には好まれ、年齢が高くなると苦手な人が 増えます。
アパレルやホテル、化粧品など、高級感を出したい商品やサービスのサ イトで使用されています。
▼フランクミューラージャパン
https://franckmuller-japan.com/
▼dyson
https://www.dyson.co.jp/
▼セルリアンタワー東急ホテル
https://www.tokyuhotels.co.jp/cerulean-h/
◆白
白は「清潔感」「いさぎよさ」「純粋」「シンプルさ」を感じさせる色 です。
黒と同様、無彩色で、周りの色を目立たせる効果があります。シンプル である分、アクセントカラーやレイアウトなど、他の要素が重要になり ます。
ショッピングサイトやニュースサイトなど、雑多な情報と色があふれる ようなサイトでは、情報部分以外の色を減らして白にすることでバラン スをとっています。
▼フェリシモ
https://www.felissimo.co.jp/
▼北欧、暮らしの道具店
https://hokuohkurashi.com/
以上、基本的な６色についてご紹介しました。それぞれの色が持つ特徴 や意味合いも考慮して、色を選んでみてくださいね。
【NextCms】では、実際に配色を変更しながらデザインの サンプルを見られるページを用意しています。こちらもぜひご活用くだ さい。
▼【NextCms】デザインサンプル
http://www.cms-hp.com/design/