【カラーデザインでお悩みの方へ】Webサイトに使われる「色」の黄金比は70:25:5

こんにちは。
スターティアラボ　ブログ編集部です。

Webサイトを作る上で重要な要素はたくさんあると思いますが、今回はカラーデザイン、特に「色」について考えてみました。

「色」の持つ意味を理解する事で、Webサイトが充実します。
ファーストビューでアイキャッチを図るためにも、またセンス抜群な配色でユーザーの心を掴むためにも、カラーデザインで成功するための秘訣をご紹介します！

1.Webカラーってなに？

まず、Webで使えるカラー（Webカラー）についてご説明します。

Webカラーとは、Web上で使える色のことで、全部で216色からなります。
※ここでは8ビットカラーの256色のうち、MacintoshとWindowsで異なる40色を除いた216色をWebカラー（Webセーフカラー）としています。

これ以外の色を選択した時には、ブラウザなどにより似た色に置き換えられることがあります。

2.Webカラーデザインの黄金比は？

Webにおけるカラーデザインは、一般的に「ベースカラー」「メインカラー」「アクセントカラー」の3つに分かれて構成され、それぞれの比率は以下がベストとされています。

ベースカラー　：　70％
メインカラー　：　25％
アクセントカラー　：5％

「ベースカラー」とは、Webサイトの印象を決める色。
「メインカラー」はWebサイトの軸になる色で、コーポレートカラーが使われる場合が多いです。

また、「アクセントカラー」は強調したいコンテンツを目立たせるために使われる色で、他のコンテンツを活かすために使われる場合もあります。

このように、別々の役割を持った3色をベースとして構成されているデザインは、Webサイト以外にもたくさん使われています。

まわりを見渡してください。好きな広告や御用達のWebサイトを改めて見ると、どんな3色が使われているのかはっきりとわかるのではないでしょうか？

3.カラーを決める順番

最初に「メインカラー」を決める

サイトの印象を決める大切な色。この色を中心として、それに合わせた配色を行っていきます。
特に使う色が決まっていない場合は、ホームページで紹介する商品やサービスに「どのような印象を与えたいか」でメインカラーを決める場合が多いです。

ある程度、明度の低い色が扱いやすいと言われています。
※明度が高いと文字が読みにくい場合があります。

次に決めるのは「ベースカラー」

サイトの背景色など、幅広い色面を彩る色のことです。
文字間、コンテンツ間の余白などにも使われることが多いので、明度の高い色、淡い色を使う場合が多いです。
※強い色をベースカラーに使う際には文字に白系の色を使い、読みやすくするのもよいでしょう。

最後に「アクセントカラー」を決める

文字通り、デザインにアクセントを付けるために用いられ、メインカラーで決めた色の捕色として使われます。
アクセントカラーは派手な色というわけではなく、あくまでもサイトのバランスを見ながら決めていきます。

※上記で書いた3色はあくまでオーソドックスな例です。

メインカラーやアクセントカラーは分割（2色以上を使用）することもあります。
その際、追加した色が全体の色の比率を崩さないようにだけ気をつけましょう。

困ったときには「配色サイト」を利用してみる

カラーデザインがなかなか色が決まらないという方には、こちらの配色サイトが強い味方となってくれます。

PLTTS

すでに配色が決まっているので、好きな配色を選ぶだけです。

Adobe Color CC

Adobeが提供しているサイトです。いろいろな配色のアイデアをもらえます。

Flat UI Colors

最近流行しているフラットデザインによく用いられるような色が掲載されています。
各色をクリックするとカラーコードをコピーできます。

4.色の持つ意味

色にはそれぞれ意味があり、見る人へ与える印象や効果も異なります。
ここで、各色の持つ意味を簡単にご説明します。

■赤
エネルギッシュ。インパクトあり。心拍数を高める色。
⇒緊急性があり、セール中の商品に使うことでいっそう目をひきます。

■青
信頼と安全の色。安心感をもたらす。
⇒銀行など信頼感を打ち出すために、メインカラーで使う企業も多いです。

■黄色
楽観的・若々しさ。
⇒ウィンドウショッピングなどをしている人の注意を集めるために使われます。

■緑
裕福・リラックスを連想させる色。
⇒目に優しく、一連のプロセスを容易に見せます。黒板の色が緑なのは、そういうところからだそうです。

■オレンジ
活発・活動的な色。
⇒「購入する」「購読する」などのCTAボタン系の色に使われる事が多いです。

■ピンク
ロマンチック・女性的な色。
⇒若い女の子や女性全般に向けたECサイトで使われます。

■黒
パワフル・滑らか・光沢など。
⇒高級な商品を扱うサイトで使われます。背景に黒を選択する事で、大人びた印象を与える事ができます。

■紫
落ち着き・静けさを象徴する色。
⇒美容系の商品（シャンプーやトリートメント）に使われます。

5.まとめ

Webサイトを制作する上で、「初歩」段階のカラー選定について書いてみましたが、改めて「色」の大事さ、大切さを感じることができたのではないでしょうか。

普段なんとなく見ているサイトも、こういった視点から見てみると面白いかもしれませんね。
カラーデザインは重要な反面、個人の色彩感覚によるところが大きかったと思います。

しかし、上記で紹介したようなお役立ちツールも多数ありますので、これからWebサイトを作られる方や
リニューアルされる方はもちろん、既存のWebサイトに関しても、そこで使われている「色」の意味を再確認し、
必要であれば色の変更も行うべきかと思います。

色の持つ効果を最大限に活かし、ユーザーの行動を喚起するようなWebサイトにしたいですね。