ノンデザイナーでも知っておきたい「配色ルールの基本」～マーケティング業務をより進化させるために
Webサイトのカラーデザインについて、デザイナーに上手くイメージを伝えられない。何かが足りないけど説明できない…。そんな経験はありませんか？
近年のマーケティング業務は多岐にわたりますが、魅力的なコンテンツやクリエイティブを作成することの重要度が年々増しているように感じます。
そこで今回は、これまでデザインに関わってこなかった人でもセンスのいい配色ができるルールをお伝えしたいと思います。ノンデザイナーでもできるセンスのいい配色の決め方は、マーケティング業務に関わる人であれば知っておいて損はないと思います！ぜひご覧ください。
Webサイトの配色黄金比70:25:5の法則
Webサイトは一般的に「ベースカラー」「メインカラー」「アクセントカラー」の3つに分かれて構成されています。それぞれの比率はベースカラー（70%）メインカラー（25％）アクセントカラー（5％）が最適とされています。
「ベースカラー」「メインカラー」「アクセントカラー」のそれぞれの役割
- ベースカラーの役割
ベースカラーはサイト内で最も大きな面積を占める色で「背景」や「余白」に用いることが多く、メインカラーやアクセントカラーを際立たせる脇役のような役割だと思っていただければイメージしやすいかもしれません。
- メインカラーの役割
メインカラーはその名の通り、主役となりサイトの印象を決定づける色です。ブランドや商品の世界観を強く印象付けるために、サイトに使用するロゴの色に合わせる場合が多く、通常もっとも重要視される色といえます。
- アクセントカラーの役割
アクセントカラーは、ワンポイントで使用する色です。全体の色を引き締めたり、強調したいコンテンツを特に際立たせてユーザーの目を引いたりするために使用されます。メインカラーを補う色として使用されますが、必ずしも派手な色を使用しなければいけないというわけではありません。
配色を決める順番
- メインカラーを決める
まず最初にサイトのイメージを大きく左右するメインカラーを決めます。前述のようにロゴのカラーを使用しているサイトも多く見かけますが、メインカラーとして使用する色は、サイトのターゲットやユーザーがどんな印象を持ってほしいかによって決めます。どんな色がどんな印象を与えるのか？を考えながら決めるとよいでしょう。
- 色のがユーザーにどのような影響を与えるかについてはこちらの記事も参考にしてくださいね！
⇒マーケティング心理学 買いたい気持ちを高める！「色」 - ベースカラーを決める
次に決めるのはベースカラーです。メインカラーを引き立たせるにはどの色が一番いいのかを考えながらベースカラーは決めていきましょう。白・黒・グレーなどの無彩色はメインカラーやアクセントカラーを邪魔しないので、無彩色を採用しているサイトも多いですね。ベースカラーは背景色やコンテンツ間の余白などに使用されることも多いので、文字の読みやすさや画像の見やすさなどコンテンツの視認性を考慮して、淡い色を使用するとバランスがとりやすいです。
- アクセントカラーを決める
最後にアクセントカラーを決めます。メインカラーとベースカラーだけではどうしても単調になりがちですので、全体にメリハリをつけることを意識しましょう。また、アクセントカラーは、ボタンの色に使用することも多い色ですので、ユーザーの目を引くようにメインカラーと比べて目立つ色にするとよいと思います。
また、アクセントカラーを決めるときもメインカラーと同じようにユーザーにどういう印象を与えたいか考えながら検討する必要があります。また、アクセントカラーは必ずしも1色である必要はないのですが、色が増えれば増えるほど他の色とのバランス調整など扱いが難しくなる傾向があるので注意が必要です。
「色の決め方」ーセンスの良い配色にはルールがある
メインカラーは決まっているけど、その他の色の組み合わせをどうしたらいいのかわからない。結局センスが必要なのでは？とお考えのあなた。そんなことはありません。実はセンスのいい配色にはルールがあるのです。そこで今回は「色相」に着目した配色方法をご紹介します。
そもそも「色相」ってなんでしょうか。色相は、赤・青・緑といった「色味の違いのこと」です。
同じ赤でも「紫寄りの赤」や「オレンジ寄りの赤」など、同じ色でも色々な色味がありますよね。そういった色味の違いをグラデーションで円の形にまとめたものを「色相環」と言うのですが、この色相環を使用して配色を考えると「センスのいい配色を決めることができる」ようになるのです。
※今回は日本色彩研究所が発表した24色の「PCCS色相環」を使用します。
では、実際にどのように使うのか表現したいイメージに沿って説明していきます。
「共通性」「まとまり感」「統一感」を出したいときは ～色相に共通性がある配色～
「共通性」「まとまり感」「統一感」を出したいときは、色相が近い色を選ぶことで表現することができます。
例えば、メインカラーが「青」であれば、下記の図の矢印の範囲の色を選ぶと良いでしょう。
オカモトヤ：https://www.okamotoya.com/
※上記サイトのスクリーンショット（2018年6月現在）を使用しております。オフィスの施工などを行うオカモトヤのサイトでは色相に少しだけ差のある青を配色しています。アクセントカラーにはピンクを使用していますが、それ以外は全体的に色味やトーンの異なる青を使用し全体として「まとまり感」「統一感」のあるページとなっています。
「新規性」を表現したいときは ～色相にやや違いがある配色～
「新規性」を表現したい場合は、基本の色から４～７くらいずらした色を選ぶことで表現することができます。
少し中途半端な、曖昧な印象を受ける配色になりますが、新規性を表現する際に向いている配色と言えるでしょう。一般的に調和がとりにくいとされる配色ですが、日本の伝統的な「かさねの色目」にはこの中差色相配色が多く採用されており日本人にとっては意外と得意な配色だったりするそうです。いずれにしてもトーンに差をつけることで調和をとる配色なので、少し上級者向けの配色になります。
FAMILY OUTDOOR まめ知識：http://www.campjo.com/mamechishiki/
※上記サイトのスクリーンショット（2018年6月現在）を使用しております。アウトドア初心者向けの情報サイト「FAMILY OUTDOOR まめ知識」では色相にやや違いがある配色を使用しています。緑に対し同じトーンの青ではなく、少し暗めの青を使用することで配色のバランスをとっています。
「メリハリ」や「コントラスト」を強調したいときは ～色相に対照性がある配色～
メリハリやコントラストを強調したい場合は、色相環で垂直に近い斜めで繋いだ配色は、色相差ではなく明度差もつくので、よりメリハリやコントラストが協調されます。アクセントカラーを決めるときには色相差の大きいこの配色方法がおすすめです。
ヤッホーブルーイング：http://yohobrewing.com/
※上記サイトのスクリーンショット（2018年6月現在）を使用しております。クラフトビールのヤッホーブルーイングでは色相差の大きい青と黄色を使用しています。色相差は11とほぼ反対色に近い色味を使用し、コントラストが強調されています。
まとめ
以上、センスのいい配色ルールについて説明しました。
Webサイトリニューアルの際や、デザイナーさんに指示を出すときなどに是非利用して頂ければ幸いです。
