Webデザインでも役立つ、色相とトーンを使った配色方法

色は、サイトのイメージを決めるだけではなく、瞬時にユーザーに意味を伝えられるという特徴を持っています。

つまり、色の組み合わせ＝配色はWebサイトのUI・使い勝手の良さをデザインするうえでも重要な項目。Webサイトの装飾的なデザインや、雰囲気作りにももちろん大切です。
今回はそんな「配色」の基礎を紹介します。

• トーンとは
• トーンの種類・与える印象
• 1.ビビッドトーン
• 2.ブライトトーン
• 3.ストロングトーン
• 4.ディープトーン
• 5.ライトトーン
• 6.ソフトトーン
• 6.ダルトーン
• 7.ダークトーン
• 8.ペールトーン
• 9.ライトグレイッシュトーン
• 11.ダークグレイッシュトーン
• トーンを使った配色
• 同じトーンを使った配色
• 同一色相/異なるトーンの配色
• まとめ

トーンとは

色は下記3つの性質を持っています。

• 色相（色味）
• 明度（色の明るさ）
• 彩度（色の鮮やかさ）

このうち、明度と彩度が同じグループを「トーン」と呼びます。
PCCS（日本色研配色体系：Practical Color Co-ordinate System）では、縦軸を明度、横軸を彩度としてトーンをグループ分けしています。

http://www.dic-color.com/knowledge/pccs.html

上のPCCSトーンマップでは、12のグループが作られています。
このトーンを元に配色を決めていくと、サイト全体で統一感を出すことが出来ます。

もう少し詳しく、各トーンの特徴を見てみましょう。

トーンの種類・与える印象

1.ビビッドトーン

ビビッドトーンは、彩度が最も高い色相群です。

鮮やかで活き活きとした印象があり、目に付きやすいためロゴマークにもよく使われます。半面、無計画に色を組み合わせると安っぽい印象になることもあります。

2.ブライトトーン

ブライトトーンはビビッドよりやや明度を高く、彩度を下げた色相群です。

明るく健康的なイメージ、力ジュアルでポップなイメージがありますね。スポーツウェアのデザインや、女性・子どもをターゲットにデザインなどにもよく使われます。

3.ストロングトーン

ストロングトーンは、ビビッドよりも彩度を少し下げた色相群です。

ストロングという呼び名の通り、力強い色の印象を与えます。
ビビッドとほぼ同じくインパクトがある糸ですが、彩度が少し落ちることでより自然で馴染みやすい色調となるのが特徴です。

4.ディープトーン

ディープトーンは、ビビッドによりも彩度と明度をやや落とした色相群です。

色の鮮やかさを残しつつ、少し黒が混ざることで、落ち着いて上品な印象を与えます。秋や冬を表現するのによく使われるカラーでもあります。
また、和を演出する和風の配色にも用いられます。

5.ライトトーン

ライトトーンは、ブライトトーンからさらに彩度を落とし、明度を上げた色相群です。

鮮やか色という印象もありつつ、ソフトで軽い色味です。
爽やかで清潔なイメージ・可愛らしい印象がありますね。
女性向け商材にもよく使われます。

6.ソフトトーン

ビビッドから、彩度のみを落とした色相群です。

優しく穏やかな印象を与えるので、上手に使えば、上品で落ち着いた配色に仕上げることができます。

ただし、ぼんやりした色味のため難易度は高め。
失敗すると全体的にくすんだ印象になり、ネガティブなイメージを持たれてしまう可能性があるため注意が必要です。

6.ダルトーン

ダルトーンは、ビビッドから彩度と明度を落とした色相群です。

落ち着いた色は、渋い和風や“秋”の表現にも使われます。
暗めで濁った色のため、配色に使用する際は汚く見えないように注意が必要。上手に使うと、大人っぽく品のあるイメージを与えられるでしょう。

7.ダークトーン

ダークトーンは、ビビッドに黒を多く混ぜた色相群です。

ソフトトーンやダルトーンとは異なり、濁ったという印象は薄め。
大人っぽい印象があります。

後記のダークグレイッシュトーンよりも色味がハッキリと分かるので、重みのあるデザインによく使われています。

8.ペールトーン

ペールトーンは、ビビッドトーンに白い絵の具を混ぜたような淡い色相群です。

透明感や柔らかさが強く、優しく女性的な印象を与えることができます。

ペールトーンは色味が薄く、白と組み合わせた時の視認性もよくありません。
モニターによってはほぼ見えないこともあるため、Webサイトでは背景色や模様など目立たせない箇所で使うことも多いです。

9.ライトグレイッシュトーン

ライトグレイッシュトーンは、ペールトーンをやや濁らせたような色相群です。

ピュアさを押し出すペールトーンよりも、大人っぽい印象になります。
似たような彩度のトーンと組み合わせて上手に使うと、上品な雰囲気を作り出すことができるでしょう。

10.グレイッシュトーン

グレイッシュトーンは、ライトグレイッシュから更に明度を落とした色相群。アースカラーともいわれます。

ライトグレイッシュより色味を強く感じられますが、しっとりと落ち着いた印象を与えます。他の色と馴染みやすいことも特徴。「ナチュラル」「大人可愛い」などを売りにしたい場合に利用されることが多いです。

11.ダークグレイッシュトーン

ダークグレイッシュトーンは、明度も彩度も最大限落とした色相群です。

重厚さの表現に適していますが、それぞれの色が持つ個性はほとんどなくなっています。見る環境によっては、黒とほとんど区別がつかなくなることもあるでしょう。

ヘアメイクやアパレルでは光の当たり具合で色の差を見せるような、同一トーンでの配色もあります。ただ、Webサイトのデザインでは、モニターによって見えにくくなる可能性を考える必要があるでしょう。

トーンを使った配色

実際のWebサイトを想定しながら、トーンの考え方を生かした配色を見てみましょう。

同じトーンを使った配色

同一トーンで、色相を変えて配色を行う方法です。

以下はペールトーンで揃えた例です。
柔らかく優しいイメージのサイトになりそうですね。

では、色相はそのままでトーンを変えるとどうなるでしょう。
グレイッシュトーンに変更してみます。

大人っぽく落ち着いた印象になりました。

色相が同じでもトーンによって大きく印象が変わりますね。
同じトーンに属す色を使用すると、カラフルにしても統一感が出しやすいことも特徴と言えます。

同一色相/異なるトーンの配色

今度は先ほどの反対。
色相は同一で、トーンの異なる色の組み合わせを見てみましょう。

下図は、全て同じ色相を使っています。

トーンを変えることで差をつける方法では、色の持つイメージを強く与えることが出来ることがわかります。

ペールトーンやライトグレイッシュトーンで、同一トーン配色を行っても、色によるコントラスト感は出ません。同一色相でトーンを変える場合は、明るい色・暗い色とコントラスト感も出しやすくなります。

まとめ

簡単な例でしたが、色相とトーンを意識するだけでハズレない配色になっていたかと思います。良くも悪くも安定するんですね。

色相やトーンを統一しない配色のデザインもありますが、色の組み合わせを間違うと、サイトが見にくくなってしまう危険も。
配色に悩んでいる・違和感があるるときは、同一色相や同一トーンの配色を取り入れてみると落ち着くでしょう。