基本11色とは、1969年に言語学者のBerlinと人類学者のKayがさまざまな言語における色名について調査した結果、成熟した言語に共通にみられた赤、オレンジ、黄、緑、青、紫、ピンク、茶、白、灰、黒の11の色名です。色を大まかに区切る際の代表的な色相といってよいでしょう。

◯赤が与える印象

・熱さ、強さ、情熱、興奮、危険、激しさ

赤は力強く、元気ややる気が芽生えたり、気分を高揚させたりするような印象を与えます。また、危険や注意を表す色でもあるので注目を集めたい箇所にアクセントカラーとして用いるのも効果的です。

◯赤を用いたWebサイト例

新潟県高等学校体育連盟

◯オレンジが与える印象

・暖かさ、明るさ、元気、快活、楽しさ、外交的

オレンジはビタミンカラーと呼ばれ、楽しい気持ちにしたり、親しみやすい印象を与えます。また、赤や黄のように注目を集めますが、チープになりすぎない色のため、スマートな雰囲気を保ちながらセール情報などを伝えることができます。

◯オレンジを用いたWebサイト例

未来ケアworker

◯黄が与える印象

・幸せ、輝き、希望、豊かさ、成功、ゴール

黄は橙に近い意味を持ちながら、より明るくエネルギーのある色です。さらに、豊かさや成功といった意味を持つのも黄とは異なっている点です。明度が高くなりがちなので可読性には注意が必要ですが、黒と組み合わせると危険や、警告を伝えることもできます。

◯黄を用いたWebサイト例

株式会社イヴェスタ

◯緑が与える印象

・健康、自然、安心、穏やか、平和、癒やし

緑は、自然を強く連想させる色であり、リラックス効果や疲労回復効果が期待できます。環境関係や健康関係、さらには安心感を与えるため保険関係のWebサイトで用いられることが多いです。

◯緑を用いたWebサイト例

学校法人峯学園　ひさみ幼稚園

◯青が与える印象

・冷静、悲しみ、誠実、知性、保守的、真面目

青は、集中力を高め気分を落ち着ける効果が期待できます。誠実さや知性を感じさせる色であるため、様々な業界で人気の色ですが、その分他のWebサイトとの差別化が難しいといった特徴もあります。

◯青を用いたWebサイト例

株式会社FCG

◯紫が与える印象

・神秘的、魅力、高貴、複雑な、芸術的、不思議

紫は、疲労回復から感性を刺激したり、個性を感じさせたりするなど幅広く様々な色の特徴を兼ね備えた色です。その複雑さから少し使い所が難しい色ではありますが、適切に用いると個性的で印象に残るWebサイトを作ることができます。

◯紫を用いたWebサイト例

近江楽堂

◯ピンクが与える印象

・可愛さ、恋愛、甘い、華やか、優しい、開放感

ピンクは全般的に柔らかく優しい印象を与える色で、女性向けや子ども向けのサイトで多く用いられます。その一方で、ビビットなトーンのピンクは快活でポップな印象を与え、強いインパクトを持つため、二面性を持った色でもあります。

◯ピンクを用いたWebサイト例

TOKYO GIRL

◯茶が与える印象

・自然、温もり、落ち着き、伝統的、剛健、大人っぽい

茶色は橙より優しい雰囲気を持ち、親しみを感じさせ、安心感や信頼感を与える色です。彩度、明度に関わらず、どんな場面にも馴染む慣用色のため、年代や性別を問わず万能に使える色です。

◯茶を用いたWebサイト例

ZERO JAPON

◯白が与える印象

・純粋、清潔、神聖、平和、完璧、繊細

白は清らかな印象を与え、広がりを感じさせる色です。白をメインカラーに用いる場合は寂しさや、手抜きのような印象を与える可能性があるため、レイアウトやフォントを工夫することが必要です。

◯白を用いたWebサイト例

プライベートガーデン Wedding　La Partir

◯灰が与える印象

・落ち着き、安定、無機質、調和、控えめ

灰は控えめで洗練された印象を持ち、落ち着いた印象を与える色です。安定感や信頼感を与える色でもあり、明度を調節することでどんな色とでも組み合わせることができるのも特徴の万能な色です。

◯灰を用いたWebサイト例

シゲル工業株式会社

◯黒が与える印象

・シック、高級感、重厚感、ミステリアス

黒は洗練された高級感やどっしりとした重厚感を感じさせる色です。白や金、銀などと組み合わせることで上品でモダンな印象を与えることができます。その一方で黒が全面に用いられすぎると圧が強く、閉鎖的な印象を与えてしまう可能性があるため、適切なバランスを意識して用いることが必要です

◯黒を用いたWebサイト例

ハッピーロード

ここまで基本11色がそれぞれ与える印象についてご紹介してきましたが、基本11色はあくまでも代表的な色であるため、すべての色にあてはまる訳ではないことに注意が必要です。ここでは与えたい印象から色を選ぶ際に注意したい点について、合わせてご紹介します。

◯明度、彩度

色を構成する基本的な要素として色相以外に明度と彩度があげられます。色の印象はこの明度と彩度によっても大きく異なります。多くの場合、明度が高いほど柔らかい印象に、彩度が高いほどアクティブな印象になります。例えば、赤全般はパワフルで情熱的な印象を与えますが、明度が低く、彩度が高い赤は高級感のある印象を与えます。

◯中間色相

本記事で紹介したのは基本11色相が与える印象であるため、これら11色の中間色相では異なった印象を与えることがあります。中間色相が与える印象は日本色彩研究所が発行している『カラーレンジマニュアル100』で詳しく紹介されているので参考にしてみるとよいかもしれません。

今回は基本11色それぞれが与えるイメージについてご紹介しました。

Webデザインにおいて色は単なるデザイン要素にとどまらず、ユーザーの感情や行動に大きな影響を与えます。色がもつ意味を考慮し、Webデザインに用いることでより印象に残る効果的なWebサイトを制作することができます。

弊社ドコドアのホームページ制作事例紹介では、色が与える印象を有効活用したホームページ事例をデザイナーによる解説を交えながら多数紹介しています。ぜひ合わせてご覧ください。