もう迷わない！WEBサイト配色の３ステップ
以下は知人の職業デザイナーの方に記載いただきました
WEBサイトの配色を決めるときに避けるべきことは、目的を決めずに好みや感覚だけで決めてしまうことです。
初心者・上級者に関わらず、フロントのプログラミングではありがちですが。。。
なんとなく色を決めることで、迷いが生じたり意図しないイメージへと色がずれていってしまいます。
「WEBサイトのイメージカラーが決められない」「高級感のあるイメージにするにはどの色を使えばいいのだろう」…と悩んでしまった時は、法則に則った色を置いていくことを覚えていると技巧の幅が広がります。
今回は、色が人に与える心理や効果に基づいたWEBサイト配色の３ステップをご紹介します。
○【STEP2】メインカラーを選ぶ → 色が人の心に与えるイメージ
○【STEP3】アクセントカラーを選ぶ → 色相・明度・彩度を利用した色選び
○色を決める前に、配色比率のお話( 70 : 25 : 5 の法則 )
Webサイトを作っていく際に設定する色の種類には、ベースカラー・メインカラー・アクセントカラーというものがあります。
ベースカラーとは、名前の通りサイトのベースとなる色。
メインカラーとはサイトの主役となる色。
アクセントカラーとメリハリを与えるための色です。
それぞれの配色には一般的に美しいとされている比率が存在します。それは「 70 : 25 : 5 の法則 」。
「べースカラー:75%、メインカラー:25%、アクセントカラー:5%」の割合で使用することで、
全体的にバランスのとれた配色に仕上がるということです。
それでは、実際に色を選んでいきましょう。
○【STEP1】ベースカラーを選ぶ
ベースカラーは最も大きな面積を占める基本となる色で、余白や背景などに用いることが多い色です。
白や黒、グレーなどのメインカラーなどの妨げになりにくい色がよく使われます。または明度の高い色、淡い色を意識して使ってみるとしっくり収まります。
○【STEP2】メインカラーを選ぶ
メインカラーはサイトのイメージを左右するメインとなる色です。可読性を上げるために明るい色よりも暗い色を使うのが良いとされています。
メインカラーにはサイトのロゴと同じ色を使う場合も多くありますが、それ以外の場合は、色が人の心に与えるイメージを基にコンセプトに沿った色を選んでみると良いでしょう。
【 色が人の心に与えるイメージ 】
| 色 | 印象 |
|---|---|
| 赤 | 情熱、興奮、挑戦、元気、エネルギッシュ、闘争心、暖かい、派手 ■視覚的に訴える力が一番強い色 |
| 青 | 知的、クール、謙虚、清潔、清涼感、信頼感、誠実、開放感、安息、平和、リラックス ■日本人の一番好きな色 |
| 黄 | 明るい、華やか、天真爛漫、陽気、ポジティブ、活発、幸運、希望、フレンドリー ■活動的なイメージを持たせる色 |
| 緑 | 穏やか、癒やし、健康、休息、平和、安全、爽やか、成長、再生、新鮮、若さ、自然 ■どの色ともバランスよく調和する色 |
| オレンジ | 温もり、食欲促進、挑戦、エネルギッシュ、陽気、喜び、健康、幸福、カジュアル ■万人受けする色 |
| ピンク | 女性的、可愛らしい、華やか、優しい、甘い、恋、愛情、まろやか若さ、幸福、性的 ■女性的な商品によく使用される色 |
| 紫 | 神秘的、不思議、高貴、上品、優雅、繊細、芸術、古風、知的、中性的、思慮深い ■見る人によって受ける印象が大きく変わる色 |
| グレー | 上品、高級感、クール、お洒落、都会的、洗練、信頼感、安定感、知的、大人 ■ベースカラーにおすすめの色 |
| 白 | 清潔感、透明感、純粋、神聖、潔白、浄化、広い、軽い、明るい、美しい、厳しい、新しい、祝福、シンプル、理想 |
| 黒 | 高級感、威厳、重厚、クール、スタイリッシュ、真面目、上質感、絶対感、強さ、大人っぽい、閉塞感 |
○【STEP3】アクセントカラーを選ぶ
アクセントカラーは全体の5％と少ない使用量ながら一番目立つ色で、全体を引き締める、ユーザーの目を引く役割があります。
最も目立つ色となることが理想ですが、メインカラーとの調和がとれていながらメリハリのある色を感覚で選ぶのは難しいところ。
しかし、色と色の相性には法則があります。「色の３大要素」を理解すれば、間違いのないアクセントカラーを選ぶことが可能です
【 色相・明度（トーン）・彩度を利用した色選び 】
■ 色相
赤、青、緑のような色味の違いのことを色相と言います。色相を順番に円状に配置したものを色相環と言い、これを見れば相性の良い色がわかる仕組みになっています。
色の相性を確認する上で最も重要な要素のひとつです。色のグラデーションをいくつに分割するかは配色システムによって異なります。
※日本色彩研究所が1964年に発表したPCCS(Practical Color Co-ordinate System)の色相環は24色。
色相環の中で相性が良いとされているのは、「同系色」「補色」「反対色」の３つ。メインカラーの左右にある色が同系色、正反対の位置にある色が補色、正反対の色の隣近辺の色が反対色です。
特に反対側にある色は相性が良い上に互いの色を目立たせるため、アクセントカラーとしてメリハリをつけるのに効果的です。 しかし、面積が増えると刺激が強くストレスにも繋がるため５%の比率を意識して使いましょう。
■ 明度（トーン）
明度とは明るさの違いのことで、明度の高い色は「明るい色」、明度の低い色は「暗い色」と表現されます。最も明るい色は白、最も暗い色は黒となります。
文字に使用する可能性のある色は、背景との明度差がある色を選ぶと良いでしょう。明度はメインカラーにも役立ちます。
■ 彩度
彩度とは色の鮮やかさを表す要素です。彩度が最も高い色は鮮やかな原色となり、彩度が低くなるにつれて色みを感じないくすんだ色に変化し、最後には無彩色になります。彩度が高い色は派手な印象を受け、彩度の低い色は地味な印象を受けます。
アクセントカラーをより強く協調したい場合は色の彩度を高め、その他の色の彩度を低くするとメリハリのある配色づくりに効果的です。
使用するすべての色の彩度が高いと刺激が強くストレスを与えてしまうので注意しましょう。
まとめ
上手く配色ができましたでしょうか。色の選択に悩んだ時は、色相・明度・彩度を含む色の三大要素や配色の比率を思い出しながらバランスを調整するとうまくいきます。
WEBサイトだけでなくデザイン全般に共通する基本の法則ですので、ぜひ様々な場面で活用してみてください。
その他関連記事
Webデザイナーがきついならフロントエンドエンジニアへの転職がお勧め
現役デザイナーが教える！ デザインを勉強する上で参考になりそうなサイトとその理由
CSS3でhoverした時に背景をふわっと変更する|コピペで動くサンプル付き
Bootstrapでhtml要素を折りたたむ|コピペで動くサンプル付き
Bootstrapでモーダルウインドウをカスタマイズする|コピペで動くサンプル付き
Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き
