ホームページの印象がガラッと変わる「カラー」の選び方

ホームページにとって「カラー」はとても重要です。
ホームページ制作の際のヒアリングでも「カラーはなにがいいですか？」とかなりの確率で聞かれるはずです。

同じデザインでも、カラーによっては人が受ける印象が180度変わることもあります。
すでにイメージがあったり、コーポ―レートカラーがあったりすればすぐに決まると思いますが、そうでない場合、かなり迷うかもしれません。

そこで、今回はカラーの選び方や、与える印象などを解説します。
ぜひ、カラー選びの参考にしてみてください。

カラーの種類

ホームページのカラーは「メインカラー」「ベースカラー」「アクセントカラー」の3つに分けられます。

●メインカラー : ホームページの印象を決める主役の色
●ベースカラー : 余白や背景に使われる色
●アクセントカラー : メイン・ベースを引き立て、全体を引き締める色

カラーの選び方

まずはメインカラーを決めます。

メインカラーが決まったら、与えたい印象やデザインなどを考慮しながらベースカラー、アクセントカラーを決めていきます。

コーポレートカラーで選ぶ

ロゴマークや商品パッケージなどに使われるコーポレートカラーがあるなら、それをそのまま使います。

コカ・コーラなら赤、WOWOWなら青のように、頭の中で自然に浮かぶコーポレートカラーは、メインカラーに最適です。

企業イメージで選ぶ

与えたいイメージを基準に選ぶ方法もあります。

●カラーごとの印象
赤 : エネルギッシュ、インパクト、興奮、情熱
青 : 信頼、安心、知的、誠実、理性、清潔感
オレンジ : 親しみ、元気、楽しい、活発
黄色 : 楽観的、明るい、快活、希望、陽気、若々しさ
緑 : 健康、リラックス、安らぎ、穏やか
紫 : 神秘的、高貴、優雅、癒し
白 : 清潔感、信頼、平和
黒 : 神秘、威厳、高級、モダン

たとえば、スポーツジムなどは快活さや元気なイメージを与えるオレンジや黄色が合います。
高級車や高級レストランは高級感を持たせる黒が合います。近い色のグレーも高級なイメージを持たせられます。レクサスもコーポレートカラーにグレーを採用しています。

このように、カラーによって与える印象がかなり変わります。
会社やサービスに合わせて最適なものをチョイスしてください。

ベースカラー、アクセントカラーを決める

メインカラーが決まったらベースカラー、アクセントカラーです。
それぞれが引き立つカラーを選択してください。
問い合わせや資料請求ボタンなど、目立たせたい情報にはアクセントカラーを使います。

どうしても決められないときは、メインカラーの補色を使えばメリハリを持たせられます。

●よくある補色の組み合わせ
オレンジ×青
赤×青緑
黄色×紫
緑×赤紫
水色×朱色

補色ってどうやって調べるの？というときは、下の無料ツールがお勧めです。
補色や類似色、3色配色など、グラデーションやアイコンイラストなどで簡単に色を確認できます。

ツールを使ってみる

ほかにも「色 組みあわせ ツール」などで検索するとたくさん出てくるので、使いやすいツールを探すのも面白いかもしれません。

【2022年版】おすすめカラーパレットツール10選でほかにもツールを紹介しています。興味あればチェックしてみてください。

カラーが与える印象

ここからは、ホームページを実際に見比べて、印象の違いを見てみたいと思います。

バーミヤン｜情熱的・エネルギッシュな赤

出典 : バーミヤン

バーミヤンはカンパニーカラーの赤を採用しています。

同じグループ店のガストや夢庵も同じく赤がメインカラーになっています。
ガツンとしたメニューが多い中華料理店によくマッチしています。
エネルギッシュな印象のほか、食欲を刺激する色なので、飲食関係ではよく使われています。
「中華は火力が命だ！」というパッションも伝わってきますね。

サイゼリア｜リラックス・安らぎの緑

出典 : サイゼリア

深い緑から、リラックスしながら食事を楽しめるという印象を受けます。
イタリアンレストランだからか、トップ画像のトマトと合わさってイタリアの国旗を思い出しました。
狙ってはいないかもしれませんが、色一つでさまざまなイメージを与えるということがよく分かります。

ココス｜明るい・楽しいの黄色

出典 : ココス

ココスは明るく楽しいイメージが浮かぶ黄色がメインカラーになっています。
誕生日に店員さんが「ハッピーバースデー」を歌ってくれたり、盛り付けに遊び心があったりするココスの雰囲気にピッタリです。
スイカのかき氷も結構遊んでいますね。舌だけでなく目でも楽めます。

ホームページは「カラー」でガラッと変わる

同じデザイン、同じコンテンツでも、使うカラーでホームページの印象がガラッと変わります。
カラーコードまでしっかり選ぶ必要はありませんが、なんとなくでも選んでおくと、制作もスムーズに進みます。

どうしても選ぶのが難しいなら、制作会社に相談する方法もあります。
メインカラーはもちろん、与えたいイメージからベースカラー、アクセントカラーも最適なものをチョイスしてくれるはずです。

今回紹介した以外にも、他社のホームページを眺めるだけでイメージができることもあります。
ぜひ、いろいろなホームページを見て、自社にピッタリのカラーを探してみてください。