Webデザインの配色のコツ(色相環の組み合わせ) - 新米Web担のためのホームページの作り方 | 第26回

今回は、色相(色の種類)の組み合わせ、つまり「配色」に関して、解説していきたいと思います。

 

 

配色が重要なのはなぜ?

先回の復習になりますが、色を構成する3つの要素には、「色相」、「明度」、「彩度」がありました。

そして、「明度」と「彩度」の組み合わせからなる「トーン」を合わせることによって、Webデザインの全体的な調和を保つことができるということについても見てきました。

でも、実は「トーン」が同じでも、「合う色の組み合わせ」と「合わない色の組み合わせ」があります。

なので、色の組み合わせが良いかどうかを考えることはとても大切です。

 

もちろん、ある2複数色の組み合わせについて「これが好きかどうか?」と尋ねたら、人によって好みは異なりますので、答えはばらばらになります。

でも、その組み合わせについて「調和していると思うか?」と尋ねた場合、多くの人の答えは同じになるのです。

つまり、世界中のどんな人に聞いても、綺麗なものは「きれい」、汚いものは「汚い」と感じる一定の感覚があるのです。

 

これをアメリカのある学者が理論としてまとめました。

その中の一つは、「法則に基づいた規則性のある色の組み合わせは調和する」というものです。

 

 

規則性のある色の組み合わせは調和する

これはどういうことでしょうか?

これを知るために、以前ご紹介した色相環を思い出してください。

「色相環」とは、色の種類に従って順番に円形に並べたものでした。

この色相環を用いて代表的な調和のとれた色の組み合わせを見てみましょう。

 

 

1.補色(Complementary もしくは Dyad)

これは一つの色と反対側にある色との2色の組み合わせです。

下の画像を見てみましょう。

 

上の画像は一例として紫と黄色の組み合わせです。

紫の背景に黄色がポイントとなり、2色の組み合わせとして調和しています。

 

 

2.アナロジー(Analogy)

これは、隣り合った3色の組み合わせです。似ている色は互いに調和します。

 

 

3.トライアド(Triad)

これは、正三角形を作ったときの頂点にくる3色の組み合わせです。

 

 

4.スプリットコンプリメンタリー(Split-Conmlementary)

これは、基本となる色と、その補色にあたる色の両サイドに位置する色からなる3色の組み合わせです。

 

 

5.テイラード(Tetrad もしくは Square)

これは正四角形を作ったときの頂点にくる4色からなる組み合わせです。言い換えると2つの補色の組み合わせということにもなります。

 

 

上記のものは代表的なものですが、もちろんこれ以外にもあります。

いずれにしても、これらの色の選び方には規則性がありますね。 そして、このように規則性のある色の組み合わせは全体的に調和しているように見え、人に「いい感じ」と思わせるというわけです。

これが、アメリカのジャッドさんという学者の唱えたた理論で、「ジャッドの色彩調和論」と呼ばれます。

 

もっとも、この理論が絶対的に正しいかどうかは分かりませんが、それでも多くの人がこれらの配色を見て、「調和している」と感じるのは事実です。

そのような訳で、Webデザインを行なう際には、これらの理論に基づき色の組み合わせを選ぶなら、全体的に調和がとれていて「いい感じ」にできるというわけです。

 

この「ジャッドの色彩調和論」をご紹介したついでに、彼の唱えたもう一つの理論もご紹介しておきますね。

それは「自然界で見慣れている色の組み合わせは調和する」というものです。

 

 

自然界で見慣れている色の組み合わせは調和する

もっと端的に言うと、わたしたちの周りの自然界の色の組み合わせを、人は「美しい」と感じるということです。

例えば以下の緑の写真を見てください。

この写真を「汚い」と感じる人は世界中どこを探してもいないと思います。多くの人はこの画像から「さわやかさ」や「清らかさ」を感じます。

そして、ここで使用されている色は太陽にあたった時の葉の色と、その陰になっている裏側の葉の色ですね。

 

ではこの写真の色をもう少し分析してみましょう。

Adobeのサービスを用いると、色を分析できるのですが、それが以下の画像です。

ここでは代表的な5つの色の組み合わせが出てきました。

これらの色の組み合わせは全体的に「調和している」と感じませんか?

このように自然界に存在する色の組み合わせをWebデザインを行なう際にも活用できるのです。

 

ではこれまでの部分を少しまとめてみましょう。

 

まとめ

まず、色の組み合わせは

 

1.規則性のある色の組み合わせとする。

2.自然界に存在する色の組み合わせを用いることもできる。

 

でした。

ではこれらの知識をWebデザインを行なう際に、どのように活用できるでしょうか?

次はいよいよ実践編です!!