続きを読む… »

自分で配色サンプルをアレンジする

ここでは一つの例だけを取り上げましたが、このような配色サンプルは元々印刷用に作られたものが多く、それをモニターで見た場合、大きな面積で表示した場合にどのように映るかということについては考慮されていない場合が多いように思います。

そのままで使える色も多く含まれていることは事実ですが、中には明度、彩度がともに100%近く、そのまま使ってしまうとまぶしくて使用に耐えないような色やイメージに合わないような色、読むのに苦労する色などが混ざっている可能性は非常に高いものとなっております。このような場合には使えない色は捨てるなり変更するなどして、自分のウェブサイトで使うことの出来る配色にアレンジしていくことが必要です。

配色サンプルは2色だけ使う

配色サンプルの利用法のページで見ていただいたサンプルのように、サンプルの3色ともが無条件で自分のサイトに使えるとは限りませんので注意が必要です。このような場合については、自分が使いたいベースカラーを決定して、あらかじめ考えていたイメージに近いと思われる色をサブカラーとする2色を決め、3色目については自分で選んだ方が、より自分が考えるイメージに近づきます。

またどうしてもイメージに合わない場合や色がおかしいと思える場合には、色彩設計まで戻って、ベースカラーとサブカラーの関係などを見直していくことにします。面積比から考えると、この2色を入れ替えるだけでも大きくイメージが入れ替わります。

« 隠す

続きを読む… »

配色サンプルが全て正しいわけではない

書店に行けば様々な種類のカラーチャートといった本を手に入れることが出来ます。その中には様々な配色サンプルが掲載されており、イメージしやすい形容詞などから3つの色を辞書のように取り出せたりするようなものなどがあります。特に最近の物はありがたいことにRGB値も掲載されているので、そのまま使うことが出来るのが特徴です。

そこでとある本に載っていたサンプルを使って配色を行ってみました。「フレッシュ」というページに載っていた配色サンプルです。面積比は出来るだけ維持することにして、サンプル1と2を作ってみましたが、どうも黄色が暑苦しくてフレッシュな配色とは思われません。

そこで面積比を調整してみたのが、サンプル3と4です。サンプル3の方は黄色をアクセントカラーに持ってきましたが、それでも暑苦しくてフレッシュではないような気がします。4の方はなんだかゆるい印象になってしまいました。

そこで思い切って邪魔をしていた黄色の明度を上げてみたサンプルが5と6ですると、少しはフレッシュなイメージに近づいたかと思われます。

あとは使うべき部分を考え直したり、全体の面積を調節するなどして理想のイメージに近づけていくようにしましょう。

« 隠す