BtoBサイトデザインで配色を考える、というとき、非デザイナーな方は何を基準に考えていいか困ってしまうものと思います。
BtoBサイトのデザインなら何色！ とは誰も断言してくれません。しかし色々なサイトを見てみて、何となく共通点があることは分かることでしょう。
BtoBサイトデザインの共通点、それは『信頼感』が抱けるようなデザインになっている、という事です。
しかし、信頼感を抱けるデザインであればいいのだ、と分かっても、実際にどんなデザインであれば信頼感が抱けるのか、ということは難しいはず。
そこで今回は、信頼感を構築するための配色にまつわる知識についてご紹介します。
今回紹介するのは、以下の通りです。
・3つのカラーの法則で統一感を出す
・色の性質を理解して適切に配色する
それぞれについて、ここから解説していきます。
まずサイトデザインの信頼感の前提として、「閲覧していて混乱することがない」という点が挙げられます。最初は落ち着いた配色だったのに、違うページに移った途端鮮やかな色合いばかりのページになってしまったら、「本当に同じサイトなのか？」と混乱してしまう事でしょう。
そんな混乱を防止するのが、統一感です。そして統一感を出すためには、３つのカラーの法則を利用するのが、デザイナーの常套手段となります。
では、3つのカラーの法則とはどんなものなのでしょう。それは、以下のカラーを最初に決めて、それを法則に従った比率で使用することで統一感ある美しい配色になる、というものです。
その3つのカラーとは、以下の通りです。
・ベースカラー
・メインカラー
・アクセントカラー
一つ一つ解説していきます。
ベースカラーとは、最も大きな面積を占める基本の色のことを指します。余白や背景などに使用することが多い、土台としての役割を担う色となります。
基本的にはあまり彩度を持たない、白から黒のどこかの色、というイメージで問題ありません。大体灰色か、それに近しい色、という事になりますが、他のメインカラー、アクセントカラーと兼ね合いで、明度の高い色になりがちです。
このベースカラーは、サイトデザインの70%を占める配色です。
名前の通り、サイトデザインにおける主役の配色です。デザイン全体の雰囲気を決定づける色となりますので、ブランディングについて、深く吟味した上で決める必要があります。つまり、ターゲットイメージが適切に定まっていないと、このメインカラー策定は難航する可能性が高いと言えるでしょう。
その一方で、そう言ったターゲティングがすでに定まっていて、そういった色をロゴなどに使用している場合は、サイトのロゴの配色をそのまま持ってくるパターンもよくあります。
また、文字コンテンツの可読性の兼ね合いから、明度を低くした色が適切である、というのが通説です。
このメインカラーは、サイトデザインの25%を占める配色です。
一番使用量が少ないながら、一番目立つ色。それがアクセントカラーです。
役割としては、全体を引き締めたり、ユーザーの目を引く、というものがあります。単調な流れが出来つつある場合に使用することで、デザイン全体にメリハリが出てきます。それだけに、使いすぎるなどで配色がイマイチになってしまう、諸刃の剣な側面もあります。
1色に限定する必要はありませんが、数が多ければ多いほど扱いに困る色でもあります。賑やかさを出せるBtoCサイトなどでは多色でも構いませんが、BtoBではあまりお勧めしません。
使い方の例として最も分かりやすいのは、コンバージョンボタン、例えば「お問い合わせ」ボタンや「トライアル」ボタンなどで使用することです。定期的に配置する関係で程よく全体にメリハリをもたらしつつ、一番目立たせたい要素が自然に目立つことになります。
このアクセントカラーは、サイトデザインのの5%を占める配色です。
色の性質を理解していないと、サイトデザインは感覚でしかとらえられません。外注して世界物としてあがってきたデザインに対して、フィーリングでしかものを言えないという事になってしまいます。
そんなときに知っておきたい色の知識として、今回は以下の二つを取り上げます。
・色彩心理学
・コントラスト
一つ一つ解説していきます。
色彩心理学とは、どんな色で人間はどのように感じるのか、といった学問のことです。
例えば赤は血を連想させる色のため、興奮をもたらし、かつ注目させる効果がある、などが、色彩心理学としては定番に当たります。
その中でも、BtoBサイトで利用できそうな知識として指摘できるのが、沈静色です。
沈静色とは名前の通り、見ると落ち着いてくる色のことです。寒色の明度が低い色のことを指し、青や緑などが例に挙げられます。
この沈静色を利用するのが、基本的なBtoBサイトデザインの定石です。しかし、BtoBサイトの全てが青や緑なのか、というとそうではありません。
ならば沈静色がBtoBサイトデザインに活用されているとはどういうことなのか。それは、もともとその企業が抱えていたブランディングに、沈静色を活用している、という事なのです。
それは、どういうことなのでしょうか。
例を挙げます。例えばラインですが、ラインは元々鮮やかな緑がブランディングカラーとしてあります。それがいきなりBtoBだから、といって青にしてしまえば、同一性が感じられず、顧客となる人々に気付いてもらえない可能性があります。
そのため、ラインのBtoB、例えばラインfor ビジネスなどは、アイコンが通常のラインのものよりも明度が下がっている、など、ブランドイメージを維持したまま、僅かに沈静色に寄せている、などの活用がなされています。
他にも例を挙げます。例えば楽天にもかつて楽天B2BというBtoB事業が存在しましたが、こちらでも目視では難しいくらいの青が、カラーピッカーなどを使用すると、実は元の色に比べて混ぜられていたりします。
このように、まずブランディングありき、という条件下で、沈静色による色彩心理学は活用されていることが分かります。
色の知識の大前提として、コントラストの活用が挙げられます。
コントラストとは、画像の明るい部分と食らい部分の差のことを指します。コントラストを強くする場合は、明るい部分をより明るくし、暗い部分をより暗くすることで、コントラストが強くなった、と評価できます。
このコントラストですが、弱めだと優しい感じ、強めだと画面が引き締まる効果があります。引き締まる、という言葉で恐らく連想されたと思うのですが、上記に記載した3つのカラーの法則における、アクセントカラーなども、このコントラストの力を借りています。
周囲に対してコントラストが強いものは、自然と目立たせることが出来ます。それを逆に利用すると、コンバージョンボタンは目立たせたいから、他に比べてコントラストが強い配色にしよう、などの判断が下せるようになります。
今回は、BtoBサイトデザインで利用できる配色の基本を説明しました。BtoBサイトデザインでは、信頼感を抱けるような配色が好ましい、という前提を述べた上で、その信頼感を構築するには、統一感や、色の性質を理解した敗色が必要である、と解説しました。
統一感を出すための色の知識として、3つのカラーの法則を紹介しました。3つのカラーの法則とは、ベースカラー、メインカラー、アクセントカラーをそれぞれ70%、25%、5%の比率で使用することで、配色にまとまりが出て、統一感が出る、というものでした。
色の性質を理解するためには、色彩心理学の沈静色とコントラストについてを紹介しました。沈静色は寒色の明度の低い色で、ブランディングイメージを損なわない範囲で活用されています。また、コントラストは目立たせたい部分で使用すると良い、と解説しました。
以上が、BtoBサイトデザインで利用できる、配色の基本となります。BtoBサイトデザインをどこかに発注する場合、ご活用いただければ幸いです。