あきばれホームページ作成
小さく始めて大きく育てるホームページ作成サービス

HPを使ったWEB集客が分かる!経営者向けのメールマガジン『経営塾』

好き嫌いで選んでない?!ホームページの配色(その2)色の持つイメージ

関連情報:初心者でも簡単!【ホームページの作り方講座】

経営塾バックナンバー: 2018年4月10日配信

この記事を読むのにかかる時間:約 7 分

今回は、前回に続き「ホームページの色選び」について解説します。

前回は、ホームページの色を決めるとき、意識しておきたいこととして、以下の3つのポイントを解説しました。

  (1)会社や商品のブランドイメージ
  (2)ターゲットの心理
  (3)読みやすさや使いやすさ

  ▼前回の記事
  https://www.akibare-hp.jp/ml/hp_color_choice1/

今回は、そのポイントをおさえつつメインカラーを選ぶ際に参考にしたい、「色の持つイメージ」について具体例をあげて解説します。

赤は「エネルギー」「行動」「情熱」などを表現する色です。

購買色、注意喚起の色とも言われ、見る人の行動をひき起こす特性を持っています。バーゲンセールのPOPが赤い色で作られていることが多いのはこのせいです。

見る人に強い印象を与えるため、ブランドカラーとして特定の企業や商品と深く結びついている場合もあります。

例えば「ポッキー」「コカコーラ」といえば、赤が頭に浮かんでくるのではないでしょうか。

  ▼ポッキー
  http://www.pocky.jp

  ▼コカコーラ
  https://secure.cocacola.jp/

バナーやボタンなどの色として使うと、目立ちやすくクリック率もあがりやすいと言われています。

弊社のホームページも赤をサイトのメインカラーに採用しています。

  ▼あきばれホームページ
  https://www.akibare-hp.jp/

オレンジ

オレンジには、「快活」「陽気」「親しみやすい」といったイメージがあります。

ビタミンカラーと呼ばれるように、元気の出る色です。赤と黄色の中間色で、赤ほどアグレッシブではないため、万人受けしやすい色でもあります。

食品や健康に関わるサイトがメインカラーとして採用していることも多い色です。

  ▼クラシエ
  http://www.kracie.co.jp/

  ▼カドヤ製油
  http://www.kadoya.com/

  ▼日本大学食品ビジネス学科
  http://hp.brs.nihon-u.ac.jp/~fbs/

オレンジもバナーやボタンなどの色として見かけることが多い色ではないでしょうか。暖色系のバナーがクリック率が高い傾向にあるためのようです。

青は、「さわやか」「涼しげ」「知的」「落ち着き」「信頼」を感じさ
せます。

年齢性別や国籍を問わず、好む人が圧倒的に多く、Facebook、Twitter、Dropboxなど海外のIT系企業でも、採用されていることが非常に多い色です。

  ▼Dropbox
  https://www.dropbox.com/business/

日本では銀行や病院、教育関係などをはじめ、業種を問わず多くのサイトで採用されています。

  ▼ふくおかフィナンシャルグループ
  http://www.fukuoka-fg.com/

  ▼日本歯科大学付属病院
  http://dent-hosp.ndu.ac.jp/nduhosp/

  ▼東京工科大学
  http://www.teu.ac.jp/

緑は「癒し」「自然」「エコ」「安全」「安心」をイメージさせる色です。

刺激が少なく、見る人にすんなり受け入れられます。暖色にも寒色にも入らない中間色のため、一緒に使う色でもイメージが変わります。

赤やオレンジ、黄色などの暖色と組み合わせて使うことが多いです。

住宅関連やリラクゼーション、健康に関わるサイトなどで採用されることも多い色です。

  ▼Frosh
  http://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.ceruleantower-hotel.com/

白は「清潔感」「いさぎよさ」「純粋」「シンプルさ」を感じさせる色です。

黒と同様、無彩色で、周りの色を目立たせる効果があります。シンプルである分、アクセントカラーやレイアウトなど、他の要素が重要になります。

ショッピングサイトやニュースサイトなど、雑多な情報と色があふれるようなサイトでは、情報部分以外の色を減らして白にすることでバランスをとっています。

  ▼フェリシモ
  https://www.felissimo.co.jp/

  ▼北欧、暮らしの道具店
  https://hokuohkurashi.com/

以上、基本的な6色についてご紹介しました。それぞれの色が持つ特徴や意味合いも考慮して、色を選んでみてくださいね。

【あきばれホームページ】では、実際に配色を変更しながらデザインのサンプルを見られるページを用意しています。こちらもぜひご活用ください。

  ▼【あきばれホームページ】デザインサンプル
  https://www.akibare-hp.jp/form/design/

お客さまを増やせるデザインサンプル

初心者むけHP作成サービス【あきばれホームページ】では、お客さまを増やせるデザインに力を入れています。

以下のページで、「お客さまを増やせるデザインサンプル」をいくつかご紹介しております。ぜひご確認ください。

部品型CMS【Buddy】というツールを利用していますので、ページの下の方もビジネスらしい、信頼感のあるデザインのホームページが作成可能です。

お客さまを増やせるデザインサンプル

10分で読める、身につく! ホームページ作成&活用術が、毎週届く!
8500社超の制作実績から生まれたノウハウが手に入るメールマガジンです。

ネット集客がみるみる分かる『経営塾』登録
無料

お客様を増やせる、低価格なホームページ作成サービスのサービス・料金

Flash動画を活用するメリットとは?

今回は、 Flash動画を活用するメリット についてお話します。 …続きを読む

ページの一番上へ

自分で更新できる集客ホームページのサービス・料金

お問合せ・ご相談をお気軽におよせください

このようなお問合せをお待ちしています

  • 他にどんなデザインがありますか?
  • デザインを自分で変更できますか?
  • 費用はいくらかかりますか?
  • 私の業種の事例はありますか?

こんな方はお気軽にご相談下さい

  • サイトが素人っぽいのできちんとしたHPを作りたい
  • いつまでたってもHPができなくて、困っている
  • サイトがあるだけで、ちっとも役に立っていない
  • Jimdo、Wix、WordPressが使いにくい