今回は、サイトのカラーを決める際の基本テクニックを、備忘録としてまとめてみたいと思います。
ベースカラー・メインカラー・アクセントカラーの3色をベースにします。
この3色には、目安となる配分率があります。
メインカラー → ベースカラー → アクセントカラーの順に決めます。
サイトのテーマとなる色。サイトの印象を決定します。
コーポレートカラーを使用することが多いですが、ターゲットユーザーのイメージから色を決めることもあります。
メインカラーとその濃淡で色彩を展開すると、全体に統一感のあるイメージにまとめることができます。
メインカラーを決める時のパターン
A. 企業イメージとカラーイメージを合わせたカラーを選択する
B. 市場のロゴカラーを分析し、あえて使われていないカラーを選択する
C. 目的、用途に合わせてサイトカラーを決定する
D. 伝えたい内容とそのイメージカラーを揃える
【補足】ある程度「明度の低い」色が文字も読みやすく扱いやすい。
背景などになる全体の基盤となり大きな割合を占める色です。
メインカラーを引き立たせるために白や黒、グレーといった無彩色、もしくは「メインカラーの明度を上げた色」をベースカラーにするとまとまります。
参考
メインカラーを引き立てるためのサブカラーには、グレーを使用すると失敗がありません。
・黒に近いグレー
・白に近いグレー
は、特にWebサイトのベースカラーとして使いやすい色です。
濃色、または白で文字を組み合わせたときに読みやすいような濃度のグレーをベースカラーとしての配色計画に入れておくとよいでしょう。
※ベースカラーは、メインカラーとのコントラストが強くなってしまうと、次に説明するアクセントカラーの役割になってしまいます。
ベースカラーはあくまでもメインカラーとの統一感を考えて、使用しているメインカラーと「同じトーン」を意識して選択してみましょう。
注目させたい、見落とされたくないポイントにだけ使用する強調色。メインカラーの反対色を使うと、鮮やかさが引き立つので目にとまりやすくなります。
ベースが3色ですがて、色が足りなくなる場合は、色相かトーンのどちらかが共通する色を使って色数を増やします。
色を追加したときに、メインカラーの比率、アクセントカラーの比率が増えすぎるとバランスが崩れてしまうので注意します。
色選びの参考となるように、「色」が人間に与える印象をご説明いたします。
情熱・興奮・熱狂・高揚・刺激・挑戦・元気・明るい・力強い・エネルギッシュ・鮮烈・闘争心・祝い事・長寿・暖かい・アクティブ・前向き・生命力・インパクト・火・太陽・エネルギー・恋・愛情
・価格訴求、キャンペーン訴求したいサイト
・行動力を示したいサイト
知的・クール・かっこいい・ストイック・謙虚・神秘的・品がある・清らか・クリーン・純粋・慎重・信頼感・誠実・公平・広い・開放感・包み込む・忠実・安息・清涼感・許可・平和・眠り・若さ・空・海・生命・水・安息・精神・男性的・知性・信頼・涼しさ・平和・眠り・落ち着き・安全・誠実・清潔感
・さわやかさを感じさせたいサイト
・知性、若さを感じさせたいサイト
暖かい、温もり、親しみやすい、美味しそう、挑戦、エネルギッシュ、元気、陽気、賑やか、喜び、健康、家庭的、幸福、カジュアル、開かれている、ノリがいい、親切・ビタミン・楽しさ・好奇心・社交的・美味しさ・太陽・活力・大衆的・柑橘系
・「親しみ」「家庭的」のイメージを与えたいサイト
・食欲増進を狙いたいサイト
明るい・華やか・天真爛漫・無邪気・陽気・軽快・ポジティブ・楽しさ・喜び・活発・素直・純粋・幸福・幸運・希望・フレンドリー・ユーモアさ・躍動感・幼い・快活・希望・躍動感・幼さ・発展・柑橘系・若々しさ・楽観的・好奇心・協力・栄光・元気
・子供のにぎやかさ、活発さを表したいサイト
・学習系サイト
穏やか・癒し・健康・休息・平和・安全・安息・爽やか・生命力・成長・再生・新鮮・若さ・エコ・環境に優しい・自然・安眠・努力・粘り強い・豊穣・永続性・安心感・安定・さわやか・リラックス・自然・環境・回復・平穏・生命力
・安心・安全を象徴したいサイト
・落ち着きとハイセンスさを両立したいサイト
神秘的・神聖・不思議・高貴・高級・上品・美しい・優雅・華麗・魅力的・感性がするどい・繊細・芸術・古風・知的・中性的・思慮深い・感性・優雅・ムード・魔法・癒し
・上品さを訴求したいサイト
女性的・可愛らしい・可憐・華やか・優しい・甘い・恋・愛情・エレガント・美しい・まろやか・繊細・若さ・美容に効果がある・感謝・愛情・美しい・まろやか
・女性向け商品
・安らぎがテーマの商品ページ
・幼児向け
上品・高級感・クール・お洒落・都会的・洗練されている・穏やか・調和が取れている・信頼感・安定感・知的・大人・穏やか・安定・落ち着き・空想・調和・クール・スタイリッシュ・温厚
高級感・威厳・クール・スタイリッシュ・シンプル・上品・真面目・上質感・神秘的・絶対感・強さ・中世・力がある・大人っぽい・無限の可能性・高級・極限・自信・中立・忠誠・男性的・重厚感
清潔感・透明感・信頼できる・純粋・神聖・まっさら・汚れていない・潔白・高潔・浄化・広い・軽い・明るい・美しい・厳しい・新しい・善・平和・穏やか・無垢・素直・祝福・シンプル・理想
配色の際の参考になれば幸いです。
