色の3属性とトーン
人間は『色相』『明度』『彩度』の三属性から色を認識すると言われています。
色相は色の種類、明度は色の明るさの度合い、彩度は色の鮮やかさの度合いです。色みのない白、灰色、黒を『無彩色』と呼び、赤、 青、緑のような色みのある色を『有彩色』と呼びます！
明度とサイドを組み合わせた色の概念を『トーン』と言います。
色の持つイメージ
色にはそれぞれイメージがあり、そのイメージは個人の経験や、国や文化によって変化します！
企業のロゴマークなどに利用される色はコーポレートアイデンティティカラーと呼ばれ、企業イメージや事業姿勢のアピールに活用されています。
ターゲットに合わせた色使いはマーケティング効果にもつながります。
Joe Hallorkの性別による色の好みの研究では、男女ともに青色が一番好まれ、男性は大胆でトーンが暗い色、女性は柔らかでトーンが明るい色を好むことが明らかにされています。
以下の図は一般的な色のイメージと色を使うのに適したサイト例の載せています。
| ポジティブ | ネガティブ | 適したサイト例 | ポジティブ | ネガティブ | 適したサイト例 | ||
| Red | 情熱、愛情、勝利、積極的、衝動 | 危険、怒り、争い | 飲食、キャンペーンなど | Yellow | 明るい、活発、幸福、躍動、希望 | 臆病、裏切り、警告 | 食品、スポーツなど |
| Pink | 可愛い、ロマンス、若い | 幼稚、繊細、弱い | ブライダル、女性向けサイトなど | Orange | 親しみ、陽気、家庭、自由 | わがまま、騒々しい、軽薄 | コミュニティ、飲食、キッズなど |
| Purple | 高級、神秘、上品、優雅、伝統 | 不安、嫉妬、孤独 | ファッション、ジュエリー、占いなど | Brown | 温もり、自然、安心、誠実、伝統 | 地味、頑固、汚い | ホテル、旅館、インテリア、クラシック、レトロなど |
| Blue | 知性、冷静、誠実、清潔 | 寂しさ、冷たい、悲しみ、臆病 | コーポレート、医療、化学など | White | 祝福、純粋、清潔、無垢 | 空虚、殺風景、冷たい | 医療、ニュース、EC、美容、コーポレートなど |
| Green | 自然、平和、リラックス、若さ、エコ | 保守的、未熟 | アウトドア、飲食など | Gray | 実用的、穏やか、控えめ | 曖昧、疑惑、不正、無気力 | 工業、家電、ファッションなど |
| Yellow green | フレッシュ、ナチュラル、若々しい、新しい | 未熟、子供っぽい | 新生活、新年度、先進的なサイトなど | Black | 高級、エレガント、洗練、一流、威厳 | 恐怖、不安、絶望 | 車、ジュエリー、ファッションなど |
WEBセーフカラーについて
Webで使用する色は、ユーザーのモニターによって少しづつ異なります。特に薄い色は、製作者が意図しない見え方になることがあるので注意が必要です。
Webセーフカラーは216色あり、どのモニターで見ても印象が変わりにくい色で構成されています。
デザインの際に必ず取り入れなければいけないというわけではありませんが、特にモノクロの表現や、色の区別をハッキリつけたい時に参考に良いです。
利用者視点に立った配色
色覚異常は日本人の場合、男性では20人に1人、女性では500人に1人の割合で発症していると言われいています。
誰にでもストレスなく見やすいサイトは、色覚異常に配慮した配色や、色だけい頼らないデザインを心がける必要があります。
色から考える配色
調和の取れた色の組み合わせは、色相環を規則的に分割することで作ることができます。
理論上は、色相環上で向かい合う2色、等間隔に三角形を形成する3色、長方形を形成する4色を使えば、調和の取れた色の組み合わせになると言われています！
色相から考える配色例を幾つかご紹介します！
＜まとめ＞
Webデザインにおいて色はとても重要な役割があり、デザイン全体が与えるイメージに繋がります。配色に気を配るだけでもサイトの印象が変わってきます。
基本的にサイト内における色はメインカラーとサブカラーなど3つの色構成が多いです。この3つの色を色相環を使いながらバランスをとりましょう。