ホームページデザインに欠かせない「色」の考え方・選び方のポイント

私たちは毎日目に入る色によって刺激を受けています。
空の青と木々の緑は清々しい気持ちにしてくれて、空が曇り灰色になると自分の気分までもが暗くなる人も多いのではないでしょうか。

そんな日常の中だけでなく、Webサイトを眺めているだけでも私たちは無意識に色の影響を受けています。

ホームページデザインにおいて「色」は訪問者に強い印象を植え付ける大切な要素です。
今回は色が人に与える印象と色を使った実例を挙げながら、選び方のポイントをご紹介します。

デザインと色が人に与える印象

ホームページ制作者が最初に直面する問題は「そのデザインをどうするか」ということ。

レイアウトや掲載する写真選びだけでなく、色選びもデザインと切っても切り離せない関係にあります。
同じレイアウト、同じトップ画像であっても背景色が赤か青かで大きく印象が変わるからです。

私たちは大昔から色の影響を受けて生きてきました。

濃い色からは力強いイメージを受けるため日焼けした肌の男性の方がモテていましたし、逆に白＝上流階級という考えから平安時代の日本人女性は白粉（おしろい）を塗っていたのです。

次第に色と色の組み合わせで印象が左右されるようになったり、さらに配色の仕方・デザインによって「おしゃれ」と言われる文化が登場しました。

若者を中心に人気急上昇しているInstagramのロゴマークをご存知でしょうか？

その他のSNSは単色、使っても２色までだったのに対し、Instagramは紫を基調としたグラデーション仕様になっています。
写真コンテンツという斬新なアイディアも加わり他よりもひときわ目立つSNSとなりました。

今ではInstagramのロゴを見れば「あぁ、おしゃれな人がよくやってるアレね」とピンとくる人も多いでしょう。
それほど色やデザインが人に与える印象は大きいものなのです。

色選びの参考例

それではホームページ制作では色をどうやって選べばいいのでしょうか？
私たちは自然に色による感情の変化を起こしますから、言ってしまえば色は直感で選んでも大丈夫だったりします。

ですがいきなり色を決めるよりも、まずは次の２つの質問について考えてみてください。

・訪問者にどんな印象を与えたいのか？
・その印象は自社が提供する商品やサービスとマッチしているか？

上記の２点をふまえたうえで、次に紹介する色選びの実例を参考にホームページの配色を決めてみましょう。

白黒…写真をメインにしたいときに

白と黒は私たちの感情にあまり影響を与えない、いわば無機質な色になります。
しかし、シンプルだからこそ使いやすい色の代表でもあります。

写真や画像を目立たせたいときには白と黒が最適になります。

背景がモノトーンであれば写真に目がいきやすいですし、写真の色味を邪魔してしまうこともありません。

特にユニクロやZOZOタウンなどのようなファッション通販サイトなどでは白黒の背景がおすすめです。
白ならクリーンなイメージ、黒な高価なイメージなど使い分けてみてください。

青…清潔感と信頼感の色

実は青はホームページに一番よく使われやすい色です。
知的さ・冷静さ・落ち着いたイメージがあることから、もっとも信頼してもらえやすい色でもあります。

また清潔なイメージも強いため、上記のような病院やクリニックで使われることが多いです。

ホームページだけでなく、Facebookといった企業のロゴで青が使われることも。
それはやはり青の持つ「信頼」のイメージを使った戦略とも言えますね。

緑…健康と安心の象徴

緑は自然・健康・安心などを象徴しています。

「目に一番優しい色」と言われていることから、学校の黒板も深緑色ですよね。
そのため、緑は健康食品の会社や産地直産の野菜を販売する会社などにおすすめです。

上記の例はヘルシーな食事を届けてくれるnoshのホームページですが、最近は顧客に安心感を与えるため、病院や保育園のホームページでも使われることが増えてきました。

オレンジ・黄色…元気で明るいイメージ

オレンジやそれに近い黄色は「ビタミンカラー」とも呼ばれていて、元気や活力、エネルギーがみなぎるようなイメージがあります。

白よりも明度は低いものの、背景をオレンジにするだけで一気に明るくなる例もあるほど。

実例に挙げた幼稚園のホームページの背景が白だとミスマッチになってしまいます。
背景をオレンジにすることで子供たちの笑顔とマッチし「明るくて楽しい幼稚園」という印象を持ってもらうことができるのです。

赤…情熱、若さをアピール

赤い色の代表企業と言えばコカ・コーラ。

赤には強さ・情熱・若さ・派手さのイメージがあり、なかなか扱いが難しい色でもあります。
ですがコカ・コーラはそんな赤を味方につけて、世界中で愛される飲料になりました。

情熱や若さをアピールしたいときにおすすめの色ですが、色の組み合わせや配色を間違えるとごちゃごちゃしたホームページになってしまうので注意しましょう。

ピンク・紫…濃さで印象が変わる

ピンクや紫と言うとその柔らかさから女性のイメージが強い色になります。

実際のところ男女どちらでも利用できる色なのですが、世間的にはピンク・紫＝女性というイメージが強いため女性向けのホームページで使われることが多くなりました。

例えばレディースクリニックだったり「ゆるふわ」をコンセプトにした服飾・コスメの会社など。

しかし桃色やすみれ色は柔らかい印象に対し、ショッキングピンクや濃紫は強く派手な印象に変わります。
濃さで印象がガラリと変わる色なので、自社とマッチする濃さを探ってみてください。

茶・金…変幻自在な色

実は茶色や金色は組み合わせ次第で何にでも化けることのできる変幻自在な色になります。
茶色はアースカラー（自然界に存在する色）なので人の目に馴染みやすく、ナチュラルな印象を持ってもらうことが可能。

一方で金色は滅多に見ることのない色のため、そこにあるだけで強い印象を与えやすいです。

しかし金色単体だとゴテゴテした派手なイメージになりかねないため他の色との組み合わせは必須。
RIZAPのように黒と組み合わせると落ち着いているけどおしゃれ、そして高貴な印象に代わります。

茶色も単体だと汚い色になりやすいので、白と組み合わせたり同系色と合わせてイメージを変えていきましょう。

色を使ってホームページで信頼を得る方法

あなたのホームページにはどんな色が合っていそうか見えてきたでしょうか？

色で人に与える印象が変わるのなら、そこからさらに訪問者からの信頼を得て顧客になってもらいたいところ。

先ほど紹介したように青は一番信頼を得やすい色になりますが、必ずどの業界でも青が合うというわけではありません。

ここで大切なのはどの色を選ぶかよりも、どの色が最初の２つの質問に一番マッチしているかを考えることです。

複数の色を組み合わせたりレイアウトを変えたりして試行錯誤していくことで、必ず「コレだ！」という組み合わせが見えてきます。

カラーパレットを作ってみる

ホームページの配色を考えるときに役立つのがカラーパレットです。
入れたい色を並べて見てみることでその色同士が合う・合わないかがわかります。

ただ入れたい色だけを入れていたらなんとなくパッとしないホームページになりやすいもの。
Webで検索すればカラーパレットが作れるツールもあるので、ぜひ利用してみてください。

ホームページデザインに欠かせない色の考え方・選び方のポイントまとめ

人は昔から色による影響を受けており、それを利用すればホームページでも訪問者が受け取る印象を自在に変えることができます。

とはいえ「この業種にはこの色」と決まっているわけではありません！

業種で当たり前とされている色を使わず、きちんとうまくデザインされているのであればルールを破って意外な色を使ってもOKなのです。

色１つでイメージがガラリと変わるため、自社の商品やサービスに合う色を見つけてみてください。

　　▼自社の商品やサービスに合う色やデザインが見つかる！
　　無料で、【社名入り】トップページの見本を作成
　　https://www.akibare-hp.jp/form/cp/samplesite/