TOP > COLUMN > Design Tips > 色の印象について

色の印象について

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

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

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

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

色の三要素(三属性)について

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

色相環

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

彩度

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

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

明度

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

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

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

無彩色と有彩色

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

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

清潔感、爽やか、無垢、すっきり、神聖、シンプル
高級感、男性的、都会的、重厚、厳粛、死、葬送
グレー調和、協調性、中立、ニュートラル、都会的、シャープ、落ち着き
情熱、楽しい、激しさ、力強さ、祝祭、興奮、怒り、破壊、危険、ルビー
オレンジ若々しさ、明るさ、温かみ、家庭的、美味しそうな、親しみ、ポジティブ
光、希望、明るさ、温かみ、フレッシュさ、軽快さ、注意、警戒
新鮮さ、エコ、安全、清潔、平和、調和、森林、健康、リフレッシュ、リラクゼーション、園芸、植物、エメラルド
清潔感、真面目さ、堅調さ、冷静、若さ、爽やかさ、水、空、海、涼しさ、安全、サファイア
高貴さ、高級感、古典、上品、エキゾチック、知性、ロマンス、ラベンダー、アメジスト
ピンクかわいい、綺麗、優しい、華やか、恋愛、ロマンチック、おしゃれ、若い
渋さ、安定、ぬくもり、秋、落ち着き、堅実、大人しい、シニア、料理

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

暖色と寒色

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

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

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

暖色ロゴ

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

感触ロゴ

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

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

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

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

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

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

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

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

色変えロゴ

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

有名企業サイトの作例

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


NTTドコモ →LINK

docomo

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

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


TOTO →LINK

TOTO

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


三井住友銀行 →LINK

三井住友銀行

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

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

マツキヨ

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

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


SONY →LINK

SONY

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

ピンク
CANMAKE →LINK

CANMAKE

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

大阪市中央区のスタイルクリエイツはホームページ制作(Web 制作)を得意とする総合広告代理店です。
ウェブマーケティング、SEO 対策、WEB コンサルティングも対応可能です。
広告・デザイン・Web(ホームページ)に関わることなら何でもお気軽にお問合せ下さい。

CONTACT お問い合わせ
営業時間:
9:30~18:30
TEL:
06-6210-3063(大阪市中央区)
TOP