Webデザインのための配色の基礎用語

今回はWebデザインをする上で基本となる配色の基礎用語についてご紹介します。
Webデザインでの配色するうえでまず学ぶべきことは何？というような疑問を解決する記事内容です。この記事を読み終えると配色の基礎となる知識を学習できるようになります。

筆者はヒューマンアカデミーWEBデザイン講座(WEBディレクターコース)、KENスクールのレスポンシブWebデザイン講座を受講済。そして、現役Webデザイナーです。

1 色相環とは
2 色の三属性
3 有彩色と無彩色
4 トーンとは
5 可読性と視認性
6 色相心理

色相環とは

まず色相とは赤や青、緑といった色の違いのことを言います。赤→オレンジ→黄色→緑といったように色相が変化していく様子を分割し環状に配置したものを色相環と言います。マンセル色相環は赤、黄、緑、青、紫の5色を基本として、5色の中間色を橙、黄緑、青緑、赤紫の5色を加えた10色をベースとし10色を2等分した20色相が一般的です。WebデザインではPCCSの24色相環を使用します。

色の三属性

色を表す場合に色相、明度、彩度の3つの要素を使用します。この3つの要素を色の三属性と言います。

色相

赤や青、緑といった色の違いのことを言います。

明度

明度は色の明るさを表します。明度が高いや低いと表現します。一番明度が高い色は白色で一番明度が低い色は黒色になります。

※明度の差が小さい組み合わせは、文字が読みにくくなるため、明度差が大きいと可読性が良くなります。
彩度の高い色は、強く派手で元気。彩度の低い色は、地味。
明度が高い色はやさしい、柔らかい。
明度彩度が低い色は、堅実、重厚。

彩度

彩度は色の鮮やかさを表します。彩度が高いや低いと表現します。彩度が高いと強く派手に見え、彩度が低いと弱く地味な印象になります。

有彩色と無彩色

色は有彩色と無彩色に大きく2種類に分けることができます。有彩色とは赤・黄色・緑色などの色味を持つ色です。つまり、色の三属性の色相・彩度・明度を持つ色でもあります。無彩色は白・黒・灰色です。逆に色相・彩度を持たずに明度だけを持つ色です。

トーンとは

トーンは明度と彩度が共通の色をグループにしたものをトーンと言います。青色でも鮮やかな青色やくすんだ青色もあります。明度と彩度の組み合わせによって様々な色が存在します。
その中でグループ化したものがトーンです。

可読性と視認性

可読性とは、文字通り、文字の読みやすさのことです。
視認性とは、パッと見て時の認識のしやすさのことです。

色相心理

赤色

赤は強いエネルギーをイメージする色で暖色系の代表色です。信号機や消火器などに使用されており危険を表す。ショッピングなどのセール広告にもよく使用され購買色です。興奮や情熱、怒りなどのエネルギッシュな意味合いもあります。
ポジティブイメージ：情熱、勝利、祝い、行動的、愛情
ネガティブイメージ：危険、怒り、興奮、暴力

橙色

太陽をイメージする色なので温かみがり元気で活発なイメージを与える色です。赤と黄色の中間色なので主張も強くなく柔らかく親しみのある色です。食欲を促す色で飲食店や行動を活発にするため大手通販サイトアマゾンのサイトでも使用されいている色です。
ポジティブイメージ：陽気、暖かい、活発、健康的、食欲
ネガティブイメージ：派手、安っぽい、わがまま

黄色

希望や喜びの色で有彩色の中で最も明度が高い。希望や喜び、注意喚起、又は幼さや若さを印象付けるので若者やキッズ向けの色である。
ポジティブイメージ：若々しい、希望、幸福、明るい、楽しい、にぎやか
ネガティブイメージ：幼稚、警戒、騒がしい、未熟、落ち着かない

黄緑

緑色より、黄色よりのため、明るくて、爽やかな色です。新鮮さや親しみやすさ、リラックス効果や癒しの効果も期待されます。

緑色

森や植物、などの自然を連想する色で視覚的に刺激が少なくリラックス効果があり、平和的な印象を与える。
ポジティブイメージ：自然、平和、やすらぎ、新鮮
ネガティブイメージ：田舎、保守的

青色

空や海などのイメージを連想する色です。コーポレートカラーにもよく用いられます。信頼感や誠実さを表します。
ポジティブイメージ：信頼、知性、誠実、清爽
ネガティブイメージ：冷淡、寂しさ、切なさ

紫色

昔から紫は貴重な色とされてきたので高貴な印象がありさらに魅惑的な印象もあります。
ポジティブイメージ：高貴、高級、上品
ネガティブイメージ：下品、不安、不満

茶色

ポジティブイメージ：自然、落ち着き、ぬくもり、伝統
ネガティブイメージ：頑固、老い、退屈、汚い、陰気

黒色

無彩色である黒色は他色を引き立てる色として用いられています。後退色、重量色、収縮色の性質を持っています。全体を引き締める効果がありますが、大きな面積で使用した場合は圧迫感や重苦しい印象を与えてしますので注意が必要です。
ポジティブイメージ：高級感、上品、力強い、男性的、権威、格式高い
ネガティブイメージ：闇、夜、悪