色相だけを変えることで明るさや鮮やかさに統一感を与える配色です。一番イメージを変えやすい配色技法になります。
色相を動かす
まずは色相だけ動かしてみることにします。明度と彩度は変わりません。サブカラーはあくまでもベースカラーを支える色ですので、ベースカラーに似た色を選ぶことで、最初に選んだ一色を支えるような色を作ります。
すでに色彩について学んだことのある方は、色相だけを動かした時に明度や彩度も同時に変わっていることに気づくかもしれません。しかしHSBの色空間で色を変えるとそのような事は起きてしまうものとしてご了承下さい。どうしても気になる方はご自分の目で確認しながら色を決めるか、デジタル色彩マニュアル（日本色研事業編）のカラーチャートなどを確認するのもよいでしょう。
色相の角度は均等ではない
ここで注意することは隣り合う色同士でHの数値が均等ではないということです。左の表をご覧いただければわかると思いますが、11と12の幅が172-181と9しか幅がないのに対し、8と9の差は41もあったりします。困ったことにHSBの色相の角度は均等ではないのです。
例えばベースカラーのHSB[30:60:80]の色相に対して、HSB[50:60:80]のサブカラーを配色した場合とHSB[120:60:80]とHSB[140:60:80]の場合では見た目の印象が全く異なってしまいます。数値としてはHの差はどちらも20ですが、その色相次第で色の差が大きく出る場合とあまり変わらない場合があります。
一般的に色彩学でいうところの類似色相配色と呼ばれる場合は隣の色相もしくはもう一つ隣の色相との配色をさしますので、例えばベースカラーに赤を選んだ場合は赤紫もしくは橙といった前後の色相を選んで配色するとよいでしょう。対応表の数値の差を見ながら類似した色を見つけると良いでしょう。
サブカラーの方が目立つ場合
このまま隣の色相を選んでしまうと、場合によってはベースカラーよりもサブカラーの方が目立ってしまう場合があります。アクセントカラーは目立たせたりするために使う色なのでよいのですが、サブカラーの方が目立ってしまうと、一生懸命考えたベースカラーの理由付けが崩れてしまうことにもなりかねません。
この場合、サブカラーがベースカラーと同等に見えるか地味になるように色を変えてやると無難な配色になりやすいです。HSBをお使いの方は彩度を下げてやれば明度も上がりますので、サブカラーが相対的に地味になります。
« 隠す
サブカラーを分割することでベースカラーの印象を損なうことなく色を増やすことが出来ます。
サブカラーの分割でカラフルに
ここまでの色彩設計の考え方だと、カラフルな配色にはなり得ないのではないかということにすでにお気づきになられている方もいらっしゃることでしょう。そして3色だけでは配色しきれないとも感じられておられると思います。
色を増やしていく方法はいろいろあるのですが、ここではサブカラーを分割する方法を使います。ここまでの段階でサブカラーはベースカラーよりも地味に作られているはずですし、調和もしているはずです。上手くサブカラーが出来ていれば違和感なく分けられるはずです。
サブカラーの分割例1
両方とも同じ色を使ったサンプルです。ベースカラーの明度と彩度を少し動かしたHSB[30:40:60]のサブカラーを最初に作り、それを分割して色相を動かしたHSB[90:40:60]の緑を作り、それに明度と彩度を動かしたHSB［90:20:70]を加えております。アクセントカラーはベースカラーの色相だけを大きく動かしたHSB[220:60:80]の紺色を用いております。
ベースカラーであるHSB[30:60:80]に明度と彩度を動かしたHSB[30:40:60]のサブカラーを加えました。アクセントは色相と明度を動かして作ったHSB[0:35:60]を使っております。これらは左右のサンプルで共通している色です。左のサンプルでは出来上がった3色をそのまま配置しております。
次に右のサンプルですが、配色にやや動きを付けるためにサブカラーを4分割しております。サブカラーの色相は左の青から30、47、90、144となっております。この数値は目で確認しながら適当に動かしておりますが、明度と彩度があまり変化していないので、同じような印象の５色が出来上がっていると思います。
サブカラーのうちの3色をボタンの色として配置いたしました。残った緑を見出しとして用いております。
これによって使用している色は増えておりますが、ベースカラーの面積は変えておりませんので、その印象は損なわれていません。
サブカラーの分割例2
こちらは左右で違う配色サンプルをご用意しました。
まず左のサンプルですが、ベースカラーであるHSB[200:15:100]に明度と彩度を動かしたHSB[205:10:98]のサブカラーを加えました。アクセントは色相と明度を動かして作ったHSB[0:35:60]を使っております。
サブカラーを分割し、少し動きを付けるために色相だけを大きめに動かしたHSB[70:15:98]を作り、そのままメニューの部分に使っております。ここではテキストでのリンクを想定しておりますが、このリンクの背景の色をそのままボタンの色に使うことも可能です。
次に右のサンプルですが、少し落ちついた和の雰囲気を出すためにHSB[50:20:100]の明るいベージュをベースカラーに持ってきました。サブカラーにはHSB[90:20:80]を最初に決定いたしました。サブカラーを分割して2色追加しております。これは看板部分にそのままの面積と形で用いております。アクセントはベースカラーの明度と彩度だけを動かしたHSB[50:80:90]を選びました。他の色が全て明るい色なので、十分にアクセントとして目を引くと思います。
カラフルになった印象を受けると思いますが、ベースカラーのベージュの印象は損なわれていないはずです。これは面積比を維持したことによります。
« 隠す
色の三属性のうち2つを動かし、少し動きを付けた配色を考えます。
２つの属性は慎重に動かす
色の三属性のうち２つを同時に動かすとなると、一つずつ動かした場合に比べて動きのある配色が可能になります。
ここまでの配色は類似性の原理に基づいてるので、似た色での配色が前提になっておりますが、両方とも大きく動かしてしまうと似た色でなくなる可能性もありますので、動かす量を計算して色の決定を行います。
特に色相を大きく動かしてしまうと動きは出ますが、統一感に欠ける配色になりかねません。黄色がベースカラーであるならば、その両隣の色相である橙、黄緑くらいまでの範囲で移動を抑え、明度もしくは彩度を大きめに動かすようにしましょう。
色相と明度を変えたサブカラー
まずは統一感を出すことが肝要ですので、配色に自信がなければ色相は大きく動かさないようにします。統一感を出すためには同系色でまとめる配色の基本に忠実に。
色相と彩度を変えたサブカラー
また軽い、重いなどのイメージは明度に依存します。軽いイメージが必要な場合はサブカラーを高明度にし、重いイメージが必要な場合では低明度で統一し、色相と彩度でイメージを調整します。
明度と彩度を変えたサブカラー
この例ではあまり数値を変えておりませんが、色相による統一感は崩れにくいので、もっと大きく数値を動かしても大丈夫です。
« 隠す
彩度を下げていくと無彩色に近くなっていきます。派手・地味感を調整するのに便利です。
彩度と色のイメージ
高彩度になると派手になったような印象を生みだします。彩度を考えるにあたっては、以前に決めていた「女性向きで柔らかい感じの配色」などの言葉のイメージを思い出しましょう。もちろん子供向けの楽しい配色を想定するならベースカラーとサブカラーの両方の彩度を高めにすることも必要です。
サブカラーの方を低彩度に
彩度を動かす場合は特に注意が必要となります。サブカラーの方に彩度の高い色を持ってくると目立ってしまうと、ベースカラーとの力関係が逆転してしまうことになりかねません。
一番上のサンプルをご覧いただければおわかりになるかと思いますが、高彩度かつ高明度の色はまぶしく見えたりして目が痛くなるような印象を受けてしまう場合があります。ベースカラーに用いられた穏やかな草色のイメージが損なわれてしまいます。
このように彩度だけを動かす場合にはサブカラーに地味な色を持ってきた方が配色としてはしっくり来やすくなります。目立たせる部分にはアクセントカラーを用いることが出来ますので、サブカラーの彩度には十分に注意しましょう。
ただし一番下の例のようにベースカラーとサブカラーの彩度がともに60以下だとそれほど印象は損なわれません。ベースカラーの彩度が低い場合には全体が地味で陰鬱な感じにならないように、サブカラーの彩度を上げる必要も出てきますので、柔軟に対応しましょう。
« 隠す
ベースカラーの明度だけを変えてサブカラーを作ります。視認性（見やすさ）・可読性（読みやすさ）は明度の差によって決まりますので、非常に重要な項目です。
メリハリのある配色に
印象を変えずにコントラストを付けたい時には明度を変えるのが一番簡単です。どうもぼんやりしていると感じる時は少し明度差を多めに付けるとメリハリのある配色になります。しかし色相と彩度は同じですので、統一感は損なわれません。
可読性は明度差によって決まる
明度に差を付けると言うことは可読性（読みやすさ）を考える上では非常に重要なことです。背景によっては会社やお店の名前やロゴが見えにくくなったりします。
2色間の境目がぼんやりして見える場合は、この2色を背景色と文字色にすると読みにくくなるいうことになります。
« 隠す
色彩のイメージは面積によって大きく変わります。その面積比についてご説明いたします。
ベースカラーを中心に配色
メインの１色をベースカラーと呼んでおりますが、インテリア等のカラーでよく使われるのがベースカラー、サブカラー、アクセントカラーという考え方で、その面積の比率を考えて配色を行うという手法です。この手法はウェブサイトの配色でも非常に有効です。
- ベースカラー 70%
- サブカラー 25%
- アクセントカラー 5%
この割合で配色すると調和しやすいのですが、あまり細かい数字にはこだわらなくて良いでしょう。ただし先程決めたベースカラーの割合が減ってきて、他の色が目立ちすぎるようなら注意しましょう。ベースカラーがきっちりと定まっていれば、サブカラーとアクセントカラーを選ぶことはそれほど難しいことではありません。
面積比に従って並べる
色彩を考える時には色をこのように面積比に従って並べていきましょう。大事なことは面積比を重視して適当に色を塗らないということです。同じ２色を使っていても、面積比が変われば印象が全く変わって見えてしまいます。逆の言い方をすれば面積比を守っていけば、イメージがぶれにくくなります。あとで困らないように必ず守るようにしてください。
例では同じ色相と彩度で明度だけ変えた２色を並べていますが、これを入れ替えるだけでも皆さんの受ける印象が違う物になることと思います。
実際に配色を行う時には２色を分離して使うことも多いと思いますが、距離を置かずに並べることは隣り合った色が調和するかどうかを考えるのに有効です。
ご自分で配色を行う時には下の画像のようなものを作り、それに彩色をしていくと面積比もわかりやすいでしょう。
« 隠す
▲このページの先頭に戻る
