配色の面積比

配色によって伝えることのできるイメージは、面積によって大きく変わってしまいます。

特に、配色サンプルなどを無意識に利用していると、
目指すイメージとまったく違う印象になる可能性があるので注意が必要です。



一般的にインテリアなどでは、

・ベースカラー(基本となる色)70%
・サブカラー(ベースカラーを補う色)25%
・アクセントカラー(変化をつけるための色)5%

といった比率で配色を行うとよいとされています。


Webサイトの配色も同様に、ひとつの色をベースカラーとして設定し、
最大面積でつかうようにすれば、イメージのずれを減らすことが可能です。

言い換えれば、もっとも大きな面積で用いられる色によって、
配色のイメージは左右されるのです。


最大面積の色を変更してしまうと、
それ以外の部分を変更した色に合わせる必要が生じてしまいます。

そのようなことにならないように、ベースカラーは慎重に設定して
容易に変更しないようにするべきでしょう。


配色の基本は「統一と変化」と言われています。


具体的な方法としては、まず同一・類似色でベースカラーをつくり
トーンや色相などが類似した色をサブカラーとして追加することで、
統一感を演出することがきます。

そのうえで、変化としてのアクセントカラーを追加するようにすると
配色を行いやすいでしょう。

伝えたいイメージをずれないように伝えるために、
配色サンプルを見るだけでなく、面積も考慮していきましょう

ラベル: , ,

カラーイメージと配色について

Webサイトには、そのサイトの目的が必要です。
その目的を果たすための手段としてデザインや配色を行いますので
まずは目的を明確にし、検討してから配色に生かすようにしましょう。

例えば、
「Webサイトの認知度を高める」→「ロゴや企業名に重点を置いた配色」

「ブランドイメージを高める」→「コーポレートカラーを前面に押し出した配色」

「商品を売りたい」→「商品写真を目立たせ、説明文に注目させる配色」

「特に注目させたいサービスがある」→「その部分を目立たせ、クリクックを誘導する配色」

といった具合です。

このように、Webサイトの目的から配色を明確にすることによって、
デザインの中でどの部分に重点的な色を使用すれば良いかが決まります。
重要な部分に優先順位を定めておくのも効果的な方法です。

また、色には情報の内容を知る前にどのような内容かを伝達する働きがあります。

【赤】
暖色系の中でも中心的な存在の色です。
女性的なイメージや派手さなどのイメージ表現に効果的で、
面積が小さくても人の注意を引き付ける効果のある色です

アクセントカラーとしても効果があります。

【青】
寒色系の中でも中心的な存在の色です。
水や空などを連想し、冷たさ、涼しさなどの温度感を伴う表現や
男性的なイメージを表現するときに使うと効果的です。
静的なイメージ表現に適しています。

【緑】
自然を連想させる色で、青と同様に沈静感などの静的なイメージを表現するとき
効果的な色です。
青よりも黄みの強い色なので青のイメージに近似し、
暖かみのある印象を伝えたいときに使うと良いでしょう。

【オレンジ】
赤よりも黄みの強い色で、夕日や炎を連想させるので、
暖かさを表現するときに効果的な色です。
彩度を高く、面積を大きくすると安っぽい印象になるので注意しましょう。

【茶】
ナチュラルなイメージ表現に適した色です。
茶色は赤、オレンジ、黄色系統の彩度の低い濁色系の色なので、
落ち着いた雰囲気といった静的なイメージ表現にも最適です。

【紫】
紫は特殊な色です。
希少価値の高い色とされているので、高貴な人物の衣服や装飾具の色として
使用されていた経緯があり、高貴なイメージを表現する代表的な色です。


他にも、色の組み合わせによりたくさんの表現方法があります。
サイトを制作するときに配色を考慮するとによって、
効果的なサイト制作をすることが出来るでしょう。

ラベル: , ,