デザイン未経験者・初心者へのアドバイス【色】第3回

2019年7月25日

 

第2回「レイアウト」の続きです。
 

今回は色についての記事になります。

私は色彩検定2級を持っていてその知識も踏まえて書いていきます（もはやうろ覚えもありますが）。
ただ、今回もあまり細かくは書かず、ざっと概要になります。
 

②色

 

色のイメージ

まず色について、人が受けるイメージや心理効果があります。

例えば
■赤：熱い、強い、怒り、エネルギッシュなど
■青：冷たい、冷静、知的、爽やか、信頼、自由
■黄色：喜び、陽気、幸福、幼稚
■緑：自然、安らぎ、安全、平和、平凡
■紫：高貴、高級、和風、妖艶
■茶色：自然、堅実、古い、保守的
■ピンク：かわいい、やさしい、女性らしい
■白：純粋、神聖、清潔、善
■グレー：曖昧、不安、シック
■黒：恐怖、孤独、悪、高級

などです。

そこで、どの色を使うかによって見る人の受け取り方が変わってくるわけです。

テーマやコンセプト、ターゲット層に合った色の使い分けが重要です。

加え、色によって視認性（目立ちやすさ）も変わってきます。
 

出典:【確認】車両進入禁止の標識の正確な意味とは？車両通行止めとの違いは？
 

交通標識を見れば分かると思いますが、危険や注意喚起を促すのは赤、次に黄色が多いですよね。
これらは色のイメージと視認性両方を含んだ色使いと言えます。
 

出典:赤外線サーモグラフィ
 

温度計やグラフ、ゲームなどのゲージでも青や緑→黄色→オレンジ→赤となるのは、色のイメージとそのグラデーションによるものです。
 

色相、彩度、明度

色は色相、彩度、明度の3つで構成されています。
この3つを把握すると色の使い方が分かりやすくなると思います。
 

色相

出典:https://www.dataplan.jp/blog/design/702
 

要は赤、青、黄色など色味のことです。
 

彩度

出典:https://www.dataplan.jp/blog/design/702
 

色の鮮やかさのことです。
彩度が高いと澄んだ色、低いと濁った色になります。

少し彩度を低くするとオシャレに見えたりします。
 

明度

出典:https://www.dataplan.jp/blog/design/702
 

色の明るさのことです。
例えば同じ赤でも明るい赤、暗い赤などがあります。

最初は彩度と明度の区別が少しつきにくいかもしれません。
 

配色

出典:https://www.dataplan.jp/blog/design/702
 

色の組み合わせによって、人には美しく見えるものやそうでないものがあります。

それは色相・彩度・明度によって構成される色同士の組み合わせと言えます。

例えば美術の時間で補色を習ったかもしれません。
色相環では正反対の色になります。

補色でも例えば紫と黄色の組み合わせは鮮烈に見えたり、人の好みによってはキレイに見える組み合わせになると思います。
しかし赤と緑はそのちょっとした色相・彩度・明度の違いによっては人の目にはチカチカしてキツく見えます。
 

また、文字の場合は視認性も大事で読みやすい配色にすることも重要です。

上の4つそれぞれ文字の視認性の良さ・悪さの理由を、先程の色相・彩度・明度、補色を踏まえて考えてみてください。

色相・彩度・明度が近いとお互い似た様な色になるので、文字が埋もれて見えづらくなるわけです。
逆に補色や明度などのコントラストが高いと文字が見えやすくなりますが、色の組み合わせによってはチカチカする現象（ハレーション）を起こすので注意が必要です。
 

ただ、デザインによって意図的に文字の視認性を下げることでオブジェクト内の優先度を変えたり、まずはビジュアルを優先をする場合もあるのでケースバイケースになります。
 

また、配色において、それぞれが占有する色面積も重要です。

①メインカラー
②サブカラー
③アクセントカラー

です。
 

出典:http://creators-manual.com/

それぞれ何かと言うと、

①メインカラー：全体のイメージを作る役割。
②サブカラー：メインカラーを補う役割。
③アクセントカラー：全体を引き締めたり、ユーザーの目を引く役割。

になります。

それぞれを使用するカラーの割合は
メイン7：サブ2.5：アクセント0.5
が良いとされています。

これらはファッションのコーディネートでも同じことが言えます。
 

私は配色に関しては昔から苦手な方ですが、最近はフォトショップなどの機能やWeb上のサービスで自動で適した配色のサンプルを表示するものもあるので、苦手な人は利用してみるのもと良いかと思います。
→【2019年版】もう配色デザインには迷わない！すごい無料カラーパレットツール44個まとめ
 

「③フォントについて」は第4回で記事にする予定です。
 

なお、私のポートフォリオサイト（作品集）はこちらです。
良かったらご覧ください。