配色に困らない為の色選びの基本ルール

イメージフォト

Webデザインを行ううえで重要で欠かすことのできない色彩、カラー。
そして、色彩はサイトの印象に大きく影響する重要な要素でもある。サイトデザインはモノクロの配色より、色を使ったデザインのほうが魅力的であることは言うまでもない。また、色はユーザーにイメージ、メッセージを伝え、理解を助けてくれる有効な手段となる。
今回はこの色における色彩の基本と色の選びのルールについて説明してゆく。

1.色彩の基本、色の三属性を知る

色には色の三属性と呼ばれる、色相・明度・彩度の3つの属性がある。この3つの属性について正しく理解することが配色をするうえでの基本となる。

色相(Hue)とは、赤や黄色、緑、青、紫といった色味を表す要素。色相を円上に配置したものを色相環と呼んでいる。マンセルの色相環は有名。

彩度(Saturation)は鮮やかさの度合いをを表し、同じ色相でも彩度が高いと鮮やかで、低くなると濁った灰色に近くなる。一般的に、彩度が高い色は派手な印象を受け、印象に残りやすく、逆に彩度の低い色は、地味に感じ、印象に残りにくくなる。

明度(Value)は明るさの度合いを表し、明度が高くなると白ぽくなり、低いと黒に近くなる。明度は、文字の読みやすさやデザイン的なメリハリにかかわる大事な要素になる。

色の三属性

 

2.色の持つイメージを理解する

人は色に対して様々なイメージがあり、どの色にもポジティブイメージとネガティブイメージがある。たとえば赤は情熱的で活気などポジティブなイメージもあるが、危険、警告などネガティブなイメージもある。それらの色の持つさまざまなイメージを理解し、ターゲットユーザーに受け入れやすい配色にすることが第一義である。
また、配色からくる全体のイメージは使う色の面積や色数によっても大きく変わるので、イメージとしての色は慎重に選ぶ必要がある。
下の表は色のもつポジティブなイメージ、ネガティブなイメージを表したもの。色には色が持つイメージやメッセージがある。以前に色の持つメッセージについてまとめたブログ「色の背後にあるメッセージを知る」も色を選ぶ際の参考にしていただきたい。

色のイメージ

 

3.配色の基本は3色。ポイントは「70:25:5」の法則

Webサイトの配色にはベースカラー、メインカラー、アクセントカラーの3色を決めることが重要だ。さらにそれぞれの割合をベースカラーを70%、メインカラーを25%、アクセントカラーを5%のバランスにすることで、全体の配色がバランスよく調和する。
色選びの順序は1.メインカラーを選び、2.ベースカラーを選び、3.アクセントカラーを選ぶのが良い。

1.メインカラー:25%

Webサイトの基本となる色である。企業サイトには企業のコーポレートカラーをこのメインカラーに使用する。そのような主たるカラーがない場合はイメージカラーなどから関連した色を選ぶ。たとえば、ターゲットに元気なイメージを届けたい場合は赤、オレンジ、黄色の中から選択する。

2.ベースカラー:70%

一番面積の割合が多い色。背景の色として、余白の部分に見える色である。文字色に関係してくるので、ニュートラルな色や明度の高い色や淡い色を選ぶ。基本的にはメインカラーを明るくした、同系色から色を選ぶ。

3.アクセントカラー:5%

Webサイトのページを引き締める役割のアクセントカラーはメインカラーの補色を選ぶと良い。あくまでメインカラーを引き立たせ、ページ全体にスパイスを加える色である。

色の割合

4.色選びの基本ルール

使用する色はなんでも良いわけではない。ターゲットイメージや商品のイメージに合わせ違和感のないメインカラーを選ぶ。選ぶ時の注意点としては、彩度の高い色は選ばないということだ。Webサイトで使う色は彩度の高い色は目に優しくないので、選択種から外す。WEB標準色にある彩度の高い、明るい色は選ばない。
イメージカラーは標準色ではなく、彩度を少なくし、落ち着いた色、つまり純色のなかにグレーや黒、白といった色をプラスした色を選択するのがベターである。下の図は標準色から白を加えたパステルカラー。グレーを加えたダスティトーン、黒を加えたダークトーンである。標準色は極力避け、パステルやダスティトーン、ダークトーンから選択するのが、色選びの基本ルールである。

カラーチャート

まとめ

色はデザインを見た人に強く印象に残るものである。何万色という色の中から、最適な色を選び配色するということは、難しくもあり楽しいワークでもある。
配色のルールには今回のルール以外にもたくさんの配色方法があるが、今回は、もっともよく行われている配色方法を取り上げてみた。配色で大切なことは、伝えたいイメージをいかに色に託して伝えることができるかである。
色選びの基本ルールを知り、ルールから逸脱することなく、独自の創造性を探求し、ECサイト構築の際には活用していただきたい。

関連する記事

拡大するモバイルコマース その最新トレンドは?... 「モバイルコマース」とは、スマホやタブレット端末からのEコマース取引を表す用語です。2014年のモバイルコマースによる流通額はアメリカで500億ドル(約5兆円)、日本でも2兆円規模になると予測されています。 市場規模が、2011年時点のアメリカで79億ドル(約7,900億円)、日本で1.1...
知っておくべきミレニアル世代の8つの習慣... 2015年4月に500名のミレニアル世代の買い物習慣について調査、さらに10月にも携帯アプリやギフトカード利用に関するアンケートも実施した。 その結果、ミレニアル世代の消費者は携帯とソーシャルメディアを利用したシッピングを好む傾向がある事が明らかになった。  "ミレニアル世代の...
消費者心理を読み解く!最新Eコマーストレンドとは?... オンラインでの買い物は、効率的で楽しいショッピング経験をユーザーにもたらしてくれます。世界中でEコマースがますます日常的なものになりつつある昨今、オンラインショッピングとオフラインショッピング(=実店舗での買い物)をいかにして連動させるか、に注意を向ける必要性が高まっていると言えます。 オ...
中国越境ECマーケティングの鍵 網紅(ワンホン)とは?... 中国の越境EC規模(中国・日本・アメリカ間)、2016年は2兆1,737億円、前年比32.6%の伸びと世界第1位の市場規模であった。中国消費者の日本からの購入額は1兆366億と前年比30.3%の伸びで、初の1兆円超えとなった。 訪日中国人も過去最高の約637万人となっており、訪日外国人数で...
今更聞けない Google品質評価ガイドラインとは... 2019年5月16日Googleは「検索品質評価ガイドライン(General Guidelines)」を更新した。前回は2018年7月だったので、約1年ぶりの更新となる。 Googleは検索結果の品質を高めるため、1万以上の検索品質評価者と契約している。 検索品質評価ガイドラインは、品質...
中国最大のオンライン決済サービスAlipayとは... 今、中国のオンライン決済サービスで圧倒的なシェアを誇るのが「Alipay(アリペイ:支付宝)」による決済方法である。1日の平均取引件数が1.7億件とその数も膨大だ。ユーザー数も8億人を越え、中国ユーザー数は4.5億人、モバイルユーザー数は3億人以上と言われている。その中、Alipayはオンライン...
このエントリーをはてなブックマークに追加

コメントをどうぞ