今までに決めた3色がイメージと本当に合うかを考えて、微調整を行います。
作りたいイメージに色彩を調整する
ここまで様々なことを考えて、カラーコーディネートの基本とも言える3色を面積を考えながら決定しました。しかしそのイメージが自分が表現したかったイメージと一致するのかは別の問題です。
そこで色彩の調整が必要になってまいりますが、ここではベースカラー、サブカラー、アクセントカラーを同時に動かすことにします。これはトーンの考え方が基本になっています。調和するように色彩設計を行ってきたので、それをそのまま移動させるというわけです。
このような配色が出来上がったとして、もし自分が考えていたよりも軽い配色だなと感じるようなことがあれば、全体的に明度を下げてやることによって、重いイメージを出すようにします。
この時に注意することはあまり大きな変化をさせずに微調整を行うと言うことです。大きな変化が必要な場合はベースカラーを決定する段階ですでに問題がある場合が多いので、ベースカラーから見直すことにしましょう。
また彩度を動かすことで派手・地味感を変えることも出来ます。これも地味な場合は全体の彩度を動かしてあげましょう。
色相を変えたい場合
色相を変えたい場合も3色の色相を動かしますが、色相によっては色合いが大きく変わってしまうことがあります。均一の数値で動かすと著しく印象が変わる場合もありますので、対応表を見ながら慎重に色相を変えていきましょう。
数値が100以上になる場合
彩度や明度を上げようとした時に、これ以上上がらないという場合も出てくると思います。このような場合は上げられる部分だけ上げることで問題はありません。全体のイメージを考えながら、少しずつ動かしましょう。
« 隠す
色の三属性のうち2つを動かし、少し動きを付けた配色を考えます。
２つの属性は慎重に動かす
色の三属性のうち２つを同時に動かすとなると、一つずつ動かした場合に比べて動きのある配色が可能になります。
ここまでの配色は類似性の原理に基づいてるので、似た色での配色が前提になっておりますが、両方とも大きく動かしてしまうと似た色でなくなる可能性もありますので、動かす量を計算して色の決定を行います。
特に色相を大きく動かしてしまうと動きは出ますが、統一感に欠ける配色になりかねません。黄色がベースカラーであるならば、その両隣の色相である橙、黄緑くらいまでの範囲で移動を抑え、明度もしくは彩度を大きめに動かすようにしましょう。
色相と明度を変えたサブカラー
まずは統一感を出すことが肝要ですので、配色に自信がなければ色相は大きく動かさないようにします。統一感を出すためには同系色でまとめる配色の基本に忠実に。
色相と彩度を変えたサブカラー
また軽い、重いなどのイメージは明度に依存します。軽いイメージが必要な場合はサブカラーを高明度にし、重いイメージが必要な場合では低明度で統一し、色相と彩度でイメージを調整します。
明度と彩度を変えたサブカラー
この例ではあまり数値を変えておりませんが、色相による統一感は崩れにくいので、もっと大きく数値を動かしても大丈夫です。
« 隠す
彩度を下げていくと無彩色に近くなっていきます。派手・地味感を調整するのに便利です。
彩度と色のイメージ
高彩度になると派手になったような印象を生みだします。彩度を考えるにあたっては、以前に決めていた「女性向きで柔らかい感じの配色」などの言葉のイメージを思い出しましょう。もちろん子供向けの楽しい配色を想定するならベースカラーとサブカラーの両方の彩度を高めにすることも必要です。
サブカラーの方を低彩度に
彩度を動かす場合は特に注意が必要となります。サブカラーの方に彩度の高い色を持ってくると目立ってしまうと、ベースカラーとの力関係が逆転してしまうことになりかねません。
一番上のサンプルをご覧いただければおわかりになるかと思いますが、高彩度かつ高明度の色はまぶしく見えたりして目が痛くなるような印象を受けてしまう場合があります。ベースカラーに用いられた穏やかな草色のイメージが損なわれてしまいます。
このように彩度だけを動かす場合にはサブカラーに地味な色を持ってきた方が配色としてはしっくり来やすくなります。目立たせる部分にはアクセントカラーを用いることが出来ますので、サブカラーの彩度には十分に注意しましょう。
ただし一番下の例のようにベースカラーとサブカラーの彩度がともに60以下だとそれほど印象は損なわれません。ベースカラーの彩度が低い場合には全体が地味で陰鬱な感じにならないように、サブカラーの彩度を上げる必要も出てきますので、柔軟に対応しましょう。
« 隠す
色相ごとに明度と彩度を比較して、用いられている色を客観的に分析します。
明度と彩度を分析から空いている色を探す
「色相を分析する」のページで、伝えたいイメージや競合サイトの色相を見ることによって、ある程度は使うべき色相が見えてきたことと思います。
他の競合サイトと違う色にしたいという場合は明度と彩度も調べて、次の表にプロットし、空いている位置を見つけるという方法もあります。
ただしこの方法で検討する場合は明度が下がりすぎると色相や彩度に関わらず、同じような暗い色に見えてしまいますし、彩度が高すぎると大きな面積で色を使った場合にはまぶしく見えてしまいます。
明度・彩度調査シート（PDF形式：約270kB）
「基礎からわかるホームページ」の場合
ありきたりでない色という条件から、青緑色の明度・彩度を比較検討しました。明度・彩度を下げると緑とあまり変わらないように見えてしまうので、他のサイトで使われてる青緑よりも明度、彩度ともかなり高い１色を選定しました。選んだ青緑（H:177
S:66 B:81）はそのまま使うとかなりまぶしい色ですので、小面積での使用が前提となります。（2010年1月現在リニューアル済み）
このサイトはイメージも大切ですが、文章をきちんと読んで理解していただき、実践してもらうことを目的としておりますので、小面積でも十分な効果が出て、目的を達成していると思います。
« 隠す
彩度の高低によって色は派手に見えたり地味に見えたりします。
派手・地味感は彩度で
色が派手であるか地味であるかを決めるのは一般的には彩度の役割です。彩度が高ければ派手な感じになり、低ければ地味になります。
ただしHSBで表現する場合には、Sを低くするだけでも地味になりますが、SとBの両方を低くすれば、より地味に見えることを覚えておけばよいでしょう。
« 隠す
トーンの概念を知れば配色が格段に行いやすくなります。
トーンとは明度と彩度の複合概念
※今までに色彩を学習したことのある方でPCCS（日本色研配色体系）やCCIC（商工会議所カラーコーディネーションチャート）のトーン表をお持ちの方は、このページに掲載しているトーン表は見ずに、そちらの方をご覧下さい。PCCSのトーン表の掲載は著作権の侵害となりますので、このウェブサイトでは独自でHSBを使ったトーン表を作成したことをご了承の上下さい。
トーンとは日本語で色調のことで、明度と彩度を複合した概念です。まずは下のトーン表をご覧下さい。同じトーン同士で配色をまとめると明度、彩度が近い色が集まるため、調和しやすくなります。
HSBを使い、SとBを変えずにHだけを動かせばトーンが出来ます。ここでは便宜上、彩度の段階を4つに分けておりますが、他の数値でも全く問題はありません。ご自分のイメージに近いトーンを作り出してから配色を考える方法もありますので、一度トーンの作成をお試し下さい。
明度、彩度が100のトーン
明度と彩度が共に100の場合は原色となります。派手なイメージが表現できますが、このまま使用して配色するとまぶしくて目が疲れる配色となる可能性がありますので、なるべく使わないようにすると、妙に華美でうさんくさい配色から一歩遠ざかることが出来ます。
« 隠す
色の鮮やかさを表します。派手・地味感を表現するのに使いやすい属性です。
彩度とは
彩度とは色の鮮やかさを表す属性です。彩度も明度と同じように「高い」「低い」でその度合いを表します。彩度が最も高い色は鮮やかな原色となり、彩度が低くなるにつれてくすんだ色みを感じない色に変化し、最後には無彩色になります。
彩度が高い色は派手な印象を受け、彩度の低い色は地味に感じます。
« 隠す
▲このページの先頭に戻る
