通常、配色サンプルは3色程度で展開されておりますが、そのうち2色を選び出すことが出来れば、色彩設計は非常に楽になります。
自分で配色サンプルをアレンジする
ここでは一つの例だけを取り上げましたが、このような配色サンプルは元々印刷用に作られたものが多く、それをモニターで見た場合、大きな面積で表示した場合にどのように映るかということについては考慮されていない場合が多いように思います。
そのままで使える色も多く含まれていることは事実ですが、中には明度、彩度がともに100%近く、そのまま使ってしまうとまぶしくて使用に耐えないような色やイメージに合わないような色、読むのに苦労する色などが混ざっている可能性は非常に高いものとなっております。このような場合には使えない色は捨てるなり変更するなどして、自分のウェブサイトで使うことの出来る配色にアレンジしていくことが必要です。
配色サンプルは2色だけ使う
配色サンプルの利用法のページで見ていただいたサンプルのように、サンプルの3色ともが無条件で自分のサイトに使えるとは限りませんので注意が必要です。このような場合については、自分が使いたいベースカラーを決定して、あらかじめ考えていたイメージに近いと思われる色をサブカラーとする2色を決め、3色目については自分で選んだ方が、より自分が考えるイメージに近づきます。
またどうしてもイメージに合わない場合や色がおかしいと思える場合には、色彩設計まで戻って、ベースカラーとサブカラーの関係などを見直していくことにします。面積比から考えると、この2色を入れ替えるだけでも大きくイメージが入れ替わります。
« 隠す
書店などで入手できる配色サンプルは非常に便利な物ですが、そのままでは使えないことが多々あります。
配色サンプルが全て正しいわけではない
書店に行けば様々な種類のカラーチャートといった本を手に入れることが出来ます。その中には様々な配色サンプルが掲載されており、イメージしやすい形容詞などから3つの色を辞書のように取り出せたりするようなものなどがあります。特に最近の物はありがたいことにRGB値も掲載されているので、そのまま使うことが出来るのが特徴です。
そこでとある本に載っていたサンプルを使って配色を行ってみました。「フレッシュ」というページに載っていた配色サンプルです。面積比は出来るだけ維持することにして、サンプル1と2を作ってみましたが、どうも黄色が暑苦しくてフレッシュな配色とは思われません。
そこで面積比を調整してみたのが、サンプル3と4です。サンプル3の方は黄色をアクセントカラーに持ってきましたが、それでも暑苦しくてフレッシュではないような気がします。4の方はなんだかゆるい印象になってしまいました。
そこで思い切って邪魔をしていた黄色の明度を上げてみたサンプルが5と6ですると、少しはフレッシュなイメージに近づいたかと思われます。
あとは使うべき部分を考え直したり、全体の面積を調節するなどして理想のイメージに近づけていくようにしましょう。
« 隠す
アクセントカラーを分割して、色を増やす方法です。
サブカラーと同じ方法で分割する
アクセントカラーもサブカラーと同じように分割することが出来ます。最初に決めていたアクセントカラーと似た色を選ぶようにしましょう。大きく動かしてしまうと、サブカラーやベースカラーに似てきてしまうので、アクセントカラーとしての機能を損なうことになります。
元々使われる面積が小さいアクセントカラーをさらに細かくするということで、使い方によっては逆に目立たなくなってしまう場合もあります。アクセントカラーを分割するのは2色くらいまでにしておくのがよいでしょう。
アクセントカラーの分割サンプル
サンプルはサブカラーの分割のページで使った物を使います。左右ともアクセントカラーを2分割して、明度が低い方の色を見出しに使ってみました。アクセントは目立たせるための色ですので、小面積でワンポイントで使用することを考えた方が、全体のイメージを損ないません。
« 隠す
サブカラーを分割することでベースカラーの印象を損なうことなく色を増やすことが出来ます。
サブカラーの分割でカラフルに
ここまでの色彩設計の考え方だと、カラフルな配色にはなり得ないのではないかということにすでにお気づきになられている方もいらっしゃることでしょう。そして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]を選びました。他の色が全て明るい色なので、十分にアクセントとして目を引くと思います。
カラフルになった印象を受けると思いますが、ベースカラーのベージュの印象は損なわれていないはずです。これは面積比を維持したことによります。
« 隠す
今までに決めた3色がイメージと本当に合うかを考えて、微調整を行います。
作りたいイメージに色彩を調整する
ここまで様々なことを考えて、カラーコーディネートの基本とも言える3色を面積を考えながら決定しました。しかしそのイメージが自分が表現したかったイメージと一致するのかは別の問題です。
そこで色彩の調整が必要になってまいりますが、ここではベースカラー、サブカラー、アクセントカラーを同時に動かすことにします。これはトーンの考え方が基本になっています。調和するように色彩設計を行ってきたので、それをそのまま移動させるというわけです。
このような配色が出来上がったとして、もし自分が考えていたよりも軽い配色だなと感じるようなことがあれば、全体的に明度を下げてやることによって、重いイメージを出すようにします。
この時に注意することはあまり大きな変化をさせずに微調整を行うと言うことです。大きな変化が必要な場合はベースカラーを決定する段階ですでに問題がある場合が多いので、ベースカラーから見直すことにしましょう。
また彩度を動かすことで派手・地味感を変えることも出来ます。これも地味な場合は全体の彩度を動かしてあげましょう。
色相を変えたい場合
色相を変えたい場合も3色の色相を動かしますが、色相によっては色合いが大きく変わってしまうことがあります。均一の数値で動かすと著しく印象が変わる場合もありますので、対応表を見ながら慎重に色相を変えていきましょう。
数値が100以上になる場合
彩度や明度を上げようとした時に、これ以上上がらないという場合も出てくると思います。このような場合は上げられる部分だけ上げることで問題はありません。全体のイメージを考えながら、少しずつ動かしましょう。
« 隠す
▲このページの先頭に戻る
