LPの配色の選び方｜3色ルールと色が与える印象

• LPの配色が印象と成果に与える影響
• 失敗しない配色の基本ルール
• 業種・目的別の配色パターン
• やりがちな配色NG3パターン
• 色の選び方5ステップ

LPの配色は、第一印象とブランドイメージを大きく左右します。色は無意識に感情へ働きかけるため、選び方を間違えると、内容が良くても「なんとなく信用できない」印象を与えてしまいます。

この記事では、失敗しないLP配色の基本ルールと選び方を解説します。LPデザイン全体はLP（ランディングページ）とは？もあわせてご覧ください。

▶ 関連記事：伴走支援とは？コンサル・代行との違いと選び方／Web集客とは？中小企業のための方法8選と予算別の始め方

配色の基本｜3色ルール

プロも使う基本が「3色ルール」です。役割の異なる3種類の色を、決まった比率で使います。

3色の役割：ベース・メイン・アクセント

配色は好みではなく役割から決めます。LPで使う色は、次の3つに整理できます。

役割	比率の目安	使いどころ
ベースカラー	70%	背景など広い面積
メインカラー	25%	ブランドを表す主役の色
アクセントカラー	5%	CTAなど目立たせたい箇所

ベースカラーは、背景やセクションの余白など最も広い面積を占める色です。白やごく薄いグレーなど主張の弱い色を選ぶと、本文が読みやすくなります。メインカラーは見出しの帯や罫線、アイコンなどに使う主役の色で、ブランドの印象をつくります。

アクセントカラーは、CTAボタンや「残りわずか」といった強調表示にだけ使う色です。実務では「CVカラー（コンバージョンカラー）」と呼ぶこともあります。この色が出てきたら押す場所だ、と読者に覚えてもらうイメージで、ボタン以外にはできるだけ使わないのがコツです。

配色パターンの黄金比は70:25:5

3色の比率は、ベース70％・メイン25％・アクセント5％が目安です。デザインの世界では黄金比とも呼ばれる配色パターンで、この比率を守るだけで、まとまりのある見やすいLPになります。特にアクセントカラーはCTAに使い、行動してほしい場所へ視線を集めます。

比率が崩れた場合を考えると分かりやすくなります。メインカラーを50％も使えば、ページ全体が色に埋もれてどこが大事なのか分からなくなります。逆にアクセントカラーを20％も使うと、目立たせたいはずのCTAボタンが「よく見る色」になってしまい、視線が止まりません。5％しか使わないからこそ、アクセントカラーは強く働きます。

厳密に面積を測る必要はありません。「背景はほぼ白、色を置くのは見出しとボタンだけ」という意識で十分です。

CTAボタンの色はブランドより心理効果を優先

迷いやすいのがCTAボタンの色です。結論から言うと、ブランドカラーに合わせることよりも「周囲より目立つこと」を優先します。

目立たせる基本は、背景から離れた色を置くことです。色相環で反対側にある補色関係の色は差が大きく、視線を引きつけやすいと言われます。青系のLPならオレンジ系、緑系のLPなら赤〜ピンク系、といった組み合わせです。

もう一つ大事なのが、ボタンの周囲に同系色を置かないこと。ボタンをオレンジにしても、すぐ隣にオレンジの見出し帯やオレンジのイラストがあると、色の力が分散して埋もれます。ボタンの周りは余白と無彩色で固めると、同じ色でも見え方が変わります。

▶ 関連記事：CTAボタンとは？クリック率を高める文言・色・配置の作り方

色が与える印象を知っておく

• 青：信頼・誠実・清潔（BtoB・医療・士業に多い）
• 赤・オレンジ：情熱・行動・お得感（CTAや限定訴求）
• 緑：安心・健康・自然
• ピンク：やさしさ・女性向け商材
• 黒・ゴールド：高級感・高価格帯

個別の色を覚えるのが大変であれば、暖色・寒色・無彩色の3グループで捉えると判断が早くなります。赤やオレンジなどの暖色は活気や勢いを感じさせやすく、行動を促したい場面と相性がいい色です。青や緑などの寒色は落ち着きや信頼を感じさせやすく、じっくり読んでもらいたい説明パートに向きます。

白・グレー・黒などの無彩色は、どの色とも喧嘩しない土台役です。ベースカラーを無彩色にしておくと、メインとアクセントの2色だけで印象をコントロールできるため、配色に自信がないときほど扱いやすくなります。なお色から受ける印象には文化や個人差もあり、「この色なら売れる」とは断定できません。あくまで方向性を決める材料として使ってください。

業種・目的別の配色パターン

業種と目的から当たりをつけると迷いません。よく使われる4つの型を紹介します。

信頼を伝えたいBtoB・士業

青系をベースに、濃紺をメインカラーへ据える組み合わせが定番です。青は誠実さや清潔感と結びつけられることが多く、実績や専門性で選ばれる商材と相性がいい色とされます。彩度を抑えるほど落ち着いて見えるので、アクセントだけ明るいオレンジや水色にして、CTAへ視線を集めます。

お得感を出したいセール・キャンペーン

赤・オレンジ・黄色といった暖色を中心に、コントラストを強めた配色が向きます。期間限定や割引を伝えるLPでは、落ち着きよりも「今すぐ」の勢いが必要だからです。ただし全面を暖色で埋めると安さの印象だけが残るため、通常価格の商材やブランド訴求のLPには使いにくくなります。ページを選ぶ配色です。

安心・清潔感の医療・美容

白をベースに、淡い水色やグリーンを重ねる配色が多く使われます。面積の大半を白にすることで清潔感が出て、施術写真や症例写真の見え方も良くなります。全体を彩度の低い色でまとめる分、CTAボタンだけは彩度を上げないと埋もれてしまうので注意してください。

高級感のあるブランド

黒や濃いグレーと白で構成し、差し色を1色だけ添える型です。色数を絞るほど高級感は出やすく、ゴールドやワインレッドを少量足すと質感が加わります。逆に色数を増やすと一気に量販店の雰囲気になるため、この型では「増やさない」判断が効きます。

どの型を選ぶ場合も、同業他社のLPを3社ほど見てから決めることをおすすめします。業種ごとに読者が見慣れた色の傾向があり、大きく外すと目立つ前に「違和感がある」と受け取られることがあるためです。3社見て共通する方向性を押さえたうえで、アクセントカラーで差をつけるのが安全です。

▶ 関連記事：LPデザインとは？成果が出るレイアウトのコツと参考例の探し方／LPのファーストビューに入れるべき5つの必須要素

やりがちな配色NG3パターン

LP改善のご相談でよく見かける失敗を3つ挙げます。どれも直し方はシンプルです。

①色が多すぎて視線が迷子になる

セクションごとに違う色を使い、気づけば6色も7色も使っているケースです。作り手は「メリハリをつけたつもり」でも、読者にはすべてが同じ強さで主張して見え、どこを読めばいいのか分からなくなります。

直し方は、いったん色を3つに絞り、それでも変化が足りない箇所は同系色の濃淡で表現することです。同じ青の濃い・薄いで差をつければ、色数を増やさずに情報の階層をつくれます。

②背景と文字のコントラスト不足で読めない

薄いグレーの背景に薄いグレーの文字を置く、写真の上に白文字を直接重ねる、といった配色です。作業中のPC画面では読めても、明るい屋外のスマホではほとんど判読できないことがあります。

直し方は、文字色を濃くする・背景を単色にする・写真の上に半透明の黒を敷く、のいずれかです。判断に迷ったら、画面から少し離れて目を細めてみてください。それでも文字の形が追えるなら合格ラインです。

③CTAボタンが背景に埋もれる

最ももったいない失敗です。ボタンの色がメインと同じで周囲に溶け込み、押す場所として認識されないパターン。せっかく本文を読んでもらっても、最後の一歩で取りこぼします。

直し方は、ボタンだけをアクセントカラーにし、上下に十分な余白を取ること。ページを縮小表示して全体を眺めたとき、真っ先に目に入るのがボタンであれば問題ありません。

配色ツールを使えば迷わない

色の組み合わせをゼロから考える必要はありません。メインカラーを1色決めれば、相性のよい色を提案してくれる無料ツールがあります。

定番はAdobe ColorとColor Huntの2つです。Adobe Colorは1色を指定すると補色や類似色のルールに沿った組み合わせを自動生成し、Color Huntは完成済みのパレットを一覧から選べます。どちらもブラウザ上で無料で使えます。

使い方の流れはシンプルです。まずブランドカラーや業種から主役の1色を決め、ツールで候補のパレットを表示し、その中からベース（最も薄い色）とアクセント（最も目立つ色）を選びます。あとは70:25:5の比率で当てはめれば、大きく外すことはありません。

注意点は、ツールが示すのは色同士の相性だけで、読みやすさまでは保証されないことです。淡い色ばかりのパレットは本文が読みにくくなるので、最後は自分の目で可読性を確認してください。

色を選ぶ5ステップ

▶ 関連記事：スマホLPの最適化｜モバイルで成果を出すチェックポイント

色は何色まで使っていいですか？

基本は3色（ベース・メイン・アクセント）に抑えるのがおすすめです。色数が多いと散らかった印象になり、どこを見るべきか分からなくなります。同系色の濃淡で変化をつけると、色数を増やさず表現できます。

CTAボタンは何色がいいですか？

赤やオレンジは行動を促す色とされますが、絶対ではありません。重要なのは「ページ内で最も目立つこと」です。メインカラーとのコントラストで決め、テストで最適化しましょう。色違いのボタンを比較する進め方はLPのABテストのやり方で解説しています。

ブランドカラーが地味な場合はどうすればいいですか？

ベースとメインは地味なままで問題ありません。落ち着いた色はむしろ本文が読みやすくなります。足りないのは「目立つ色」なので、アクセントカラーだけをブランドカラーと対照的な色にし、CTAボタンと重要な強調箇所に限定して使ってください。ロゴのすぐ横で別の色を大きく使わなければ、ブランドの印象は崩れません。

まとめ

配色は、印象と成果を左右する重要な要素です。ポイントを整理します。

• ベース70％・メイン25％・アクセント5％の3色ルールが基本
• 色の印象を商材・ターゲットと合わせる
• 業種・目的から配色パターンの当たりをつけ、同業3社を確認する
• 色数の多さ・コントラスト不足・CTAの埋没が3大NG
• CTAは目立つアクセント色に。読みやすさを最優先する

「自社の配色が適切か分からない」という場合は、ブランドと成果の両面から見直すと効果的です。配色以外も含めてLPの改善点を洗い出したい方は、Web集客ドックで現状をチェックしてみてください。マーケティングサポートでは、デザイン改善を含むLP支援を伴走してご提供します。お気軽にご相談ください。