• EC
  • CREATIVE

June 26.2019

コンバージョン率を上げるLPカラー戦略!売れる見やすいLPデザインの色彩ルールとは

カラー戦略TOP

こんにちは、EC事業部のkimです。

あなたはモノを買う時、何を判断軸にしていますか。

機能性や効果効能でしょうか? 知名度? 価格? デザイン? 口コミ?

人によって、重要視することは様々なように思えますが、ある研究によると、なんと93%の人が「ビジュアル(外見)」で購入していることが明らかになったそうです。

さらに、そのうち84.7%もの人が「色」を購入の第一の理由としていることがわかりました。

それもわずか90秒間のうちに、購入するかどうかを判断しているというのです。

(参照元:Why All Sale Signs Are Red: The Science of Color in Retail

つまり、「色」は人の購買意欲に大きく影響していると言えます。

店の看板や商品のパッケージはもちろんのこと、WEB上のサイトやランディングページも例外ではありません。

どの色を使用するか、どのような配色にするかで、売上が大きく変わってくるため、色選びは重要なテーマとなってきます!

そこで今回は、ランディングページ(LP)をデザインする時の「色の選び方」についてご説明します。

(1)色自身が持っているイメージを考慮する

色には、元々持ち合わせているイメージがあります。

色のイメージ

このように、色自身が持っているイメージを考慮し、

・目的や用途に適した色を選ぶ
・伝えたい内容やイメージと、色の持つイメージを合わせる

ことが大切です。

(2)使用色は3色に絞る

デザイン初心者がやってしまいがちな失敗が、「色の使いすぎ」です。

以下の例をご覧ください。

キービジュ1

こちらはボタニカル成分配合のクレンジング商品のランディングページにおける、ファーストビューです。

・キャッチコピーは目立つピンク色
・価格はお得感のある黄色
・ボタンは安心感のある緑色

それぞれの色の使用に目的はあるのですが、バラバラとまとまらない印象で、結局どれも目立ちません。

色を使用する時に忘れてはいけないのは、以下の2点。

・情報をインプットしやすくする
・商品やブランドのイメージカラーを印象づける

そのために、サイトやランディングページでは、使用色を3つの色に絞ります。

・メインカラー
・ベースカラー
・アクセントカラー

それぞれの色の役割は、以下のようになります。

メインカラー

その名の通り、そのサイトやランディングページの主役となる色です。

イメージを決定する色となるため、いちばん重要な色と言っても過言ではありません。

会社やブランドで決まった色がある場合もあれば、そのページで訴求したい内容や、商品のイメージ、訴求するターゲットなどを考慮して決定する必要が生じる場合もあります。

ベースカラー

おもに背景となる色です。

視認性を考慮し、一般的には白や明るいグレー、ベージュなどが使用されることが多いです。

また、メインカラーの明度を上げた色を使用するのも、ページ全体にまとまりを持たすことができるため、おすすめです。

アクセントカラー

ピンポイントで注目させたい箇所に使用する色です。

購入ボタン等の重要な箇所に使用することから、「コンバージョンカラー」と呼ばれることもあります。

赤や黄色などの、元々注目度の高い色や、メインカラーの反対色を使用すると目立つため、ユーザーに注目させやすくなります。

しかし、これらの色は目立つ反面、ページ全体の世界観を損なう可能性も持ち合わせています。

そこで、ブランディングやページ全体の世界観を重視する場合は、メインカラーの濃色を使用したり、赤やメインカラーの反対色の彩度を下げた濃色を使用したりすることもあります。

なぜなら、注目度の高い色や反対色ほどは目立たないものの、高級感や信頼感を高める効果があるためです。

どの色をアクセントカラーに選ぶかは、そのページの世界観を左右する重要な色選びと言えますね。

以上をふまえ、メインカラー、ベースカラー、アクセントカラーの3つの色に絞ると、はじめのファーストビューの例は以下のようになります。

キービジュ

メインカラー・ベースカラーを緑色で統一することで、ボタニカル(植物)の世界観を表現し、アクセントカラーを反対色のピンク色にすることで注目度を高めています。

(3)3色の比率

最後に、メインカラー、ベースカラー、アクセントカラーのそれぞれの色の比率について解説します。

メインカラー:25%
ベースカラー:70%
アクセントカラー:5%

ベースカラーは背景などに使用することから、70%と最も面積が大きくなります。

最も面積が大きいからこそ、見ていても疲れない色、主張しすぎない色であることが重要なことがおわかりいただけるかと思います。

アクセントカラーは、ここぞという重要な箇所にのみ使用するため、面積としては最も少ない5%となります。

色選び例

サイトやランディングページをデザインするにあたり、使用する色が3色より増えることはもちろんあります。

ただし、バラバラとルールのない配色では、商品のイメージづけもできず、訴求力も上がりません。

以上の色選びの基本をおさえ、商品やターゲットにマッチした配色を行い、コンバージョンを高めるサイト・ランディングページをデザインしましょう。