WEBデザインを行うなかで、サイト内の配色に頭を悩ませた経験はありませんか？WEBデザインを行うにあたっての配色はとても重要なものであるといわれています。ここでは、色の基本などを紹介するとともに配色の考え方も紹介します。また、配色のコツについても紹介しますので、WEBサイトの配色についてさまざま学んでいきましょう。

なぜWEBデザインでは配色が重要なのか

普段はあまり意識したことがないという人がいるかもしれませんが、色というのは人々に大きな影響を与えています。色によって気持ちを盛り上げたりリラックスさせたり、記憶力を高めたりもします。たとえば、人間に興奮と刺激を与えるのは赤系の色、リラックス効果は緑系、鎮静作用があるといわれているは青系の色です。WEBデザインにおいても配色は重要となります。サイトの見た目のきれいさだけでなく見ている人にさまざまな情報を伝える効果があり、色によってサイトの明るさや悲しみなどのイメージを与えることもできます。

また、ブランドのイメージやポリシーもサイトの色によって伝えることができ、ブランドや企業への信頼へとつながることもあるのです。色の組み合わせや配置も重要となりますので、単純に好みの色だけを選ぶのではなくWEBサイトで伝えたい情報を考慮して、配色を行うことが大切となります。

WEBデザインの配色を考えるための色の基本

一口に色と言っても、その種類は果てしない数となり配色についてもさまざまです。WEBデザインの配色に入る前に、まず色そのものの基本的な知識を身に付けましょう。

RGBとCMYK

色には「光の三原色」と「色の三原色」があります。光の三原色はRed（赤）Green（緑）Blue（青）の頭文字を取ってRGBとなり、色の三原色はCyan（やや緑みの明るい青）Magenta（赤紫）Yellow（黄色）の頭文字にBlack（黒）のKを加えてCMYKとなります。このRGBとCMYKという色の表現方法は、WEBデザインの色について知るうえで基本です。光の三原色であるRGBは光というだけあって混ぜると次第に明るくなり、この3色を混ぜると最終的には一番明るい白色になります。また、テレビのブラウン管や液晶モニタなどでは3色のそれぞれが256段階の濃さで表現でき、その3乗にあたる1677万7216通りの色が表現できるのです。テレビで映されるすべての色は、この3色で表現しています。

CMYKはインクで色を表現するときに使われ、パソコンのプリンターなどの印刷物は基本的にCMYKで色を表現しています。CMYKはそれぞれの色につき0%から100%まで指定できるため、理論上では莫大な数の色を表現できるのです。しかし、実際にはプリンターのインクですべての色を再現することは難しく、RGBに比べて再現できる色は少ないです。WEBデザインを考えるうえでは、RGBで行うことが基本となります。

色の3属性とトーン

色には3属性があります。色相、明度、彩度です。どんな色もこの3属性で表現することができます。色相とは色合いのことで、赤や青、緑や黄色といった色味の違いのことを指します。明度は色の明るさです。白を100とし黒を0として色の明るさを表現します。白に近づくほど明度が高く、黒に近づくほど明度が低くなります。彩度は色の鮮やかさのことです。数値が低くなるほど暗く、くすみ色がなくなり白や黒に近づきます。逆に数値が高いほど明るく鮮やかな色になるのです。1番彩度が高い色を「純色」と呼び、白や黒など色味のない色を「無彩色」と呼びます。

トーンとは明度と彩度が同じ色のグループをいい、PCCS（日本色研配色体形）によって、ビビットやグレイッシュなどの12のグループに体系化されます。トーンはデザインの色彩感覚において重要な知識のひとつです。デザインの専門学校においても、ほとんどの学校で初期に学びます。このトーンの概念がしっかりと身に付いているかが、デザイナーとしての色彩感覚をもっているかの基準となります。デザインで配色を考える際は、色の3属性及びトーンの考え方が重要となるのです。

色が与える印象や影響

それぞれの色は見た人に与える印象や情報が異なります。ここからは、それぞれの色が与える印象と影響について紹介します。

暖色

暖色とは明るく温かい印象を与える色のことをいい、主に赤色やオレンジ、黄色にピンクなどがあります。暖色が人々に与えるイメージは明るい、温かいといったほかに、元気や熱いなどのポジティブなイメージが多いです。暖色はどの色も彩度が高く視覚の刺激が強いため、ほかの色に比べて膨張、進出しているように見えます。また、情熱や興奮などの活力を与えるイメージがあり、食欲や購買意欲を高める効果もあります。

寒色

寒色はその名の通り人々に寒さや冷たさなどを与える色です。主に青や水色、紺色などがあります。寒色は寒さや冷たさのほかに爽やかさ清潔感、高級感などのイメージを与えるといわれています。視覚に与える刺激が弱いぶん、寒色は収縮、後退して見えるのが特徴です。刺激が少ないということで長時間WEBサイトを閲覧してもらいやすく、知的で落ち着いたサイトに向いているといわれています。

中性色

中性色とは暖色、寒色ではなく温度感を感じない色のことです。温かくもなく、冷たいイメージでもない色で、主に緑色や紫色などを指します。中性色のイメージは色ごとに異なります。自然体でニュートラルな状態、すべてのバランスが取れていて人々に穏やかさを与えるのが緑色です。紫色は高級感とエレガントさを人々に与えます。高級感とともにリラックスして閲覧してほしいWEBサイトには中性色が向いています。

無彩色

無彩色とは先にも説明した通り彩度を持たない色のことで白や黒、灰色のことを指します。無機質なイメージもありますが、落ち着いた印象や上品なイメージを与えます。彩度を持たない色ではありますが、色相が含まれていないため純色でもあり、どんな色相の色とも組み合わせることできる色です。無彩色が多いWEBサイトは上品さと落ち着いたイメージを与えます。したがって、過激な内容のサイトには向かず、落ち着いたテーマのサイトに向いています。

WEBデザインにおける配色の考え方の基本

ここからはWEBサイトをデザインするうえで重要な配色の考え方を2つ紹介していきます。

WEBサイトの基本配色とその比率

WEBサイトをデザインするうえで、基本的な配色というものがあります。役割ごとに分けられ「メインカラー」「ベースカラー」「アクセントカラー」の3種類です。メインカラーはそのWEBサイトの印象を決める主役的な色ですので基本的には最初に決めます。あくまでもサイトのイメージですが、メインカラーは主に文字に使われることが多く読みやすくないといけないため、一般的には明度が低い色を選びます。ベースカラーは主にサイトの背景や余白に使われることから最も多く占める色となります。大切なのは、ほかの色の妨げにならない色を選ぶことです。一般的には無彩色といわれる白色や黒色、グレーを使うことが多いです。

アクセントカラーはWEBサイトのなかで最も目立つ色で全体の印象を引き締め、メリハリを付ける役割があります。サイト全体に占める割合が最も小さく目立つ色を使用することが理想です。サイト全体のなかでメインカラーとベースカラー、アクセントカラーの配色の比率は25：70：5がベストのバランスだといわれています。色を決める順序はメイン、ベース、アクセントの順番で決めると良いでしょう。

色相環による3つの配色パターン

実際にWEBサイトをデザインして色を決める段階となり、色の選び方に迷うことが多々あります。メインカラーが決まってもベースカラーがなかなか決まらなかったり、メインとベースは決まったもののアクセントカラーがなかなか決まらなかったりします。そのようなときは、色相還を用いると良いでしょう。色相環とは、色相を環状に配置したもので、色を体系化するときに便利です。色相環を用いる場合は「同系色」「反対色」「トーン」の3つのパターンがあります。似た色を使って全体をまとめたいときに選ぶと良いのは同系色です。

同系色には、色相は全く同じで明度や彩度だけを変えた「同一色相」、色相が隣り合っている組み合わせの「隣接色相」、色相は離れているものの似ている色の組み合わせの「類似色相」があります。お互いの色を引き立たせたいときに選ぶと良いのは反対色です。反対色には、色相環で反対の位置にある色を組み合わせる「補色色相」、色相環上に正三角形を置いた際に2点上となる色同士の「対照色相」、色相環で直角にあたる色同士の「中差色相」があります。

全体的に鮮やかな感じとか、柔らかい感じなどのイメージで選びたいときに用いるのがトーンです。トーンには同じもの同士の「類似トーン」とトーンが異なるもの同士の「対照トーン」があります。類似トーンは収まりの良い配色となり、対象トーンは色相が近いなかでのアクセントとなります。

忘れてはいけないWEBデザインの配色による視認性と誘目性

WEBデザインにおいて、配色の「視認性」と「誘目性」も忘れてはいけません。視認性とは見えやすさのことです。背景と文字の色の組み合わせによっては、文字が見えづらく読みにくいサイトとなってしまいます。たとえば、白を背景にした場合は色相環のなかでも明度が低い色（青や紫）は視認性が高く、明度が高い色（黄色など）は見えづらくなります。逆に背景を黒にした場合には、明度が高いほうが視認性は高くなるのです。

誘目性は人の目を引き付ける度合いのことです。誘目性の高い色とは何かを探しているときではなく、ぼんやりと眺めているなかでもパッと目を引く色と言えます。注意を向けていない状態でも認識させるのが誘目性の高い色ですので、危険を伝えるときや禁止事項を伝えたいときに有効です。背景にもよりますが、背景の色が白色の場合は暖色で高彩度の色が誘目性の高い色といわれています。WEBデザインで配色をする場合には視認性と誘目性も考慮することが大切です。

覚えておきたいWEBデザインにおける配色のコツ

ここまで、WEBデザインの配色についてのさまざまな知識を学んできました。ここからは、学んできたものを活用するための配色のコツを紹介していきます。

色を使いすぎない

WEBサイトのデザインで配色をするときには色を使いすぎないことが大切です。多く色を使うと、それだけ情報が多くなるため、ごちゃごちゃとしたまとまりのないイメージのサイトとなってしまいます。使用する色は、基本的に3色から4色に抑えると調和のとれた配色となります。もし、それ以上の色を使いたいと思った場合は、先に決めたメインカラーやアクセントカラーと色相が近い、類似色相の中から色を選ぶと良いでしょう。たとえば、メインカラーやアクセントカラーが黄色であれば黄緑色かオレンジ色、青色であれば青緑か青紫を選びます。

色が持つ効果を正しく使う

暖色や寒色など、それぞれの色は異なる効果があることは先述しました。そのなかでも、特定の色そのものが持つ効果や意味合いもあります。たとえば、暖色のなかの赤色は温かさや明るさを伝えるほかに情熱、怒り、激しさなどの感情や若さ、熱意、大胆さなどのイメージも連想させます。こういったことを踏まえて、メインカラーを選ぶことが大切です。WEBサイトが伝えたいイメージと、それぞれの色が持つイメージを異なるものにしないことが重要となります。また、文化が異なることで色が持つ意味も変わります。

たとえば、黄色は同じヨーロッパでもイギリスでは活気などの前向きなイメージですが、フランスでは嫉妬、ギリシャでは悲しみといったネガティブなイメージとなります。WEBサイトの色を配色するにあたっては、サイトのターゲットについても理解が必要です。

悩んだときのWEBデザインおすすめ配色見本サイト

WEBデザインにおいて、配色で悩んだときには配色の見本パターンを閲覧してアイディアを見つけることも大切です。ここでは、無料で利用できる便利な配色見本サイトを3つ紹介します。1つ目は「Hello Color」です。このサイトは、画面をクリックするたびに異なる2色の組み合わせを表示してくれます。クリックという直感的な操作を繰り返すことで、思いもよらない色の組み合わせを見つけることができるかもしれません。

2つ目は「Color Supply」です。このサイトは色相環のパターンから3色の組み合わせを選んで閲覧できるサイトとなっています。ベースカラーとメインカラー、そしてアクセントカラーの配色パターンを考えるときには特に便利なサイトです。3つ目の「Color Hunt」は世界中から投稿された4色の配色パターンを閲覧できるサイトです。人気順や流行順に並び変えることもできますので、さまざまな配色パターンに出会うことができます。