LPの色選びでコンバージョン率を上げる！知っておきたいコツや注意点

商品やサービスの魅力を伝えるLPは、色彩心理を意識したカラーで仕上げることが重要です。設定したターゲット層に合わせて、伝えたいイメージに適した色彩を選べるようにしましょう。LPデザインの基本となる色の選び方のコツや注意点を解説します。

LPにおける色の重要性

商品やサービスの魅力を伝える目的で用いられるLPでは、ページにアクセスした瞬間にユーザーに対していかにポジティブな印象を与えられるかが重要です。LP上でも商品やサービスに対する印象は、人間同士の出会いと同じように、ファーストビューである程度決まってしまいます。

ユーザーの購買意欲を高めコンバージョンにつなげられるLPにするためには、配色に気を配る必要があります。色使いによって大切な情報が見づらかったり、思っていた雰囲気と違うと感じられてしまったりすると、ページ離脱の原因となりかねません。

ブランドや商品のイメージを簡潔に伝えるためにも、色の効果を効果的に利用することが大事です。

LPに必要な3つの色

LPの配色に関して知っておきたいのが、次の3つの色です。

1. メインカラー
2. ベースカラー
3. コンバージョンカラー

見やすく効果的に商品の魅力を伝えるためには、使う色を3つに絞ってLPを仕上げるのがおすすめです。使用する色味が多くなると、騒がしいイメージになってしまい、閲覧しているユーザーが目当ての情報を見つけにくくなってしまう可能性があります。

3色の理想的な比率は、メインカラー25％・ベースカラー70％・コンバージョンカラー5％程度とされています。全体のバランスを見ながら、ユーザーにとって見やすく、商品を魅力的に見せる配色を検討しましょう。

1.メインカラー

メインカラーとは、LPのイメージを決定づける重要な色です。伝えたいメッセージやターゲットに合わせて選ぶのが一般的です。

落ち着いた印象にしたい場合は青や緑、明るいカジュアルさを見せたい場合は黄やオレンジ、高級感を演出したい場合は黒や紫などといった選び方ができます。そのほか、企業やブランドのイメージカラーを設定することも多いです。

LPの印象に関わるメインカラーは、あまりにも明度が高すぎると、文字が読みにくくなってしまう恐れがあります。ユーザーの読みやすさを考慮したうえで、商品やサービスを魅力的に見せられる色味を選びましょう。

2.ベースカラー

LPの有色部分の7割という大きな面積を占め、LP全体に使用されるベースカラーには、背景として馴染む色を選ぶとよいでしょう。ベースカラーは文字やコンテンツ間の余白にも用いられるため、明度の高い色や淡い色の使用頻度が高いのが特徴的です。

メインカラーが先に決定している場合は、2つの色の相性を見ながら組み合わせを検討しましょう。

LPを無難で落ち着いた雰囲気でまとめるには、メインカラーとベースカラーに同系色を用います。その場合、ベースカラーにはメインカラーの明度を上げた色を使用するのが一般的です。

LPの主役であるメインカラーを邪魔しない色選びを心掛けるのが、ベースカラー設定のコツだといえるでしょう。

3.コンバージョンカラー

コンバージョンカラーとは、LPのとくに注目してほしい部分にピンポイントで用いる色です。LPの場合はユーザーに商品やサービスの魅力を伝え、購入や申し込みなどのコンバージョンにつなげるのがページの目的です。

必然的にコンバージョンボタンは、メインカラーとベースカラーの両方と組み合わせた場合に目をひく色味である必要があります。赤や黄色などの注目を集めやすい色や、メインカラー・ベースカラーの反対色を用いるのが効果的です。

LP自体にメリハリをもたせたい場合や、にぎやかな印象をもたせたい場合にもコンバージョンカラーが役立つでしょう。ただし、使用率は5％程度にとどめ、ページ全体のまとまりを崩してしまわないように心掛けてください。

LPデザインに役立つ色のイメージ

LPデザインをする際には、色が元々もっているイメージを正しく把握しておくことが大事です。今回は、数ある色味のなかから大きく次の3つのグループに分けて、それぞれの色が与える印象を解説します。

• 暖色（赤・黄色・オレンジ）
• 寒色（青・緑・紫）
• その他（白・黒・グレー）

自社商品やサービスの魅力を余すことなく伝えるLPに仕上げるために、色に関する知識を付けておきましょう。

暖色（赤・黄色・オレンジ）

名前のとおり暖かいイメージを連想させる暖色は、Webサイト上でも目をひきやすい色が多いため、LPのコンバージョンカラーとして多く用いられています。各色の与える主なイメージは、次のとおりです。

• 赤：重要・注目・危険・愛・情熱・生命力・勝利・活動的・成功
• 黄色：警戒・注意・希望・明るさ・幼さ・好奇心・カジュアル
• オレンジ：温かい・親しみやすい・庶民的・食欲・開放的・楽しさ

赤は神経を興奮させる色であり、元気や意欲を与える一方で、闘争心を掻き立てるような効果もあります。

黄色は快活で明るいイメージがメインですが、少々カジュアルさや幼さを演出する場合にも利用できるでしょう。

オレンジは食欲を増進させる色として有名です。例えば、温かく開放的な気分で食事を楽しみたい場合にはオレンジ色のライトが食卓に用いられます。

寒色（青・緑・紫）

冷たいイメージのする寒色は、落ち着いた印象を与えることができる色として、ビジネスシーンでは重宝する色味です。青・緑・紫のもつ色のイメージをまとめました。

• 青：知的・爽やか・誠実・信頼・清潔・安全・冷静
• 緑：調和・ナチュラル・自然・健康・安らぎ・安全・平等
• 紫：高級・上品・ミステリアス・伝統・不安・感受性

暖色系の明るく情熱的な印象と比べると、寒色系には冷静で落ち着いた要素が多いことがわかります。

青色は企業のコーポレートカラーとしても人気で、知的で信頼のできるクリーンなイメージを与えられる色です。

緑は木々の葉を連想させる色として、ナチュラルや健康などのポジティブなイメージで用いられることが多いのが特徴です。

紫は高級感を与えられる色味でありながら、どこか不安定でミステリアスな印象を与えます。

その他（白・黒・グレー）

暖色と寒色のほかに、基本色として白・黒・グレーのもつイメージを確認しておきましょう。

• 白：清潔・軽やか・無垢・純粋・空白・虚無・神聖
• 黒：高級感・落ち着き・死・沈黙・暗闇・恐怖
• グレー：控え目・洗練・男性的・上品・あいまい・憂鬱・不安

白は純粋無垢な美しさを与えられる色として、LPでもベースカラーに多く用いられています。

黒は周りをひきしめる効果があるため、高級感や落ち着きをプラスしたい場合に役立つ色です。

グレーは濃淡の違いによって、さまざまな印象を与えられる色で、活用の範囲が広いのが特徴的です。

業種別おすすめのLP色

色の与える印象の基本的な部分が理解できたところで、業種別に頻繁に用いられる色味についてご紹介します。今回は、次の4つの異なる業種に関しておすすめの色味を知っておきましょう。

• 飲食業は食欲をそそる暖色系
• 教育系は落ち着きのある寒色系
• 医療系はシンプルでナチュラルな色
• 製造業はアイテムに合わせた色

自社と全く一致する業種でなくても、色選びのやり方やコツがわかるようになるはずです。

飲食業は食欲をそそる暖色系

飲食業であれば、ユーザーの食欲をそそる色味をLPに採用するのが基本です。ホカホカで美味しそうなメニューを取り扱っているのに、LPの背景や全体的な色味が寒色系だと、商品の良さが伝わらずユーザーの食欲が減退してしまう可能性があります。

思わず見入ってしまう魅力的なLPに仕上げるためには、食べ物と相性が良い暖色系の色をLPに使うようにしましょう。もちろん商品がアイスクリームのように冷たいものであれば、寒色系の色味を利用しても構いません。

取り扱っている商品の特徴に合わせたうえで、ユーザーの食欲を刺激するポイントを忘れないようにしてください。

教育系は落ち着きのある寒色系

教育系LPの知的で落ち着いたイメージを演出するには、寒色系がおすすめです。デザインが派手すぎたり、色味が明るすぎたりするとバタバタと落ち着かないイメージを連想させてしまうため、教育系の商品やサービスには不釣り合いです。

知性や落ち着きを感じさせる青色系統や、成長をイメージさせる緑色を取り入れるとよいでしょう。子供向けの教育系商品は本人ではなく、両親が検討するケースも多いため、見る人の立場に合わせたLP設計が求められます。

医療系はシンプルでナチュラルな色

医療系のLPでは、伝えたいメッセージがシンプルに伝えられるナチュラルな色を選ぶとよいでしょう。清潔感と信頼感を演出する白や青、ナチュラルさをアピールできる緑や茶色などが人気です。

淡いベージュや主張の強くないパステルカラーなども、丁寧で信頼できるイメージが求められる医療系のLPに適しています。反対にビビットな色味を多用してしまうと、医療系のイメージからほど遠くなり、信頼できる商品やサービスを提供している企業という印象が損なわれてしまう可能性があるため注意です。

製造業はアイテムに合わせた色

製造業は取り扱う商品やサービスに合わせて、LPの配色をしていきます。ひとえに製造業とはいっても、商品の特徴やコンセプト・ターゲットも多岐にわたります。

製造業の場合は、設定したターゲット層と商品コンセプトに合わせてLPの色を検討するようにしましょう。傾向としては、日用品であれば明るめのカラー、非日用品であれば落ち着いた暗めのカラーが用いられることが多いようです。

似たような商品を扱っている場合でも、誰に向けたLPであるかによって、配色やデザインは大きく異なります。徹底したターゲティングを実施したうえで、商品のセールスポイントを考慮し、魅力が伝わる配色を見つけてみてください。

LP色選びのポイント3つ

LPの色選びの際には、次の3つのポイントを心掛けましょう。

1. 同業他社を研究する
2. メインカラーを活かす配色を考える
3. ブランドやコンセプトに合わせる

使いたい色が決まったところで、戦略無しにむやみに配色してしまうのでは、思ったような効果が上げられません。コンバージョン率の高いLPを誕生させるために、押さえておきたいコツをご紹介します。

1.同業他社を研究する

LPの色選びに有効な1つ目のポイントは、同業他社のサイトを研究することです。消費者は特定の商品やサービス業種において、無意識に色のイメージを結びつけてしまっていることが多いです。

例えば医療用コンタクトレンズであれば青や緑、イタリア料理店であればオレンジやイタリア国旗を連想させる赤・緑・白などが挙げられます。

あまりにも独特で主張が強い色味にしてしまうと、他社と比較した際に信頼感が薄れる可能性が高いです。

同じ業種やジャンルで商売をおこなっているライバルと同系の色味を意識することで、LPを見るユーザーにすんなりと受け入れてもらえる可能性が上がります。

ただし、同業他社のLPを参考にするのはよいですが、あまりにも似すぎてしまうとオリジナリティを出せなくなる点には注意しましょう。

2.メインカラーを活かす配色を考える

LPの主役となるメインカラーは、ベースカラーとコンバージョンカラーを配色する際の基準となります。メインカラーを商品やターゲットに合わせてよく検討したうえで、3色の配色に取りかかりましょう。

メインカラーを緑に設定する場合でも、青みがかった緑やパステル風味な緑・暗めの緑など濃淡や明暗の違いによって与える印象が大きく異なります。まずはメインカラーを設定し、メインカラーを中心にLP全体の配色を検討していきます。

3.ブランドやコンセプトに合わせる

ブランドやコンセプトに合わせて、伝えたいメッセージを込めた色選びをするのも手です。配色デザインは視覚的に強いインパクトを残すことができる要素であるため、LPを見たユーザーを瞬時にひきつける重要な要素となります。

ファーストビューでよい印象を持ってもらえれば、ページ離脱をされてしまう可能性が下がり、取り扱っている商品やサービスの魅力への関心も高まるでしょう。自社やブランドに対して消費者にどのようなイメージを抱いて欲しいのかを分析し、メッセージ性のある色味を選んでみてください。

LP色選びの注意点

最後に、LPの色選びで注意しておきたい点を3つご紹介します。

• CVボタンの色は慎重に検討する
• 色の直感的な印象を考慮する
• 配色する色を限定する

成果を出しているLPは、商品やサービスの魅力を十分に伝えられる配色の工夫がなされています。いくつか他社のLPデザインを見比べて、特徴的な点や工夫が凝らされている点を探してみるのもよいでしょう。

注意点を押さえたうえで、上手くコンバージョンにつなげる配色を検討するのがポイントです。

CVボタンの色は慎重に検討する

LPの成果に直結する要素であるCV（コンバージョン）ボタンの色を、単なる見た目の美しさだけで選んでしまうのは間違いです。ユーザーがCVボタンであると認識しやすく、かつクリックするのに心理的抵抗が少ない色味を採用する必要があります。

安売りやセールをイメージさせる赤色のコンバージョンボタンは、消費者にコスト的なメリットを感じてほしい時に有効だとされています。ただし、必ずしも赤いコンバージョンボタンの成果が高いわけではありません。

大手オンラインショッピングサイトがコーポレートカラーのオレンジ色をボタンに用いているように、成果を出せる色の正解はサイトやLPごとに異なります。自社のLP全体のまとまりや配色のバランスを考慮し、コンバージョンボタンの色を決定しましょう。

色の直感的な印象を考慮する

LPの配色は取り扱う商品やブランドのイメージ、伝えたいメッセージによって自由度高くデザインできます。しかし、デザイン重視で色本来のイメージを無視した配色は、ユーザーを混乱させる原因となりかねません。

極端な例ですが、信号機の色の意味がすでに交通ルールとして浸透している状態で、新たに赤が「進め」青が「止まれ」の信号機が登場した場合を考えてみましょう。いくら頭では理解しようとしても多くの人が混乱し事故が多発すると予想されます。

色ごとの印象を把握したうえで、意図的に異なる意味をもたせたい場合は、ユーザーを混乱させることがないかを確認してみてください。

配色する色を限定する

LPに配色する色が多すぎてしまうと、内容に集中しにくいデザインに仕上がってしまう可能性があります。理想的なLPの配色数は、先にもご紹介したメインカラー・ベースカラー・コンバージョンカラーの3色程度です。

全体的なデザインのバランスを取るためにも、使う色は限定するのがよいでしょう。もし4色以上を用いてLPを仕上げたい場合は、ベースカラーの比率はそのままに、メインカラーまたはコンバージョンカラーの比率を下げるようにします。

追加する色は全体的な統一感を意識し、あまりにも主張の強い色味は避けるのが無難です。

LPの色にこだわって効果を上げよう！

LPのコンバージョン率を上げるために忘れてはいけない要素として、配色デザインが挙げられます。用いる色を決定する場合には、メインカラー・ベースカラー・コンバージョンカラーの適切な割合を意識しましょう。

とくにコンバージョンカラーは、LPの直接的な利益につながる重要なポイントです。デザインのバランスを見ながら、いくつかの色味をテストして最終的な配色を決めるようにしてください。

本格的なLPのコンバージョン率改善には、専門業者を利用していちからLPを制作するのも手です。LP制作会社選びに迷ったら、まずはいくつかの気になる業者に相見積もりを取ってみましょう。

弊社クロスバズの提供するランディングページ制作サービスでは、マーケティング戦略と集客施策を駆使して、“売れるLP”を制作しています。詳細が気になった方は、ぜひ無料のお問い合わせをご利用ください。

お問い合わせはこちら

関連記事：LPのコンバージョン率はどのくらいが目安？低い要因や改善のポイントを解説