色彩心理を用いたランディングページの背景選び
ランディングページといえば自由に制作できますが、その反面デザインに悩みすぎることもあると思います。もちろんデザインに正解はありませんが、色の使い方を間違えてしまうとサイトから離脱される原因になる可能性もあります。
デザインで特に悩ましいポイントが「背景」。文字や画像を引き立てる背景ですが、何となく選んでいませんか。実は重要な役割がある背景色は適当に選んでしまうと、売り上げに大きく影響することがあります。そこで、ランディングページの背景選びのコツをご紹介します。色彩心理を用いて、上手に色使いできたLPこそがコンバージョンを上げることができます。
目次
LP背景の重要性
ランディングページの成果を出すためには、デザインが運命の分かれ道。
ユーザーの心を掴み、「購入したい」「登録したい」と思わせるランディングページに仕上げなければいけません。
基本構成が完璧で、ファーストビューも意識したのに、成果が出ないと悩んでいる方。もしかしたら、カラー設定に何か原因があるかもしれません。
例えば、紹介している商品に合わないカラーを採用している。極端に言えば、「美味しいイチゴを紹介します」と書いているのに背景カラーがブルーだと見る気が失せませんか。
LP訪問者が「思っていたのと何か違う」「見にくい」と感じると離脱の原因になります。
そう考えると、背景はランディングページがユーザーの心を掴むか、掴まないか。それくらい変わってくる重要なデザインだと分かります。
カラー設定の仕方
ランディングページのカラーは大きく分けて3つあります。
1つめは、ブランド色を伝える「メインカラー」。
2つめは、メインカラーを引き立て、アクセントをつける「サブカラー」。
3つめは、CVアクションを促す「コンバージョンエリアカラー」です。
コンバージョンエリアに関しては、さらに背景とCVボタンの2つの色分けをしなければなりません。背景は基本的にシンプルで大丈夫。その分、コンバージョンボタンを明るめの色にして、インパクトを残すことが大切です。
色と心理効果の関係性
それは、それぞれの色の心理効果を把握することで、表現したいイメージや与えたい印象に最適な色を選びやすくなるからです。
そこで、以下ではそれぞれの色と心理効果の関係性についてご紹介します。
1. 寒色と暖色
化粧品やエステなど女性向けに勧めたい場合、可愛らしい印象を残すピンクが定番。
思いやりや幸せ、恋愛などをイメージするピンクは、まさに女性に打って付けの色合い。また、リラックス効果があるため、自然と目に溶け込みやすいところもユーザーを離脱させないポイント。ただし、濃くなりすぎないように注意してください。淡くてクリームがかった優しい色合いに抑えることをおすすめします。
他にも、黄色や青も淡くすれば可愛いらしい印象になります。
2. 軽い色と重い色
保険会社、企業サイトのようなLPの場合、真面目で信頼できる印象を残したいと思います。そのような時は邪魔をせず、文章や画像を引き立ててくれる白色がおすすめ。サブカラーやCVエリアに明るめの黄色やオレンジなどを持ってくることでシンプルになりすぎず、バランスを取ることができます。
また、青は爽やかさ、知的さを感じさせ落ち着く色味。【白×淡い青】の組み合わせはシンプルで知的な印象をより高めます。そのため、LPの人気背景色の1つです。
3. 興奮色と沈静色
上品な食品、高級なジュエリーのLPの場合は、ラグジュアリーな印象を残したいと思うので黒色がおすすめ。黒色はホワイトカラーと同様に邪魔をせず、どんな色味ともあう万能カラーです。さらに、力強さ、かっこよさ、高級感を表現してくれます。アクセントにゴールドカラーを取り入れれば、よりリッチな印象を残すことができます。
4. 進出色と後退色
キャンペーン中や特典などを主張したい時は、赤色、オレンジ、黄色など明るめの色を取りいれ、原色系同士を組み合わせてみてください。また、値段を強調したい時はゴールド仕様にすれば、インパクトがあります。
赤色は感情的興奮を与えるので、購買意欲をかき立てる色として知られています。
オレンジは親しみや幸福感のある色。また、食欲を増進させることから食品系でよく使われています。
5. 膨張色と収縮色
膨張色とは、大きく見える色のことを指し、こちらに迫ってくるように感じさせるという特徴があります。
一方で、収縮色とは、小さく見える色のことを指し、遠くにあるように感じさせるという特徴があります。
具体的には、白色が膨張色であり、黒色は収縮色と呼ばれています。
6. 柔らかい色と堅い色
一方、寒色系の中でも明度が低く、彩度が高い色は堅い印象を与えやすいです。
上記のように、色と心理効果の関係性について把握しておくことで、与えたい印象に沿って、適切な色を選ぶことができるようになります。
例えば、高級感や重厚感を演出したい場合は、沈静色でもあり、収縮色でもある黒色を活用することで、簡単にそれらを表現できるでしょう。
代表的な色の使い方
無彩色の使い方
無彩色は、どのような有彩色とも組み合わせやすいという特徴があります。
そのため、無彩色を使用する際は、何かしら有彩色を1つと組み合わせてみると良いでしょう。
例えば、白色と黒色、グレー色などの無彩色は、有彩色との相性が非常に良いため、それらの色を使用する際は有彩色と組み合わせることがおすすめです。
同系色の使い方
同系色を使用する際は、以下のパターンを把握することがおすすめです。
・明度や彩度だけが異なる色の組み合わせ
・トーンは異なるが同じ色相の色の組み合わせ
・トーンは同じで隣接色の組み合わせ
同系色を使用する際は、まとまりを演出しやすいという特徴がありますが、抑揚のない雰囲気になりやすいという側面もあります。
そのため、同系色同士を組み合わせる場合でも、明度や彩度、トーンなどで違いをつくることもおすすめです。
類似色と相配色
色の選び方に関して、難しさを感じられている場合は、色相環を見てみて、類似色同士を組み合わせてみると良いかもしれません。
基本的に、色相環上で近い色を使用することで、扱いやすくなるという特徴があるため、色選びに手こずっている場合は、まず色相環を活用してみましょう。
メインカラーの選び方
・自分の製品のカラーが定まっていない
・こんな印象に仕上げたいがぱっと浮かばない
そんな方のために、デザイン構成の参考になる「印象別!カラー選び」をご紹介します。
色彩心理のもと、カラーによって様々な印象があります。ぜひ、参考にしてください。
□可愛らしい印象のLP
□真面目な印象のLP
□高級感ある印象のLP
□お得感ある印象のLP
人気のある背景色
画像や文章の邪魔をしない、白色や黒色が定番背景になります。また、グレーもランディングページでは使っている方が多い色味。上品で落ち着きのあるグレーは、どんなものでも合わせやすいです。濃すぎるグレーだと上品さが欠けるので、薄めのグレーを採用してください。
背景にはモノトーン色が人気ですが、全て白色や黒色で仕上げてしまうと、物足りない感じや、暗すぎる印象を残してしまいます。全体のバランスを崩さないように注意しながら、サブカラー、コンバージョンエリアカラーはなるべく目立つカラー取り入れてみましょう。
最後に
背景色の選び方によって、大きくコンバージョン率が変わると考えられます。
印象別におすすめのカラーをご紹介しましたが、作りたいLPのイメージをすることができましたか?まずは、全体のバランスも見ながら、あなたが思うカラー設定をしてみてください。ただし、最初の1回で終わらせるのではなく、ABテストを実施してください。
より良いランディングページを作り上げるために、何度も改善を繰り返して、最適なカラーを見つけ出してください。









へのお問い合わせはこちらから
