配色カラーは、デザインをする際に重要な要素です。
今回はデザインをする上で決めるべき「コンセプトカラー」についてお話します。
まず、コンセプトカラーというのは、目的に合わせて設定される色使いです。テーマカラーとも呼べるでしょう。
コンセプトカラーは「ベースカラー」「メインカラー」「アクセントカラー」の3色に分かれます。
はじめにこの3色を設定することで、デザインの全体的なバランスが取れます。また別ページへ移動しても、全体的なカラーが同じなので、統一されたスッキリしたデザインに見えます。
逆に言えば、突然色合いの印象が変わるとバラバラに見えてしまいます。敢えてそういう手法を使ってみることもできるでしょう。
このように、配色設定によってより良いウェブ制作が目指せます。
ベースカラー70%、メインカラー25%、アクセントカラー5%の割合にすると、美しい配色になります。
どんな配色にするのか、イメージがつかない方。そう言った場合は、配色の参考サイトを見てイメージに繋げてみましょう。
シンプルなカラーリングを紹介してくれるのは、こちらがおすすめです。
こちらの記事もおすすめです。
まずはウェブ全体のデザインで使う色を設定しましょう。
多くのウェブデザインでは可読性が求められるため、白やグレーのような、文字が読みやすい色を選ぶのがいいでしょう。
もちろん、背景に濃い色を設定することで得られる印象もあります。そういう意図であれば問題ありませんが、そうでない限りは避けましょう。
メインカラーでは、最もテーマに近い、主張したいカラーを選びます。
決めるときは、そのサイトのイメージやコンセプト、ターゲット層から着想を得るのが効果的です。
ロゴの色に近い色。ターゲットの年齢層が好きそうな色やトレンドの色。または、キーワードを形容する色を選んでもいいかもしれません。
ですが、必ずしもコンセプトから想起できる色通りにしなくてもいいのです。
可愛い印象にしたいからピンク、全体的に淡い色…という指定はないのです。コンセプトは押さえた上で、敢えて別の色を選択してみるのも大切です。
この色使いをマスターすることで、個性的な色使いができるでしょう。
少ない割合でも、印象づけるのがアクセントカラー。鮮やかな印象にしたいのであればメインカラーと反対色にしてみるといいでしょう。
こういった色相環で反対色を探してみましょう。
たとえば、クリスマスの賑やかな印象をアピールしたいとします。サンタクロースのレッド、ツリーのグリーン…など。まずはクリスマスのモチーフから選んでみましょう。
ですがこの選んでいる色ですが、円の対極にある「反対色」なのです。所謂クリスマスカラーというのは、実は非常に理にかなっているカラーリングなんですね。
色にはそれぞれ明度(色の明るさ)、彩度(色の鮮やかさ)があります。これらを組み合わせることで「トーン(色調)」で幅広い表現が可能になります。
こういった組み合わせ次第で、どんなイメージの色なのかを印象づけられるようになります。
例えば、小さな子どもに向けたおもちゃを紹介する販促ページを作るとします。「子ども」をターゲットにしているので、モノトーンの冷たい印象ではないですね。
そして子どものために買うのはその親御さんです。安全で安心な印象を与えるためには、鮮やかすぎるビビットカラーも避けた方がいいかもしれません。
ペールトーン、ライトトーンのような、明るくやわらかい印象の色をメインに添えましょう。その系統であれば、優しい印象のコンセプトにも添うことができます。
やわらかい色と言ってもたくさんあるので、ロゴから着想を得てみたり、使用する写真のトーンと合わせてもいいかもしれません。
たとえば、ロゴが赤いから同じ色相の薄いピンクを使う。赤ちゃんの写真を使うから、肌色と合わせてクリーム系の色を入れてみる。などなど、組み合わせや発想は自由です。
イメージから得た色を設定してみるとこんな感じに。
ベースはベージュがかったグレー。メインカラーとアクセントカラーは反対色ですが、明度を明るくしているのでごちゃごちゃした印象は避けています。
さらに、ワイヤーデザインで設置していた写真や図形に組み込んでみましょう。
すると大まかな一枚でこんなページになります。
薄いグリーンと鮮やかなピンクを使ったことで、あたたかみがありつつ、おもちゃの楽しい印象が伝わってくるデザインになりました。
このように、コンセプトカラーはサイトイメージ全体の印象に関わる重要な要素だということがわかりますね。
カラーリングはなんとなくで決めず、コンセプトに則って設定しましょう。そうすることでサイトの伝えたい情報が自然と伝わりやすくなります。
是非、サイト制作に役立ててみてください。
関連記事
久保田 里佳子 
櫻井 邦則 
