ajike switch

デザイナー必見!デザインに役立つ配色の基本【初級編】

こんにちは。
アジケに入社してもうすぐ9ヶ月目になります、デザイナーの原です。

さて、今回はデザインをする上で、知っているときっと役立つ「色」について書いていきます。

色の3属性

どのような「色」も必ず3つの要素からできています。それが「色の3属性」です。

【色相】赤や青など色の種類。
色相

【明度】明暗。明度を上げると白になり、明度を下げると黒になる。
明度

【彩度】色の鮮やかさ。彩度のない無彩色(白・灰色・黒)、彩度のある有彩色に分けられ、彩度が高いと派手な印象に。
彩度

トーン

明度と彩度を合わせた呼び方。色の調子のことで、配色を考えるのに重要な役割を持ちます。

トーン
【各トーンの意味】
v = ビビッド(鮮やかな)
b = ブライト(明るい)
s = ストロング(強い)
dp = ディープ(濃い)
lt = ライト(浅い)
sf = ソフト(柔らかい)
d = ダル(鈍い)
dk = ダーク(暗い)
p = ペール(薄い)
ltg = ライトグレイッシュ(明るい灰みの)
g = グレイッシュ(灰みの)
dkg = ダークグレイッシュ(暗い灰みの)

色相環

色相のすべてを円にして並べたものを「色相環(しきそうかん)」といいます。
配色を考える際に役立ち、「マンセル色相環」「PCCS色相環」「オストワルト色相環(今回は省きます)」の3つの色相環があります。

【マンセル色相環】
アメリカの画家マンセルが創案し、アメリカ光学会が修正を加え、現在の形に。
「赤・黄・緑・青・紫」を主要5色とし、対向には混合すると無彩色(灰色)になる「物理補色」を配置。合計100色相(代表の20色相で表すことが多い)国際的に通用する色相。
マンセル色相環

【PCCS色相環】
日本色研配色体系(Practical Color Co-ordinate System)による色相環。心理四原色と呼ばれる「赤・黄・緑・青」を主要とした合計24色。
心理四原色の対向には互いに残像として見ることのできる(一定時間、ある色を見続けた後に白い壁などに目を移すと見える色)「心理補色」を配置している。
PCCS色相環

配色

ここからは【PCCS色相環】をもとに配色方法を説明します。

【同一色相配色】色相差:0
その名前の通り、同じ色相同士のことで、違いは明度と彩度で表す。同じ色相のため、まとまりやすく「トーンオントーン」とも呼ばれる。
同一色相配色

【隣接色相配色】色相差:1
隣合った色相同士の組み合わせ。同一色相と同じく、まとまりやすい配色ですが、変化に乏しくなる場合も。
隣接色相配色

【類似色相配色】色相差:2〜3
色相差の近い色同士の組み合わせで、適度な共通性と変化が感じられる。トーンイントーンとも呼ばれる。
類似色相配色

【中差色相配色】色相差:4〜7
類似性も対照性も感じることができない、調和の取りにくい形式。オリエンタルな配色。
中差色相配色

【対照色相配色】色相差:8〜10
ほぼ補色の関係。強烈な印象を与える配色となり、色みの違いが大きいことから彩度を上げ過ぎないことが必要。
対照色相配色

【隣接補色配色】色相差:11
補色色相配色の1つ前の色相との配色。ほぼ補色の関係となるため、トーンや面積比などでバランスを取ることが必要。
隣接補色配色

【補色色相配色】色相差:12
補色同士の配色。トーンと明度に差をつけた方が安定感のある配色に。
補色色相配色

まだまだ奥の深い世界ですが、簡単な色の相性などは覚えておくといつか役立つかもしれません。
以上、アジケ デザイナー原でした!

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×