色でCVが向上する！？成果を狙うための配色アイディア

近年のWebマーケティングではすっかりお馴染みとなったCV（コンバージョン：成果）。
例えばコーポレートサイトでは最終的なお問い合わせをサイトのCVとし、そのCVを計測（CVR：コンバージョン率）するためにボタンなどを設置しているかと思います。

このCV率を上げるには、どこにどんな要素を設置するのか？といったサイト設計が重要なのはもちろんのこと、デザインとの相乗効果も軽視できません。

今回はノーコードCMS「BiNDup」のデザインディレクターより、配色的な側面から、CV率向上のためのテクニックをご紹介したいと思います。

→デザインアレンジも簡単。ノーコードCMSのBiNDupを30日間トライアル

目立つ色を使用する

例えばお問い合わせをCVに設定した場合、その動線となるお問い合わせボタンが目立てばCV率も向上する可能性があります。
そして単純な話ですが、そのお問い合わせボタンが目立つ色であるとより効果的であるといえます。
ただ一言に目立つ色といっても幾つか方法があります。

ビビット・ブライト・ストロングトーンなどの強い色を使用する

実際に使用できるかはサイト全体の雰囲気にもよりますが、ビビットトーン、ブライトトーン、ストロングトーンなどといった彩度が高めの色味は発色が良いため目立ちやすい色といえます。

配色トーンのグループ

進出色（膨張色）を使用する

進出色とは色の錯覚の一つで、飛び出て見える色のことを言います。
簡単にいうと赤や橙、黄などの暖色系、白といった明度の高い色のことを言いますが、これらの色は飛び出て近くにあるように感じられるため目につきやすい色ともいえます。
逆に沈んで見える後退色（青・紫などの寒色系、濃い色、黒など）と組み合わせるとより差が際立ちます。

進出色と後退色の比較。進出色の赤の方が後退色の深緑に比べ目立つ印象を受ける

メインカラーとの補色（反対色）を使用する

こちらもよくある手法ですが、メインカラーとは逆の色味を使用すると補色の関係でより際立って見える効果があります。
例えばコーポレートカラーが青色だった場合、黄色のあたりが補色になります。前述の進出・後退色と組み合わせるとより効果的です。

補色による色の効果。また地色の青に対しボタンの黄色は進出・後退色の関係にもなっている

→デザインアレンジも簡単。ノーコードCMSのBiNDupを30日間トライアル

他の色味を調整する

基本的には前述の色味を使用するのが簡単ではありますが、コーポレートカラーやカラールールによっては使用できる色に制限が出てしまうことがあるかと思います。
その場合は他の色を調整することで、主張したい要素を相対的に強めることもできます。

重要度の低い要素の主張を抑える

サイト上にはCV以外の導線が多数存在するかと思いますが、それらが同じような色だとどうしても重要な要素が視覚的に埋もれてしまいます。
そこで重要なCV要素以外の導線の色を控えめに調整し、CV要素が目につきやすくさせます。簡単な方法は無彩色への調整をおすすめします。

CV要素以外を無彩色に調整した場合の比較。後者の方がCV要素に視線が移りやすい

さらに目立つ調整をする必要があれば、ボタンの背景色を透明にするいわゆる「ゴーストボタン」にする方法も有効だと思います。

ゴーストボタンにするとさらに視覚的な差が生まれる

メインカラーと同系色でまとめる場合

前述まではCV要素とメインカラーを別の色にすることでCV要素の重要性をコントロールする方法でした。
しかしサイトのデザインによっては、全く別の色を使用することが困難なこともあるかと思います。
そうした場合には背景色の彩度を抑えるか、または無彩色を使用すると強調したい要素を残しつつ、全体の雰囲気のまとまりもよくなります。
CV要素にビビットやストローングトーン系の色を使用した時に、背景色はペールトーンやグレイッシュトーンなどがおすすめです。

彩度の低いトーンと組み合わせることで同系色でも要素が埋もれ難くなる

→デザインアレンジも簡単。ノーコードCMSのBiNDupを30日間トライアル

いかがでしたでしょうか。
全てを調整するのは難しいところもあるかもしれませんが、部分的に調整するだけでも効果を得られると思いますのでぜひお試しください。
デザイン自在！BiNDupを無料で試してみる