Webデザインの配色を学ぶ【図解たっぷり】

配色とは「色の組み合わせ」を指します。配色は、サイトのイメージを決めるだけではなく、使い勝手の部分にも影響するものです。

• 配色とは
• トーンとは
• トーンごとの特徴
• トーンを使った配色
• ①同じトーンでの配色
• ②同一色相/異なるトーン
• まとめ

配色とは

配色とは「色の組み合わせ」を指します。配色は、サイトのイメージを決めるだけではなく、使い勝手の部分にも影響するものです。

たとえば「閉じる」という意味のボタンの色が、サイト内でころころ変わっては分かりづらいですよね。また「テキストリンク」は、多くのサイトで青が使われています。

色は瞬時にユーザーに意味を伝えられるという特徴を持っています。このレッスンでは「配色」について詳しく学んでいきましょう。

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

トーンとは

前回、色には3つの属性があることをご紹介しました。
色相（色味）、明度（明るさ）、彩度（鮮やかさ）です。
このうち、明度と彩度が同じグループを「トーン」と呼びます。

PCCS（日本色研配色体系：Practical Color Co-ordinate System）では、縦軸を明度、横軸を彩度としてトーンをグループ分けしています。
以下イメージをみてみましょう。

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

１２グループに分けられていますね。また、トーンの持つイメージも書かれています。
このトーンを元に配色を決めていくと、サイト全体で統一感を出すことが出来ます。

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

トーンごとの特徴

ビビッドトーン

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

ブライトトーン

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

ストロングトーン

ビビッドよりも彩度をやや落とした色相群です。
ビビッドとほぼ同じくインパクトがあり、力強い色の印象を与えますが、彩度が少し落ちることでより自然で馴染みやすい色調となるのが特徴です。

ディープトーン

ビビッドに対して彩度と明度をやや落とした色相群です。
色の鮮やかさを残しながら、少し黒が混ざることで、落ち着いて上品な印象を与えます。秋冬カラー、和を演出するための配色によく用いられます。

ライトトーン

ブライトからさらに彩度を落とし、明度を上げた色相群です。
ソフトで軽い印象があり、爽やかで清潔なイメージ・可愛らしい印象がありますね。女性向け商材にもよく使われ、逆に男性向け商材にはあまり登場しません。

ソフトトーン

ビビッドから彩度のみを落とした色相群です。
優しく穏やかな印象を与えますが、ぼんやりした色味のため扱うのは比較的難しく、失敗すると汚れたような配色になってしまいます。上手に使えば、上品で落ち着いた配色に仕上げることができます。

ダルトーン

ビビッドから彩度と明度を落とした色相群です。
ソフトトーン以上に暗く濁った印象を与えるため、こりたも扱いは難しめ。上手に使うと、大人っぽく落ち着いた、品のある配色になります。

ダークトーン

ビビッドに黒を多く混ぜた色相群です。
ソフトトーンやダルトーンと異なって濁った印象は薄く、色味を感じさせながら、大人っぽく重厚な印象を与えます。

ペールトーン

白に近づけたような淡い色相群です。
透明感があり、優しく女性的な印象を与えることができます。色味が薄く、白と組み合わせた時の視認性もよくないため、背景色や模様など目出させない箇所で使われることが多いです。

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

ペールトーンをやや濁らせたような色相群です。
ペールトーンよりは大人っぽい印象になります。似たような彩度のトーンと組み合わせて上手に使うと、上品な雰囲気を作り出すことができます。

グレイッシュトーン

ライトグレイッシュから更にに明度を落として暗くした色相群です。
ライトグレイッシュよりは色の印象は強く、アースカラーともいわれます。ナチュラルさを売りにしたい場合に利用されることが多いトーンです。

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

明度も彩度も最大限落とした色相群です。
重厚さの表現に適していますが、それぞれの色が持つ個性はほとんどなくなっています。スクリーンの設定によっては、黒とほとんど区別がつかなくなることもあります。

トーンを使った配色

実際のサイトを想定しながら、トーンの考え方を生かした配色を見てみましょう。
なお、例のサイトは実習で作成しているサイトとは別です。

①同じトーンでの配色

トーンが同一の色相で配色を行う方法です。
以下はペールトーンで揃えた例です。

柔らかく優しいイメージのサイトになりそうですね。

では、色相はそのままでトーンを変えるとどうなるでしょうか。

上記はグレイッシュトーンです。
大人っぽく落ち着いた印象になりました。色相が同じでもトーンによって大きく印象が変わりますね。同じトーンに属す色を使用すると、カラフルにしても統一感が出しやすいことも特徴と言えます。

②同一色相/異なるトーン

今度は先ほどの反対で、異なるトーンから選んでみましょう。
以下は、色相は同一でトーンの異なる色の組み合わせ例です。

上図で使用しているのは同じ色相です。トーンを変えることで差をつけています。
この方法だと、色の持つイメージを強く与えることが出来るでしょう。コントラスト感も強く出ます。

まとめ

配色は、サイトのイメージを決めるだけではなく、使い勝手の部分にも影響します。
使用するカラーを絞る・トーンを揃えるなどしてサイト全体の雰囲気を統一しつつ、アクセントになる場所は強めのカラーを使うなどの工夫が必要です。