ランディングページ（LP）をデザインするとき、「どんな色を使えばいいのか？」と悩むことは少なくありません。
ブルーなら信頼感が出る。
赤なら目立つ。
グリーンなら安心感がある。
ピンクなら女性向け。
このように色にはそれぞれイメージがありますが、LPの配色は単純に「好きな色」や「業界でよく使われている色」を選べばよいわけではありません。
LPでは、商品やサービスのイメージを伝えるだけでなく、
「どこを見てほしいのか」
「どの情報が重要なのか」
「どこをクリックしてほしいのか」
といった情報の優先順位を、色によって分かりやすくすることも重要です。
色を使いすぎると情報が散らかって見えますし、反対に色の差が少なすぎるとCTAや重要な情報が埋もれてしまいます。
この記事では、LPを制作するときに押さえておきたい配色の基本と、成果につながる色選びの7つのポイントを分かりやすく解説します。
■ LPデザインで配色が重要な理由
LPを開いたユーザーが最初に認識するもののひとつが「色」です。
文章を詳しく読む前でも、
「高級そう」
「かわいい」
「安心感がある」
「元気な印象」
「シンプルで信頼できそう」
といったページ全体の雰囲気は、色によってある程度伝わります。
例えば同じ化粧品でも、ホワイトと淡いブルーを中心にすれば清潔感のある印象になります。
ブラックとゴールドなら、高級感のある印象を作りやすくなります。
ピンクやベージュを使えば、柔らかく親しみやすい印象になります。
つまり配色は、単にLPを「きれいに見せる」ためのものではありません。
商品やサービスのイメージをユーザーに伝え、さらにページ内の情報を整理する役割があります。
■ LPの配色で意識したい3つのカラー
LPの配色を考えるときは、使用する色を大きく3つに分けると整理しやすくなります。
「ベースカラー」
「メインカラー」
「アクセントカラー」
です。
ベースカラーはページの背景など、最も広い範囲で使用する色。
メインカラーは見出しや装飾など、ブランドや商品の印象を作る中心的な色。
アクセントカラーはCTAや重要な情報など、特に目立たせたい部分に使う色です。
例えば、
ベースカラー：ホワイト
メインカラー：ネイビー
アクセントカラー：オレンジ
という組み合わせなら、全体的には落ち着いた印象を保ちながら、CTAだけを目立たせることができます。
LPの色選びで迷ったときは、最初から何色も選ぶのではなく、この3つを基本に考えてみましょう。
■ 成果につながるLP配色7つのポイント
■ ① 色を使いすぎない
LPを目立たせようとして、赤・青・黄色・緑・紫など、たくさんの色を使用するケースがあります。
しかし、色を増やせば増やすほど重要な情報が目立つわけではありません。
むしろ、すべてが目立ってしまい、
「結局どこを見ればいいの？」
という状態になることがあります。
例えば、
見出しは赤
価格は黄色
CTAは緑
アイコンは青
背景は紫
というように色がバラバラだと、情報の優先順位が分かりにくくなります。
LPでは、基本となる色数を絞ることで情報を整理しやすくなります。
特別な理由がなければ、
ベースカラー
メインカラー
アクセントカラー
を中心に配色し、必要に応じて同系色の濃淡を追加する程度から考えるとよいでしょう。
■ ② 商品・ブランドに合った色を選ぶ
LPの色は、商品やブランドのイメージと合わせることも重要です。
例えば自然派の商品なのに、ページ全体を鮮やかな蛍光色にすると、商品のイメージとデザインに違和感が生まれる可能性があります。
反対に、アウトドア商品ならグリーンやアースカラーを使用することで、自然をイメージしやすくなります。
美容商品なら、
ホワイト
ベージュ
ピンク
ゴールド
などが使われることがあります。
BtoBサービスなら、
ブルー
ネイビー
ホワイト
などを中心にすると、比較的落ち着いた印象を作りやすくなります。
ただし、「美容＝ピンク」「BtoB＝ブルー」と決めつける必要はありません。
競合商品と同じような配色ばかりになると、ブランドとしての個性が弱くなる場合もあります。
商品パッケージやロゴ、既存サイトなども確認しながら、その商品らしい配色を考えましょう。
■ ③ ターゲットに合わせて配色を考える
商品だけでなく、「誰に見てもらうLPなのか」も重要です。
同じ商品でも、ターゲットによって適した見せ方は変わります。
例えば若いユーザーを対象としたサービスなら、比較的明るく鮮やかなカラーが合う場合があります。
一方、高価格帯の商品では、色数を抑えて余白を広く取り、落ち着いた色を使用した方が商品の価値を伝えやすいケースもあります。
重要なのは、
「この色なら女性向け」
「この色なら男性向け」
と単純に考えることではありません。
年齢、商品の価格帯、利用シーン、ブランドイメージなどを含めて考える必要があります。
配色を決める前に、
「誰がこのLPを見るのか？」
を明確にしておきましょう。
■ ④ CTAにアクセントカラーを使う
LPの配色で特に重要なのがCTAです。
CTAとは、
「購入する」
「無料で相談する」
「資料請求する」
など、ユーザーに行動を促すボタンです。
ページ全体と同じ色でCTAを作ると、デザインには統一感が出ますが、ボタンが背景に埋もれてしまうことがあります。
例えば、
ホワイト＋ネイビー
を中心としたLPなら、CTAだけオレンジにするなど、アクセントカラーを使用する方法があります。
重要なのは「CTAはオレンジにする」ということではありません。
LP全体を見たときに、
「ここを押せばいい」
とすぐに認識できることが重要です。
CTA以外にも同じアクセントカラーを大量に使用すると、CTAの特別感が弱くなるので注意しましょう。
■ ⑤ 背景と文字のコントラストを確保する
LPでは見た目の美しさだけでなく、「文字が読めるか」も重要です。
例えば白い背景に薄いグレーの文字を使うと、デザインとしては柔らかく見えるかもしれません。
しかし、文字が薄すぎるとユーザーにとって読みにくくなります。
特にスマートフォンでは画面が小さいため、PCでは問題なく読めた文字でも見づらくなることがあります。
反対に、濃い背景を使う場合は文字を明るくするなど、背景とのコントラストを確保しましょう。
また、商品写真の上に直接文字を配置するときも注意が必要です。
写真の明るい部分と文字が重なると、読めなくなることがあります。
必要に応じて、
背景を暗くする
半透明の背景を敷く
文字の配置を変更する
などの方法で読みやすさを確保しましょう。
■ ⑥ 写真や商品画像とのバランスを考える
LPの配色は、背景やボタンだけで決まるものではありません。
商品画像や人物写真などもページ全体の色に大きく影響します。
例えば商品パッケージが鮮やかな赤なのに、背景や見出し、CTAにも強い赤を大量に使用すると、画面全体が重たく見える可能性があります。
このような場合は、背景をホワイトや淡いグレーにして商品そのものを目立たせる方法があります。
逆に、商品画像がホワイト中心なら、背景に淡い色を入れることで商品の輪郭を見せやすくなる場合があります。
配色を考えるときはカラーパレットだけを見るのではなく、実際の商品画像を配置した状態で確認することが大切です。
■ ⑦ LP全体で色のルールを統一する
LPは縦に長いページになることが多いため、セクションごとにデザインしていると、途中から色のルールが崩れてしまうことがあります。
例えば、
ファーストビューのCTAはオレンジ
中盤のCTAは緑
ページ下部のCTAは赤
という状態です。
同じ役割のボタンなのに色が違うと、ユーザーが別の機能だと認識する可能性があります。
同じ意味を持つ要素には、できるだけ同じ色を使いましょう。
例えば、
CTA＝オレンジ
見出し＝ネイビー
補足情報＝ライトブルー
注意事項＝赤
というように、色に役割を持たせます。
一度ルールを決めておけば、縦に長いLPでも統一感を維持しやすくなります。
■ LPのジャンル別おすすめ配色例
ここまで配色の基本を紹介しましたが、実際にLPを制作するときは商品ジャンルによっても方向性が変わります。
ここでは代表的な例を紹介します。
美容・コスメ
ホワイト＋ピンク＋ゴールド
ホワイト＋ベージュ＋ブラウン
ホワイト＋淡いブルー＋ネイビー
など。
清潔感や上品さを意識した配色が使いやすいジャンルです。
食品
ホワイト＋赤＋オレンジ
ベージュ＋ブラウン＋グリーン
ホワイト＋グリーン＋イエロー
など。
商品の写真そのものがカラフルな場合も多いため、背景はシンプルにすると商品を見せやすくなります。
健康・フィットネス
ホワイト＋ブルー＋オレンジ
ブラック＋ホワイト＋レッド
ホワイト＋グリーン＋ネイビー
など。
サービスによって「清潔感」「力強さ」「健康的」といった方向性を使い分けます。
BtoB・企業向けサービス
ホワイト＋ネイビー＋ブルー
ホワイト＋ブルー＋オレンジ
ライトグレー＋ネイビー＋グリーン
など。
情報量が多くなる場合は、ベースカラーをシンプルにして情報を整理すると見やすくなります。
高級商品
ブラック＋ゴールド
ホワイト＋ブラック＋ゴールド
ダークネイビー＋ホワイト＋ゴールド
など。
高級感を出したい場合は、色を増やすよりも色数を抑え、余白を広く取る方が効果的なケースがあります。
■ LP配色でよくあるNG例
最後に、LP制作で避けたい配色の例を確認しておきましょう。
・色を使いすぎている
・CTAと背景が同じ色で目立たない
・文字と背景のコントラストが弱い
・商品画像と背景色が似ている
・セクションごとに色のルールが違う
・ブランドイメージと配色が合っていない
・アクセントカラーを使いすぎている
LPの配色で迷ったときは、新しい色を追加する前に、
「本当にこの色は必要か？」
と考えてみることをおすすめします。
色を増やすよりも、不要な色を減らした方が情報が整理されるケースは少なくありません。
■ 配色に迷ったら商品から色を拾う
どうしてもLPの配色が決まらない場合は、商品そのものから色を選ぶ方法があります。
例えばパッケージに、
ネイビー
ホワイト
ゴールド
が使われているなら、その3色をLPにも取り入れます。
商品とLPに統一感が生まれるため、比較的自然な配色を作りやすくなります。
また、企業やブランドのロゴカラーをメインカラーとして利用する方法もあります。
ただし、ロゴカラーが非常に鮮やかな場合は、ページ全体に大量に使用すると強すぎることがあります。
その場合はメインカラーではなくアクセントカラーとして使用するなど、使用する面積を調整しましょう。
■ LPの配色はスマートフォンでも確認する
配色が完成したら、PCだけでなくスマートフォンでも確認しましょう。
PCの大きなモニターではきれいに見えていても、スマートフォンでは印象が変わる場合があります。
特に、
文字と背景のコントラスト
CTAの視認性
写真上の文字
小さな補足テキスト
などは実機で確認することをおすすめします。
また、スマートフォンの画面では一度に見える範囲が狭くなります。
そのため、PCでは全体の配色バランスが良くても、スマートフォンでは同じ色が画面いっぱいに続いて単調に見えることがあります。
実際にスクロールしながら、色の切り替わりやCTAの見つけやすさを確認しましょう。
■ LP公開後は配色も改善する
LPの配色に絶対的な正解はありません。
デザイナーが「この色が一番いい」と思っていても、実際のユーザーがどのように行動するかは公開してみなければ分からない部分があります。
例えばCTAのクリック率が低い場合、
CTAの色
CTA周囲の余白
CTAのサイズ
文言
CTA直前の内容
など、さまざまな原因が考えられます。
単純にボタンの色だけを変えれば成果が上がるとは限りません。
配色はLP全体の構成やコピー、商品画像などと合わせて考え、必要に応じて改善していきましょう。
■ まとめ｜LPの配色は「きれい」より「伝わる」を意識する
LPの配色では、見た目をきれいに整えることだけが目的ではありません。
色を使って、
「どの情報が重要なのか」
「どこを見てほしいのか」
「どこを押してほしいのか」
をユーザーに分かりやすく伝えることが重要です。
配色に迷ったら、まずは、
ベースカラー
メインカラー
アクセントカラー
の3つを決めてみましょう。
そして、
色を使いすぎていないか
商品やブランドに合っているか
ターゲットに合っているか
CTAが目立っているか
文字が読みやすいか
商品画像と調和しているか
ページ全体で色のルールが統一されているか
を確認します。
LPデザインでは、色を追加することで目立たせようとしがちです。
しかし、本当に重要な情報を目立たせたいのであれば、周囲の色を減らすことも効果的です。
「どの色がおしゃれか」だけで判断するのではなく、ユーザーが迷わず情報を理解できる配色を目指しましょう。
関連記事
LPの商品画像の作り方｜売れるデザインに共通する7つのポイント
LPのファーストビューの作り方｜成果につながるデザイン7つのポイント
LPの構成の作り方｜成果につながるランディングページの基本構成を徹底解説
ペイントツールのスタンダード【CLIP STUDIO PAINT PRO】
最短1ヶ月で動画編集スキルが身につく！【クリエイターズジャパン】