色の印象について

こんにちは。スタイルクリエイツのデザイナーです。
今回からデザインについてのお話をコラムの方に掲載させていただくことになりました。

よろしくお願いいたします。

昨今ではホームページを作るのに便利なツールなどもあり、社内で制作するのもひと昔前に比べると随分と簡単になってまいりました。ホームページを外注するにしろ、自社で作成するにしろ、いろいろな検討材料があるかと思います。どんな印象を見る人に与えたいのか、どんな目的でホームページを作成するのか…など様々な想定が必要になってまいります。

今回はホームページのデザイン、主に色の与える印象についてのお話をさせていただこうかと思います。
色はWebサイトの印象を左右する重要なポイントになりますので、参考にしていただけましたら幸いです。

色の三要素（三属性）について

色の3要素とは、まず赤や青など色味の違いを表す「色相」、次に色の明るさを表す「明度」、そして色の鮮やかさを表す「彩度」、この3つを合わせて色の3要素、または色の3属性などと呼びます。

色相とは赤、青、緑、黄などの色味の違いのことをいいます。それらを色の系統別にグループ分けされているものを指します。
色相の違いは、虹の連続した色の変化で見ることが可能です。
主に、赤→橙→黄→緑→青→紫のように変化します。
これらの色味と色味の変化を繋げて綺麗な輪の状態にして表したものを「色相環」といいます。

彩度とは、色の鮮やかさの度合いを表す要素です。彩度が高いほど鮮やかでビビットな目立つ色になり、彩度が低いほど色味を感じにくく、落ち着いた印象の色になります。

また、彩度がまったくない状態の色を「無彩色」、黒や白、グレー（灰色）を指します。無彩色の反対に彩度がある色を「有彩色」といいます。

明度とは、色の明るさの度合いを表す要素です。

明度が高いほど、明るく白くなり、明度が低いほど、暗く黒くなります。

無彩色は彩度を持たないことによって、赤や青などの色味も持たないので、色相を持ちません。無彩色は白〜灰〜黒と、明度のみの要素を持ちます。

無彩色と有彩色

前章で述べましたように、色には無彩色と有彩色があります。白、黒、グレーなどは無彩色、赤、青、黄色などの色味のあるものを有彩色といいます。
色には人の心に大きく印象を与える効果があります。

汎用的なイメージとしては

など、色味によって人が連想するイメージがあります。

暖色と寒色

有彩色の色味は暖色と寒色に分かれます。
赤、オレンジ、黄色、茶などは暖色、緑、青、紫などは寒色といわれる色です。

例えば、飲食店などは暖色系をよく利用します。美味しそう、楽しそう、賑やかなイメージがある方が飲食店に似合ったイメージだからです。

暖色を使用した飲食店ロゴ

同じ飲食物でも飲料、それも冷たい飲料系のロゴだと寒色を使用したものが多くなります。

このように、色味によって想定されるイメージが違うことがよくわかります。
もちろん、こういった一般的な色のイメージを覆すような色を使ってインパクトを与えるという方法もあります。
上記にもあるポカリスウェットのロゴなどは、現在は何の違和感もありませんが、飲料に青色ということで発売当時は非常にインパクトがありました。

作成されるホームページのイメージもこの色味によって大きく左右されます。
業種、職種、サービスの内容にそったイメージをよりよい印象にさせるのに、色の選択はとても大切になります。
何色という指示が難しいことも多いので、「クールな印象」とか「温かみのあるイメージ」、「高級感がほしい」など抽象的なイメージの共有ができれば、全然イメージと違うということは避けられる可能性が高くなります。
お客様の目指すサイトの印象を、閲覧者にどのように感じて欲しいか？
そのことを考えてメインに置くカラーを決定していきます。

コーポレートカラーについて

企業のホームページの場合はコーポレートカラーなどもありますので、そのカラーを活かしたデザインを選択するのも一つの方法です。
コーポレートカラーというのは、会社の個性・目標の統一化をはかり、社内外に印象付けるために使われている色のことをいいます。会社ロゴの色や社用の封筒などがこの色で印刷されていたりすることが多いです。

コーポレートカラーは社内規定で印刷用とWeb用でコードまで指定されている細かな決まりのある場合から、まったくなくてロゴから起こして欲しいというご要望まで多々あります。

ロゴなどを設定したのがずっと昔のことで、新たな印象をつけるためにロゴやコーポレートカラーを一新する場合もあります。
こういったブランディングなども、ホームページを外注されると同時に当社にご依頼可能です。

色を変えた時の印象の変化

ロゴやコーポレートカラーを市の条例などのために変更する場合があります。マクドナルドの看板や吉野家の看板が無彩色になったり、ユニクロの看板が白地に赤になったり、日頃は目に付くために鮮やかな色合いにしているロゴマークを、周りの景観に合うように変更することはよくあります。

人々に広く認知されている色合いを変えるとイメージがガラッと変わって見えます。そのことを利用してブランディングを変更したり、会社のイメージを刷新することも可能です。
これまでは賑やかなイメージだったものを、スタイリッシュなイメージに変えたり、固い印象だったものを柔らかいイメージに変えたり、色には与える印象を変化させる大きな力が備わっています。

色で認識されているブランド

企業イメージ・ブランドには広く認識されている色があります。ほとんどはコーポレートカラーやロゴの色からくる印象です。各色の有名なブランドロゴを見てみましょう。おそらく大抵の人がこの企業はこの色というイメージがあるのではないでしょうか？
その色を見ただけで企業のイメージが浮かぶというのは、ブランディングとして大きく成功しているということで、マーケティングの上でも大きな力になります。

赤いロゴ

青いロゴ

緑のロゴ

黄色のロゴ

オレンジ色のロゴ

モノクロのロゴ

イメージカラーを変えるメリットとデメリット

企業のブランディングを変更するためにロゴやブランドカラーを変えることもあります。最近で一番有名なのはtwitterからxへの変更がありました。一般に広く浸透したイメージを保っている多くの企業はロゴやブランドカラーを変えるにしても、大きく変更することはありません。

●スターバックスのロゴの変遷

元々は黒一色のロゴでしたが、緑が浸透してからのロゴの変更では緑は残しつつの変更になっています。3番目のロゴの変更時は黒がなくなって違和感が強かったですが、緑とロゴのイメージを残していたことでブランドイメージを損なうことなく、時代にあったロゴへ変化していったと思います。

●Twitterのロゴの変更

こちらは逆に、イメージを大きく変えたい経営者の意思から元のロゴのイメージもカラーも引き継がなかった例となります。前のロゴやイメージに愛着があった人ほど変化を如実に感じたのではないでしょうか？
今回の変更は残念ながらあまりいいイメージでは捉えられていませんが、うまく移行すれば悪いイメージを良いものに置き換えることも可能になります。

このように、ロゴやコーポレートカラーはとても重要です。
変更を考えている場合、自社のイメージがお客様にどのように浸透しているか、変えることに意味があるのかをよく検討するべきだと思います。

有名企業サイトの作例

主な企業のホームページをご紹介いたします。コーポレートカラーやイメージカラーとして定着している色を使用してブランド力を確立しています。それぞれの業種、サービスの特徴を強く訴えるデザインになっています。

赤
NTTドコモ　→LINK

DOCOMOは「ドコモレッド」と呼ばれる赤色をコーポレートカラーとし、ロゴなどもこの色を採用しています。ダイナミックさや躍動感を感じさせる色として｢赤｣と設定し、変革する企業スタンスを強く打ち出す企業マインドを内外にアピールしています。

少しだけ青みのある赤を採用しているので、文字や大きな分量で利用しても読みにくくなることがない、使いやすい色です。

青
TOTO　→LINK

TOTOはバス・トイレ・キッチン等の住宅設備機器製造メーカーなので、水回り関連を連想させる青色でコーポレートサイトを作成しています。
ロイヤルブルー系の色味を利用しているので、重すぎず軽すぎず企業の商材のイメージにも合わせた選択となっています。

緑
三井住友銀行　→LINK

三井住友銀行はフレッシュグリーンとトラッドグリーンの2色のコーポレートカラーを組み合わせて使用しています。
薄い方の緑を「フレッシュグリーン」（若草色）と呼称し、若々しさ、知性、やさしさを表しています。濃色の緑を「トラッドグリーン」（深緑色）とし、伝統、信頼、安定感を表しています。このように2色で表現することもあります。
緑という色がもつフレッシュさと信頼性などをうまく利用して、信用第一の銀行にふさわしい色使いとなっています。

黄色
マツモトキヨシ　オンラインストア　→LINK

コーポレートカラーの黄色を多用して「マツキヨ」のオンラインショップであることを強く印象づけています。
ドラッグストアに黄色というのは、印象的には反対のイメージが強くなるカラーリングですが、あえてこの黄色を利用することで、ドラッグストアの中で黄色イコールマツキヨというイメージを確立することに成功しました。

黄色は大きく使ったり、ポイントで利用するには目立つ色ですが、通常の白いところに乗せる文字などには向いてないので、こちらのサイトはロゴの色の黒で抑える形になっています。
文字などにも黄色系を利用したい場合は、オレンジ色に近い色にするか黄土色に近い色にするかなど工夫が必要です。

黒
SONY　→LINK

SONYは黒やグレーのモノトーンでのWebデザインになっています。カメラやテレビ、ゲーム機、携帯電話、音楽関連商品など高品質、高級品というイメージを補強しています。映像や画像の美しさが引き立つ色使いです。
黒やグレー（銀）などをモチーフに商品の関連性をユーザーに視覚的にアピールしています。

ピンク
CANMAKE　→LINK

CANMAKEはプチプラコスメブランドです。かわいらしさ、若々しさなどをピンクで表現しています。ピンクの中でも派手なショッキングピンクを利用することで、価格帯やユーザー層に合ったほどよい感じを伝えやすいデザインになっています。
プチプラなので、あえて高級感を出さないPOPな色味や画像。フォントを利用して全体的なトーンを揃えています。

当社の作例

スタイルクリエイツで作成したサイトもご紹介いたします。詳しくはWORKSに掲載しておりますので、ご覧いただければ幸いです。

青系

●株式会社軽応便様　ベース：白、アクセントカラー：青と赤　→掲載ページ

●榎本書店様　ベース：白、アクセントカラー：青と紺　→掲載ページ

●九州大学環境センター様　ベース：白、アクセントカラー：水色と紺　→掲載ページ

●北栄水産様　ベース：白、アクセントカラー：紺　→掲載ページ

●サンエス護謨工業株式会社様　ベース：白、アクセントカラー：水色と紺　→掲載ページ

●株式会社タカ様　ベース：クリーム色、アクセントカラー：青と緑　→掲載ページ

赤系

●株式会社村上工作所様　ベース：白、アクセントカラー：赤　→掲載ページ

●株式会社ハマーズ様　ベース：白、アクセントカラー：赤と黒　→掲載ページ

●狸狸亭様　ベース：ベージュ、アクセントカラー：赤と黒　→掲載ページ

茶色・モノクロ系

●メディカルソフト様アドベンチャーツーリズム　ベース：白とベージュ、アクセントカラー：焦茶　→掲載ページ

●納谷建築設計事務所様　ベース：白、アクセントカラー：グレーと黒　→掲載ページ

●RBBJ様　ベース：白、アクセントカラー：赤と青　→掲載ページ

オレンジ系

●関西鶏卵流通協議会様　ベース：クリーム色、アクセントカラー：オレンジ　→掲載ページ

●ユナイテッドワークス様断熱リフォーム　ベース：白、アクセントカラー：オレンジ　→掲載ページ

●リサイクルミュウミュウ様　ベース：ベージュ、アクセントカラー：オレンジと紺　→掲載ページ

青が多い理由

全てを上部に記載したわけではありませんが、圧倒的に青系（紺色、水色含む）が多いです。これはロゴマークやコーポレートカラーが青系の企業様からの依頼が多いということも要因の一つかと思います。
青色のイメージが「清潔感、真面目さ、堅調さ、冷静、若さ、爽やかさ」などであることから、企業イメージに合いやすいこともあるでしょう。
これはおそらく、当社だけの傾向ではなく、全体的な傾向かと思います。

もちろん、青色一つとってみても、色々な濃度、彩度がありますので、すべて同じ色ではありません。ですが、もし会社の印象を他と違って見せたい場合、青をさけて他の色にした方が少しでも目立つ可能性はあります。
まだコーポレートカラーが決まっていない場合、あえて赤や黄色、紫、オレンジなど珍しい色を設定することも、ブランディングの一つの手段になります。

まとめ

以上、色の印象についてまとめてみました。
皆様が思っている以上に企業やサービスのイメージを左右するということがわかっていただけたと思います。
色によって様々な印象があり、企業イメージを良くする手法としてとても有効です。
しかし、一度ついたイメージはなかなか消えないので、ホームページなどを作成する場合は、よく検討する必要がございます。
とはいえ、イメージとか印象とか難しい、どんな色を選べばいいかわからないなどお悩みもあるかと思います。そんな時はぜひ一度スタイルクリエイツのいつでもご相談ください。お客様のご要望を踏まえて色々なご提案をさせていただきたく思います。