営業人のためのWEBデザインノウハウVol.6

色の組み合わせ

こんにちは。ワンダースター株式会社の竹内です。
前回は、文字と画像のテーマにお話しさせて頂きました。
今回は、色の組み合わせというテーマでお話させて頂きます。

例えば以下のような、ホームページなどではよく見かけるボタンですが、左と右だと、どちらがより目立つと思いますか?

色をどう感じるか、ということは、個人の感覚に依るところも大きいため、全員の答えが一致するとは限りませんが、多くの人は、左のボタンの方がより目立つと感じるのではないでしょうか?

色と色はその組み合わせによって、見え方や、見る人の感じ方に違いを作ることができます。
上記のボタンの場合、「詳しくはこちら」という文字の大きさや、背景に使っている黄色の色は同じ色ですが、その周りの色が異なります。

左の場合、濃い青色を使うことで、ボタンを見る人に向かってボタンを前に押し出す効果が生まれています。

明るい色と暗い色を組み合わせた場合、隣り合った明るい色は、鮮やかに見える効果が生まれます。この効果を明度対比と言います。
また、中学校の美術の授業などで習ったことがあるとは思いますが、色は12の色相に分けることができますが、それらを並べたときに(※以下図12色相環参照)反対に近い色ほど、
お互いの色を鮮やかに見せる効果があります。この効果を補色対比と言います。
上記のボタンの場合、これら2つの効果によって、同じ色のボタンですが、左の方が目立つように見えています。

図1:12色相環

色は組み合わせによって、同じ色でも違った色に見えることは意外と多いものです。
参考に、図2の色を見比べてみてください。
それぞれ、真ん中に使われている、青と赤は同じ色ですが、背景色と一緒に見ると、同じ色には見えないのではないでしょうか?
背景色を何かで覆って見ると同じ色であることが分かると思います。

色の組み合わせによって人の感じ方は様々に変わります。
今回は明度対比と補色対比を取り上げましたが、また次回以降で色がもたらす感覚の違いについて取り上げたいと思います。

図2:背景色による色の見え方の違い


竹内 光 プロフィール

ワンダースター株式会社 代表取締役
上海良星造想信息技術有限公司 総経理

2004年 京都市立芸術大学構想設計専攻卒業 2007年 WEB制作会社、広告会社のWEB関連の業務経験を経て独立。 2009年 中国(上海)に上海良星造想信息技術有限公司を設立。 2014年 日本(東京)にワンダースター株式会社を設立。 企業向けのWEBマーケティングのコンサルティング業務を中心に中国、日本で活動している。


本誌掲載の写真 ・ 記事 ・ 図版を無断で転写 ・ 複写することを禁じます。

関連記事