26.2019コンバージョン率を上げるLPカラー戦略!売れる見やすいLPデザインの色彩ルールとはこんにちは、EC事業部のkimです。あなたはモノを買う時、何を判断軸にしていますか。口コミ?人によって、重要視することは様々なように思えますが、ある研究によると、なんと93%の人が「ビジュアル(外見)」で購入していることが明らかになったそうです。そのうち84.7%もの人が「色」を購入の第一の理由としていることがわかりました。それもわずか90秒間のうちに、購入するかどうかを判断しているというのです。Retail)つまり、「色」は人の購買意欲に大きく影響していると言えます。店の看板や商品のパッケージはもちろんのこと、WEB上のサイトやランディングページも例外ではありません。どの色を使用するか、どのような配色にするかで、売上が大きく変わってくるため、色選びは重要なテーマとなってきます!そこで今回は、ランディングページ(LP)をデザインする時の「色の選び方」についてご説明します。(3)3色の比率(1)色自身が持っているイメージを考慮する色には、元々持ち合わせているイメージがあります。・目的や用途に適した色を選ぶ・伝えたい内容やイメージと、色の持つイメージを合わせることが大切です。(2)使用色は3色に絞るデザイン初心者がやってしまいがちな失敗が、「色の使いすぎ」です。以下の例をご覧ください。こちらはボタニカル成分配合のクレンジング商品のランディングページにおける、ファーストビューです。・ボタンは安心感のある緑色それぞれの色の使用に目的はあるのですが、バラバラとまとまらない印象で、結局どれも目立ちません。色を使用する時に忘れてはいけないのは、以下の2点。・情報をインプットしやすくする・商品やブランドのイメージカラーを印象づけるそのために、サイトやランディングページでは、使用色を3つの色に絞ります。・アクセントカラーそれぞれの色の役割は、以下のようになります。メインカラーその名の通り、そのサイトやランディングページの主役となる色です。イメージを決定する色となるため、いちばん重要な色と言っても過言ではありません。会社やブランドで決まった色がある場合もあれば、そのページで訴求したい内容や、商品のイメージ、訴求するターゲットなどを考慮して決定する必要が生じる場合もあります。ベースカラーおもに背景となる色です。視認性を考慮し、一般的には白や明るいグレー、ベージュなどが使用されることが多いです。メインカラーの明度を上げた色を使用するのも、ページ全体にまとまりを持たすことができるため、おすすめです。アクセントカラーピンポイントで注目させたい箇所に使用する色です。購入ボタン等の重要な箇所に使用することから、「コンバージョンカラー」と呼ばれることもあります。赤や黄色などの、元々注目度の高い色や、メインカラーの反対色を使用すると目立つため、ユーザーに注目させやすくなります。これらの色は目立つ反面、ページ全体の世界観を損なう可能性も持ち合わせています。そこで、ブランディングやページ全体の世界観を重視する場合は、メインカラーの濃色を使用したり、赤やメインカラーの反対色の彩度を下げた濃色を使用したりすることもあります。注目度の高い色や反対色ほどは目立たないものの、高級感や信頼感を高める効果があるためです。どの色をアクセントカラーに選ぶかは、そのページの世界観を左右する重要な色選びと言えますね。以上をふまえ、メインカラー、ベースカラー、アクセントカラーの3つの色に絞ると、はじめのファーストビューの例は以下のようになります。メインカラー・ベースカラーを緑色で統一することで、ボタニカル(植物)の世界観を表現し、アクセントカラーを反対色のピンク色にすることで注目度を高めています。最後に、メインカラー、ベースカラー、アクセントカラーのそれぞれの色の比率について解説します。メインカラー:25%ベースカラー:70%アクセントカラー:5%ベースカラーは背景などに使用することから、70%と最も面積が大きくなります。面積が大きいからこそ、見ていても疲れない色、主張しすぎない色であることが重要なことがおわかりいただけるかと思います。アクセントカラーは、ここぞという重要な箇所にのみ使用するため、面積としては最も少ない5%となります。サイトやランディングページをデザインするにあたり、使用する色が3色より増えることはもちろんあります。バラバラとルールのない配色では、商品のイメージづけもできず、訴求力も上がりません。以上の色選びの基本をおさえ、商品やターゲットにマッチした配色を行い、コンバージョンを高めるサイト・ランディングページをデザインしましょう。