Webサイトデザインの配色【色の基礎知識】

Webデザインを考える上で配色は非常に重要です。色が人に与える影響は大きく、配色1つで好印象にも悪印象にもなります。人は色に対してイメージを持っているので、そのイメージを活用する必要があります。また、視認性や判読性、可視性などにおいて色の役割は重大です。

テキストイメージ、グラフィックなどを何色にするかでWebページの「読みやすさ」は大きく変わるためです。本記事では、色の使い方で抑えておきたい基本ルールをまとめますので、よろしければ御覧ください。

加法混色と減法混色

加法混色

ディスプレイから発せられる色は、「加法混色」で表現されます。加法混色とは、色の三原色である赤（Red）、緑（Green）、青（Blue）を組み合わせて色を表現する方法です。色を重ねるごとに明るくなり、3色をすべて混ぜると白色になります。

Webページは基本的にディスプレイを通して閲覧されるので、Webデザインにおいて色を考える場合は、この加法混色をｍとにします。

現在主流のコンピュータでは、各色を256階層（8ビット）で表現するので、全体で16,777,216色（256の3乗）を表現することができます。

減法混色

加法混色に対して「減法混色」と呼ばれる色の表現方法もあります。減法混色では色の三原色であるシアン（Cyan）、マゼンタ（Magenta）、イエロー（Yellow）を組み合わせて色を表現します。色を重ねるごとに暗くなり、3色をすべて混ぜると黒色になります。

印刷物のように、それ自体が発行しないものに用いられている色の表現方法です。なお、減法混色の場合、イロハ物体にあたった光の反射率によってきまります。そのため、同じ物体でも光源（太陽光や白熱灯など）によって色が変わって見えます。

色の三属性

色は光の波長によってかんじるものなので、理論的には教会のない、連続したものです。しかし、ひとによって感じ方が異なったり、表現が曖昧になるため、一般的には色を数値として定量的に扱えるカラー・システムを用いて表現します。

カラー・システムでは、色を「色の三属性」と呼ばれる、「色相」、「明度」、「彩度」の3つの属性で表現します。

色相

色相とは、赤や青、黄といった色味・色合いのことです。色を体系的に表す際に使われます。「青っぽい」などは色相に対する表現になります。

色相を構成する可視光線に含まれる色の中から基準となる色を選んで順番に円状に並べたものを「色相環」と呼びます。なお、色相環において、対角に位置する色を「補色」とよびます。

明度

明度とは、色の明るさを示す度合いです。明度が高ければイロハ明るく軽い感じになり、明度が低ければ暗く重い感じになります。最も明度の高い色は白、最も低い色は黒です。「明るい青」などは明度に対する表現になります。

なお、白や灰色などの無彩色には色相や彩度がなく、明度だけで表現されます。

彩度

彩度とは、色の鮮やかさを示す度合いです。彩度が高い色の純度が高く鮮やかに見え、彩度が低いと色が濁っているように見えます。一般的に、「鮮やかな青」などは彩度に対する表現になります。

白や黒などの無彩色の割合が増えると彩度は下がります。一方、無彩色を全く含まない色を「純色」と呼び、彩度が最大になります。

色のトーン

トーン（色調）とは、明度と彩度の組み合わせで「色の調子」を示したものです。明度と彩度がそれぞれ縦軸と横軸になる表内でトーンは表現されます。

トーンの分類方法はいろいろあるのですが、大きく分けると「純色」「明清色」「暗清色」「中間色」「無彩色」の5つに分類できます。

「純色」はある色相の中で最もこう再度の色で混じりけのない色です。「明清色」は純色に白を混ぜた色、「暗清色」は純色に黒を混ぜた色で、「中間色」はその中間です。「無彩色」はトーンにおいて彩度のない、白や黒、灰色です。

上図を見ると、色は色相（赤や青など）だけでなく、トーンに大きく影響されることがわかります。

なお、同じトーンのイロハ色が変わっても調和しやすいので、配色の際に1つの指針になります。直感的に調和する色をきめるのもデザイナーの能力ではありますが、色に関するルールを知った上で活用すれば、よりよい配色を行えるようになります。

有彩色と無彩色

色味によって色を分類すると、赤や青、黄、緑など色みをもたない「無彩色」に分類できます。彩度や明度に関わらず、地味でも派手でも無彩色以外はすべて有彩色となります。有彩色は「赤み」、「青み」、「黄み」がかかっている色としても表現されます。

補色

補色とは、色相環の正反対の位置にある色です。赤の補色はシアン、緑の補色はマゼンタになります。なお、補色である2色を混ぜあわせると無彩色になります。

補色同士を組み合わせるとお互いの彩度がましたように見えるなどの配色効果があります。

透目性

色の透目性とは「目立ちやすい色の度合いや「注意の惹きつけやすさ」です。

人間の心理的なものが関係しており、無彩色よりも有彩色が高く、また彩度の低い色よりも彩度の高い色のほうが高くなります。色相では暖色のほうがたかくなりますが、背景色や色の大きさ、位置などによって変わります。

視認性

色の視認性とは「色の見えやすさ」です。視認性においては明度差がもっとも重要です。

背景に図番や文字などをレイアウトする場合に背景色と文字の色との間で明度差が小さいと文字が見えにくくなり、背景色との明度差が大きいと文字は見えやすくなります。また、明度以外にも彩度や色相の差も関係してきます。最も視認性が高いのは、踏み切りや標識にも使われている黒と黄色です。

膨張色と収縮色

同じサイズの画像が2つあっても、暖色系の色や明るい色は大きく見え、寒色系の色や暗い色は小さく見えます。また、背景色と比べ、全面のオブジェクトの明度が高ければ、オブジェクトは膨張しているように見えます。

このように、使う色によって大きさが異なって見えます。白が最も膨張して見える色、黒が最も収縮して見える色になります。

進出色と後退色

赤・オレンジ・黄色などの暖色系で、明度の高い色を「進出色」、緑・青緑・青などの寒色系で暗い色を「後退色」と呼びます。同じ距離に同じ大きさの2つの色をおいて眺めた場合、進出色は飛び出るように見えるのに対し、後退色は引っ込んで見えます。

なお、進出や後退の効果は周囲の色や背景移植との関係で見え方は異なります。

対比現象

「対比」とは2色が影響しあうことにより見え方に変化がおこる心理的効果で、主なものに以下の4種類があります。

明度対比

有る色の明度がその色の周りにある別の色の影響をうけて、本来の明るさよりも明るく見えたり、暗く見えたりする現象です。

彩度対比

有る色の彩度が、その色の周りにある別の色の影響を受けて、本来の彩度よりも高く見えたり、低く見えたりする現象です。

隣接する色同士が影響しあって、見え方が少し変わって見える現象です。例えば、同じオレンジをそれぞれ赤の背景、黄色の背景においたとしても、赤を背景にしたオレンジは黄色を強く感じます。一方黄色を背景にした当職は赤みを強く感じる色に見えます。

縁辺対比

色と色の接する縁の部分でおこる対比現象です。隣接する部分では隣の色との明度差が強調されて縁のあたりだけ明度対比がおこってみえます。

連想作用

連想作用とは、ある色を見て何かを連想することです。連想する内容は色を見る人の知識や経験、国や地域などによって異なりますが、一定の傾向はあり、基本的にはそれぞれの色と関連のあるものや事柄です。「赤→りんご」「黄→レモン」のように具体的なものと、「赤→情熱」や「黄→楽しい」のよおうな抽象的なものがあります。また、同じ色相の色でも明度や彩度の違いによって、連想する内容は変わります。

カラーイメージスケールは人が持っている色に対する共通感覚をグラフとして示したものです。一般的にはSoft-Hard、Cool-Warmと分類し、そのグラフ上に色やその色の持つ関係性を作り上げていきます。