ランディングページのコンバージョン率をあげる8つのカラー戦略
2022.3.11
ランディングページではファーストビューで魅力的な訴求をするためのテクニックや、画像や動画といったコンテンツ要素が重要視されがちですが、カラーの存在も忘れてはいけません。訪れたユーザーに対してカラーが与える効果は大きく、取り扱っている商品やサービスと親和性の高いカラーをテーマに設定すればCV率のアップが見込めます。こちらでは、ランディングページのCV率に影響を与える8つのカラーについて、具体例を挙げながら解説しています。
目次
はじめに
ランディングページにとって重要な要素は何かと尋ねられた場合、真っ先にファーストビューを思い浮かべる人も多いのではないでしょうか。
もちろん、ファーストビューはランディングページにおいて重要な要素です。
しかし、「カラー」もファーストビューと同じくらい重要な要素であるということを忘れてはいけません。
ランディングページにおいての色合いは、訪れたユーザーが商品やサービスに対して抱く印象を左右する役割があり、ニーズにマッチした適切なカラーデザインを施すことでCV率のアップが見込めます。
こちらでは、ランディングページのカラーがユーザーに与える印象や、色別によるイメージの演出効果について解説します。
ランディングページのカラーリングについて迷っている人、訪れたユーザーに対して「◯◯な印象を与えたい」とお考えの人は参考にしてみてください。
もちろん、ファーストビューはランディングページにおいて重要な要素です。
しかし、「カラー」もファーストビューと同じくらい重要な要素であるということを忘れてはいけません。
ランディングページにおいての色合いは、訪れたユーザーが商品やサービスに対して抱く印象を左右する役割があり、ニーズにマッチした適切なカラーデザインを施すことでCV率のアップが見込めます。
こちらでは、ランディングページのカラーがユーザーに与える印象や、色別によるイメージの演出効果について解説します。
ランディングページのカラーリングについて迷っている人、訪れたユーザーに対して「◯◯な印象を与えたい」とお考えの人は参考にしてみてください。
ランディングページのCV率に影響を与える8つのテーマカラー
ランディングページのCV率アップを図るためには、ユーザーに与えたいそれぞれの印象ごとにテーマカラーを使い分けることが大切です。
以下では、8つのカラーがそれぞれユーザーに与える印象について、参考例を紹介しながら解説します。
以下では、8つのカラーがそれぞれユーザーに与える印象について、参考例を紹介しながら解説します。
1.青色系
青は見た人の心を落ち着かせて誠実な印象を与えてくれるカラーであり、ユーザーが商品やサービスに対して清潔なイメージを持ってほしい場合に適しています。
青を主としたデザインは製品やサービスの効果・信用性をユーザーに主張したい時に効果的なので、上の参考例のように肌に直接ぬるタイプのスキンケア用品を紹介するランディングページとも相性が良いカラーです。
青を主としたデザインは製品やサービスの効果・信用性をユーザーに主張したい時に効果的なので、上の参考例のように肌に直接ぬるタイプのスキンケア用品を紹介するランディングページとも相性が良いカラーです。
2.赤色系
赤は見た人の注意を引くインパクトの強いカラーであり、気分を高めてくれます。そしてエネルギッシュにしてくれる効果もあるので、上の参考例のような食べ物を取り扱っているランディングページとよく合います。
また、赤は商品やサービス内容に関係なくクリスマスや年末年始といったシーズンでもよく使われる商用性の高いカラーなので、キャンペーンを実施している時や新作を発表した時など、特別感をアピールしたい時に効果的です。
また、赤は商品やサービス内容に関係なくクリスマスや年末年始といったシーズンでもよく使われる商用性の高いカラーなので、キャンペーンを実施している時や新作を発表した時など、特別感をアピールしたい時に効果的です。
3.緑色系
緑は自然や健康的なイメージを与えてくれるカラーであり、見た人の気分を落ち着かせてくれる効果があるので、ランディングページにおけるユーザーに与える役割としてはブルーと少し似ています。
ただし、上の参考例のように食品を紹介している場合は青よりも緑の方が自然な印象を与えてくれるので、無添加や有用成分の含有量といった訴求力をグッと引き上げることが可能です。
ただし、上の参考例のように食品を紹介している場合は青よりも緑の方が自然な印象を与えてくれるので、無添加や有用成分の含有量といった訴求力をグッと引き上げることが可能です。
4.黄色系
黄色は見た人をポジティブで明るい気持ちにさせてくれる効果があり、赤に次いでインパクトの強いカラーでもあるので、上の参考例のように訪れたユーザーに対して「キレイになりたい」や「痩せたい」といった、何らかの目的意識を芽生えさせることができます。
また、黄色は高彩度なカラーなので、他のカラーと組み合わせて使えば、独特なコントラストでユーザーの印象に残るデザインを仕上げることも可能であり、テーマカラーを1つに絞れないという局面で役立つお助けカラーです。
また、黄色は高彩度なカラーなので、他のカラーと組み合わせて使えば、独特なコントラストでユーザーの印象に残るデザインを仕上げることも可能であり、テーマカラーを1つに絞れないという局面で役立つお助けカラーです。
5.ピンク系
ピンクは女性的で可愛らしい印象を与えてくれる効果があるため、化粧品やファッションアイテム、エステといった女性向けの商品やサービスを取り扱っているランディングページとの相性が良いです。
ただし、ピンクはバレンタインといったイベントシーズンにチョコなどの甘いお菓子と紐付けられて使われる機会が多く、見た人に対して「甘いものを食べたい」という欲望を刺激するカラーでもあるため、ダイエット系のランディングページでは裏目に出てしまうので注意しましょう。
ただし、ピンクはバレンタインといったイベントシーズンにチョコなどの甘いお菓子と紐付けられて使われる機会が多く、見た人に対して「甘いものを食べたい」という欲望を刺激するカラーでもあるため、ダイエット系のランディングページでは裏目に出てしまうので注意しましょう。
6.オレンジ系
オレンジは温かさを象徴する親しみやすいカラーです。赤色と黄色それぞれの特性を持ち合わせており、見た人の不安を取り除いてリラックスさせると同時に食欲を刺激させる効果もあります。
上の参考例のように、オレンジは落ち着いた雰囲気で食事を提供する飲食店のランディングページに最適ですが、活気を与えてくれるフレンドリーな性質をもった彩度の高いカラーでもあるので、転職・求人系のランディングページともマッチングがいいでしょう。
上の参考例のように、オレンジは落ち着いた雰囲気で食事を提供する飲食店のランディングページに最適ですが、活気を与えてくれるフレンドリーな性質をもった彩度の高いカラーでもあるので、転職・求人系のランディングページともマッチングがいいでしょう。
7.白色系
白色はユーザーに対してスタイリッシュで洗練された印象を与えてくれるカラーなので、ビジネス系のランディングページで使われることが多いですが、上の参考例のように思い切ったデザインを打ち出したい時にも効果的です。
様々な印象を与えるカラーの効果を逆手に取り、あえて色を付けないという選択肢は競合性が高い分野のランディングページへ訪れたユーザーにとって、新鮮に感じられるかもしれません。
様々な印象を与えるカラーの効果を逆手に取り、あえて色を付けないという選択肢は競合性が高い分野のランディングページへ訪れたユーザーにとって、新鮮に感じられるかもしれません。
8.黒色系
黒は他の色とくらべて重い雰囲気が出てしまいますが、見た人に対して力強く高級感を感じさせる効果があるカラーなので、製品やサービスのブランド性を訴えたい場合や、ユーザーに程よい緊張感を与えたいときに有効です。
黒はバックカラーとして活用すれば、他の色と組み合わせやすい性質があるので、他の色と比べて独創性の高いランディングページをデザインすることが可能です。しかし、同時にプランティング力が問われるカラーともいえます。
黒はバックカラーとして活用すれば、他の色と組み合わせやすい性質があるので、他の色と比べて独創性の高いランディングページをデザインすることが可能です。しかし、同時にプランティング力が問われるカラーともいえます。
CV率をあげるためにはボタンの配色も重要
ランディングページにおいて、ボタンが目立つ配色であるかどうかは大事なポイントです。ボタンがページのテーマカラーに埋もれてしまわぬよう、対象的なカラーを使用しましょう。
以下の例を参考にして解説します。
以下の例を参考にして解説します。
ボタン配置の重要なポイント
こちらのランディングページは、ボタンが他のカラーと被らないように配慮されたデザインであり、オレンジという彩度の高いカラーを使用しているので、ユーザーから見てもどこにボタンが設置されているか分かりやすい理想的なモデルです。
さらに、ユーザーが購入しようとする気持ちをプッシュしてくれるのも、魅力的な訴求テキストがボタンに設定されている点も参考にしたいポイントです。
また、購買意欲の高いユーザーが訪れた際の利便性を考慮し、ファーストビューにあたるページの上部にボタンが置かれていると、CVに繋がりやすいとされています。
さらに、ユーザーが購入しようとする気持ちをプッシュしてくれるのも、魅力的な訴求テキストがボタンに設定されている点も参考にしたいポイントです。
また、購買意欲の高いユーザーが訪れた際の利便性を考慮し、ファーストビューにあたるページの上部にボタンが置かれていると、CVに繋がりやすいとされています。
まとめ
ランディングページのカラーは、取り扱っている商品・サービスと関連性の深いテイストのものを使用すれば魅力が一層引き立つので、結果的にCV率のアップに貢献してくれる重要な要素です。
カラーは見た人に与える効果がそれぞれ異なるので、まずはランディングページに訪れたユーザーに対して、どのような印象を与えればアピールしている商品や、サービスが欲しいと感じてくれるかについて考えた上で選定しましょう。
また、その際はボタンの配色がランディングページのテーマカラーと被らないように注意してください。
カラーは見た人に与える効果がそれぞれ異なるので、まずはランディングページに訪れたユーザーに対して、どのような印象を与えればアピールしている商品や、サービスが欲しいと感じてくれるかについて考えた上で選定しましょう。
また、その際はボタンの配色がランディングページのテーマカラーと被らないように注意してください。