Webデザインを行ううえで重要で欠かすことのできない色彩、カラー。
そして、色彩はサイトの印象に大きく影響する重要な要素でもある。サイトデザインはモノクロの配色より、色を使ったデザインのほうが魅力的であることは言うまでもない。また、色はユーザーにイメージ、メッセージを伝え、理解を助けてくれる有効な手段となる。
今回はこの色における色彩の基本と色の選びのルールについて説明してゆく。
色には色の三属性と呼ばれる、色相・明度・彩度の3つの属性がある。この3つの属性について正しく理解することが配色をするうえでの基本となる。
色相（Hue）とは、赤や黄色、緑、青、紫といった色味を表す要素。色相を円上に配置したものを色相環と呼んでいる。マンセルの色相環は有名。
彩度（Saturation）は鮮やかさの度合いをを表し、同じ色相でも彩度が高いと鮮やかで、低くなると濁った灰色に近くなる。一般的に、彩度が高い色は派手な印象を受け、印象に残りやすく、逆に彩度の低い色は、地味に感じ、印象に残りにくくなる。
明度（Value）は明るさの度合いを表し、明度が高くなると白ぽくなり、低いと黒に近くなる。明度は、文字の読みやすさやデザイン的なメリハリにかかわる大事な要素になる。
人は色に対して様々なイメージがあり、どの色にもポジティブイメージとネガティブイメージがある。たとえば赤は情熱的で活気などポジティブなイメージもあるが、危険、警告などネガティブなイメージもある。それらの色の持つさまざまなイメージを理解し、ターゲットユーザーに受け入れやすい配色にすることが第一義である。
また、配色からくる全体のイメージは使う色の面積や色数によっても大きく変わるので、イメージとしての色は慎重に選ぶ必要がある。
下の表は色のもつポジティブなイメージ、ネガティブなイメージを表したもの。色には色が持つイメージやメッセージがある。以前に色の持つメッセージについてまとめたブログ「色の背後にあるメッセージを知る」も色を選ぶ際の参考にしていただきたい。
Webサイトの配色にはベースカラー、メインカラー、アクセントカラーの3色を決めることが重要だ。さらにそれぞれの割合をベースカラーを70％、メインカラーを25％、アクセントカラーを５％のバランスにすることで、全体の配色がバランスよく調和する。
色選びの順序は1.メインカラーを選び、2.ベースカラーを選び、3.アクセントカラーを選ぶのが良い。
Webサイトの基本となる色である。企業サイトには企業のコーポレートカラーをこのメインカラーに使用する。そのような主たるカラーがない場合はイメージカラーなどから関連した色を選ぶ。たとえば、ターゲットに元気なイメージを届けたい場合は赤、オレンジ、黄色の中から選択する。
一番面積の割合が多い色。背景の色として、余白の部分に見える色である。文字色に関係してくるので、ニュートラルな色や明度の高い色や淡い色を選ぶ。基本的にはメインカラーを明るくした、同系色から色を選ぶ。
Webサイトのページを引き締める役割のアクセントカラーはメインカラーの補色を選ぶと良い。あくまでメインカラーを引き立たせ、ページ全体にスパイスを加える色である。
使用する色はなんでも良いわけではない。ターゲットイメージや商品のイメージに合わせ違和感のないメインカラーを選ぶ。選ぶ時の注意点としては、彩度の高い色は選ばないということだ。Webサイトで使う色は彩度の高い色は目に優しくないので、選択種から外す。WEB標準色にある彩度の高い、明るい色は選ばない。
イメージカラーは標準色ではなく、彩度を少なくし、落ち着いた色、つまり純色のなかにグレーや黒、白といった色をプラスした色を選択するのがベターである。下の図は標準色から白を加えたパステルカラー。グレーを加えたダスティトーン、黒を加えたダークトーンである。標準色は極力避け、パステルやダスティトーン、ダークトーンから選択するのが、色選びの基本ルールである。
色はデザインを見た人に強く印象に残るものである。何万色という色の中から、最適な色を選び配色するということは、難しくもあり楽しいワークでもある。
配色のルールには今回のルール以外にもたくさんの配色方法があるが、今回は、もっともよく行われている配色方法を取り上げてみた。配色で大切なことは、伝えたいイメージをいかに色に託して伝えることができるかである。
色選びの基本ルールを知り、ルールから逸脱することなく、独自の創造性を探求し、ECサイト構築の際には活用していただきたい。
[…] 出典 配色に困らない為の色選びの基本ルール […]