2013/07/08

カラー配色で迷わない！シーン別配色見本32パターン

ホームページを作るとき、配色に悩まされることはありませんか？

配色を変えるだけで全く違った印象になる程、カラー配色はwebデザインには欠かせない要素です。
今回は配色の基礎からシーン別のカラーパターンのご紹介まで、配色について解説して行きたいと思います。

■配色の基礎

まずは「色の三属性」である色相・明度・彩度についてまとめていきます。

web制作に携わっている方はよく耳にする単語だと思いますが、はっきりと違いを説明できる方も少ないのではないでしょうか。
それぞれの知識と違いを知っておくとカラー配色を考える時の手助けになります。

色相

色相とは、赤、黄、緑などの色の様相の違いのことを指します。

色相環図

色相は上記の図のように、環状に赤、黄、緑、青、紫などの色が配置された色相環で表すことができます。

色相環図で中心を通り、反対側に配置されている色を『補色』といいます。
『補色』は色相環図の中で最も性質の異なる色相で、この２色の組み合わせはお互いの色を引き立てる性質があります。

『暖色』と『寒色』という言葉はよく聞いたことがあるのではないでしょうか。
赤やオレンジ色を中心とする赤系統の色を『暖色』、青や青紫などの青系統の色を『寒色』と言います。

また、『暖色』は進出色、寒色は『後退色』とも呼ばれ、暖色は寒色に比べて主張が強く感じられます。

こういった色の分類や特性は、『暖かみ』や『寒さ』、『男性』や『女性』などの具体的なイメージを色で表現したいときに意識することも多いと思います。
それぞれの特徴をよく理解して配色を設計することで、デザインに説得力を持たせることができるはずです。

明度

明度は、明るさの度合いを表す属性のことです。

明度の最も高い色は『白』、最も低い色は『黒』にあたり、赤や青などの有彩色の明度はこの間にあります。
『色相』と『彩度』は有彩色にしかない性質ですが、『明度』は無彩色（白、灰色、黒）を含むすべての色にある性質です。

配色を考える上で『明度』は非常に重要で、見え方に大きく影響を及ぼします。
コントラストの差を強調することもでき、文字情報やグラフィックなどの見え方や重要度を調整することができます。

明度表

コントラスト差

隣り合う色相の明度差が大きい（コントラスト差が大きい）とその差が強調されます。
図のように明度差が大きいと強調され、明度差が小さいと弱く見えます。

彩度

彩度は色の強さの度合いを表す属性のことで、『色相』の性質の強い色が、彩度の強い色となります。
わかりやすく言うと鮮やかさの度合いを表す属性です。彩度が低くなると無彩色に近づいていきます。

『色相』と『明度』に関しては見た目で違いがわかりやすいのですが、『彩度』は他の属性と比べて識別することが難しいです。同じ『色相』であれば彩度の違いを見極めることは比較的容易ですが、『色相』が異なる場合には色を扱い慣れている人でも違いが見極めづらいと言われています。

明度表

■シーン別配色見本32パターン

カラー配色のパターンをシーン別・カテゴリ別に32パターンご紹介します。

01.ポップで楽しいイメージ

#de9610

#c93a40

#fff001

#d06d8c

#65ace4

#a0c238

#56a764

#d16b16

#cc528b

#9460a0

#f2cf01

#0074bf

02.キュートでかわいいイメージ

#e2b2c0

#fff353

#a5d1f4

#e4ad6d

#d685b0

#dbe159

#7fc2ef

#c4a6ca

#eabf4c

#f9e697

#b3d3ac

#eac7cd

03.ダイナミックで目を引くイメージ

#b80117

#222584

#00904a

#edc600

#261e1c

#6d1782

#8f253b

#a0c238

#d16b16

#0168b3

#b88b26

#c30068

04.ゴージャスで高級感があるイメージ

#7d0f80

#b08829

#a03c44

#018a9a

#ab045c

#391d2b

#d5a417

#546474

#0f5ca0

#d0b98d

#d4c91f

#c1541c

05.カジュアルで親しみやすいイメージ

#7b9ad0

#f8e352

#c8d627

#d5848b

#e5ab47

#e1cea3

#51a1a2

#b1d7e4

#66b7ec

#c08e47

#ae8dbc

#c3cfa9

06.サイケデリックなイメージ

#b7007c

#009b85

#382284

#e2c80f

#009dc6

#c4c829

#95007e

#d685b0

#eee800

#bf5116

#b80e3b

#0178bc

07.明るく伸びやかなイメージ

#fff001

#cb5393

#a0c238

#d78114

#00a5e7

#cd5638

#0168b3

#d685b0

#00984b

#f2cf01

#6bb6bb

#a563a0

08.メルヘンなイメージ

#cca9ca

#9bcad0

#dd9dbf

#edef9c

#aabade

#f2dae8

#c7ddae

#a199c8

#faede5

#d5a87f

#f7f06e

#95bfe7

09.重厚でどっしりしたイメージ

#000000

#998c69

#5c002f

#244765

#814523

#5e2a58

#1a653c

#6a6a68

#bf7220

#5f556e

#84762f

#872226

10.刺激的でインパクトの強いイメージ

#c60019

#fff001

#1d4293

#00984b

#019fe6

#c2007b

#261e1c

#7d0f80

#dc9610

#dbdf19

#d685b0

#a0c238

11.ストリートのイメージ

#33476a

#211917

#6c7822

#c2007b

#44aeea

#5e3032

#d16b16

#c8d627

#9193a0

#816945

#c50030

#0080c9

12.涼しげで透明感のあるイメージ

#b0d7f4

#c0cbe9

#eef0b1

#44aeea

#85beab

#c4a6ca

#f7f06e

#c8d627

#bcccd9

#e4f0fc

#f2dae8

#6490cd

13.エレガントで優雅なイメージ

#ae8dbc

#e3b3cd

#d6ddf0

#e5d57d

#82c0cd

#afc7a7

#834e62

#6a9176

#7f7eb8

#a04e90

#dbbc86

#c4c829

14.フレッシュでジューシーなイメージ

#70b062

#c8d85b

#f8e133

#dbdf19

#e3ab30

#dd9dbf

#a979ad

#cd5638

#399548

#6bb6bb

#f7f39c

#9acce3

15.ぬくもりを感じるイメージ

#c59f22

#dd9b9d

#ebcc00

#d6d11d

#8d4f42

#d8836e

#f8e469

#cbb586

#e4aa01

#eac287

#f2d8bf

#a6658d

16.癒しを感じる柔らかなイメージ

#f8e469

#e7e0aa

#d9de84

#e4bd60

#9ac29f

#e3be87

#edef9c

#dd9b9d

#b2d6d4

#f5dfa6

#ebeddf

#e1d4e6

17.大人の男性を感じさせるイメージ

#23466e

#4d639f

#dfe0d8

#1d695f

#9aadbe

#844f30

#934e61

#7e9895

#77aad7

#848a96

#a76535

#7e8639

18.大人の女性を感じさせるイメージ

#7b0050

#a8006d

#bea620

#a26c54

#949b34

#614983

#cba777

#de9610

#bd8683

#be87a6

#bf5346

#e1d0b4

19.若い男性を感じさせるイメージ

#0168b3

#66b7ec

#afd0ef

#88b83e

#b8b2d6

#6bb6bb

#5e4694

#f2cf01

#c6e2f8

#d5dbcf

#7a8bc3

#e8e6f3

20.若い女性を感じさせるイメージ

#d06da3

#c2d3ed

#be91bc

#c73576

#f8e352

#c8d627

#e3b3cd

#c6e0d5

#e4ab5a

#cb6c58

#845d9e

#82c0cd

21.品のある知的なイメージ

#4d639f

#356c92

#c9ced1

#dfd4be

#92a1a6

#a67b2d

#bda5bb

#2c4b79

#d6d680

#babea5

#ebc175

#3a614f

22.さわやかで軽やかなイメージ

#44aeea

#b4cb32

#b2b6db

#b2d6d4

#ebe9ae

#0080c9

#71b174

#e4c4db

#7da8db

#eac39a

#dbe585

#6db5a9

23.都会的でスタイリッシュなイメージ

#58656e

#bac1c7

#487ca3

#dfd4be

#004679

#c0542d

#a44682

#9599b2

#d6d680

#8eb4d9

#6c5776

#499475

24.ナチュラルで落ち着いたイメージ

#ba9648

#87643e

#c2b5d1

#ba7d8c

#b8ac60

#797c85

#f9ebd1

#9cb1c2

#81a47a

#acb130

#8b342a

#acae98

25.春のイメージ

#dd9cb4

#eeea55

#ebc061

#b2d6d4

#f2dae8

#c9d744

#b8b2d6

#afd0ef

#d7847e

#f8e352

#b3ce5b

#cbacbe

26.夏のイメージ

#174e9e

#68b8dd

#d16b16

#88b83e

#f2cf01

#019fe6

#c60019

#019c96

#b0d7f4

#fff001

#0074bf

#c83955

27.秋のイメージ

#ae3c22

#902342

#c59f22

#7e8639

#eabd00

#a49e2e

#ac5238

#9f832f

#ba7c6f

#875f3b

#bba929

#786b4b

28.冬のイメージ

#a5aad4

#6591b6

#623d82

#5f897b

#858aa0

#eff3f6

#c2d3dd

#4f616f

#7f7073

#42629f

#674c51

#b38da4

29.モダンな和のイメージ

#c3003a

#3a546b

#d5a02e

#918d43

#787cac

#604439

#6f2757

#c1541c

#565d63

#afc9ca

#baaa52

#e2b2c0

30.ヨーロピアンなイメージ

#bf541c

#25a4b7

#e4aa01

#b2bfe1

#ad438e

#1d4293

#b71232

#e8e2be

#b0bf30

#6aa43e

#6276b5

#d7832d

31.北欧のイメージ

#149bdf

#dbdf19

#c97a2b

#945141

#9abca4

#a5a79a

#e6d9b9

#eabd00

#bf545e

#86b070

#665e51

#b59a4d

32.エスニックなイメージ

#946761

#b80040

#4eacb8

#7f1f69

#c8b568

#147472

#1d518b

#b1623b

#95a578

#b9b327

#af508a

#dab100

■色彩検定の紹介

カラー配色を本格的に学びたいと考えている方には色彩検定というものがあります。

色彩検定

1990年から行われている色彩検定は、1994年にはその内容が生涯学習の一環として評価され、1995年度より文部科学省認定、2006年度からは同省後援の『技能検定』となりました。

受験資格

小学生からお年寄りまで誰でも受験することができます。

級

3級・2級・1級の3種類。どの級からでも受験可能です。
各級の出題例はこちら→http://www.aft.or.jp/what/what_03.htm

検定料

3級：7,000円
2級：10,000円
1級・15,000円

実施時期

夏期（6月）と冬期（11月）の年2回
※1級は冬期のみの実施です。

今の自分の色に関する知識・技能を計る尺度として、また色に関する職に就いてみたいと考えている方は一度受けてみてはいかがでしょうか。
色彩検定協会ホームページ

まとめ

今回の記事では基本的な知識とパターンをご紹介しましたが、この知識を理解した上で、たくさんのwebサイトを見て、たくさんのwebサイトを作っていくことで、ベストな配色を見極める目が培われます。
デザインの表現力も可能性も広げることができますので、今までカラー配色に関して後回しにしていた方はこの機会に意識して配色を見るようにしてみるのはどうでしょう。