LPの配色はどう決める？CTAまで視線を導く色の使い分け

LP（ランディングページ、資料請求や申込みなど特定の行動へ導くWEBページ）の配色では、ボタンを派手にするだけでなく、説明を読む流れの中で次の行動を見つけやすくすることが大切です。CTA（Call to Action、申込みなどの行動を促す案内やボタン）まで自然に視線を導くために、背景・見出し・CTAの色をどう分けるか考えます。

最初にCTAを一つ決め、色の役割を分ける

たとえば、法人向けサービスの「無料資料を受け取る」を主なCTAにするなら、ファーストビュー（ページを開いて最初に見える範囲）、メリットの説明後、料金やよくある質問の後に同じボタンを置く方法があります。途中のボタンだけ色を変えるより、同じ文言と色を保つ方が同じ操作だと伝わりやすくなります。

背景は広い面積を占めるため、彩度（色の鮮やかさ）を抑えた明るい色で整えます。見出しには背景より濃い落ち着いた色を使い、CTAには見出しと色相（赤・青などの色み）が異なる暖色を採用すると、行動の入口を区別しやすくなります。ただし色だけで視線の順序は決まりません。文章の順番、余白、ボタンの位置を一緒に設計します。

資料請求の前には、何が分かる資料なのか、費用の有無、入力が必要な情報を明示します。強いボタン色で内容を隠すのではなく、判断材料を読んだ後にCTAへ進める構成にしましょう。

資料請求LPで背景からCTAへつなぐ配色例

サービスの特長、導入事例、よくある質問を掲載するLPを想定します。HEX（16進数で色を指定するWEBカラーコード）で、各色の役割を示します。

• ページ全体の背景：ほぼ白の淡いグレー ■#F8FAF9。広い面を落ち着かせ、セクションが続いても視覚的に騒がしくならない土台にします。
• 料金・事例などのカード面：白 ■#FFFFFF。全体背景のグレー ■#F8FAF9 との差は約1.05:1と小さいため、余白や枠線でも区切ります。
• 特長・よくある質問の補助背景：淡い青緑 ■#E9F2F0。セクションのまとまりを作り、CTAと同じ強い色を大面積に広げないようにします。
• 説明文：濃いチャコール ■#28333A。淡いグレー ■#F8FAF9 の上で約12.33:1、淡い青緑 ■#E9F2F0 の上で約11.34:1のコントラスト比です。
• 見出し・通常のテキストリンク：深い青緑 ■#245C63。淡いグレー ■#F8FAF9 の上で約7.19:1、白 ■#FFFFFF の上で約7.54:1です。リンクには下線も加えます。
• 補足テキスト：ブルーグレー ■#536A70。白 ■#FFFFFF の上で約5.73:1。資料の内容や注意事項を薄くしすぎずに示します。
• フォーム入力欄の枠線：落ち着いたグレー ■#708589。白 ■#FFFFFF の入力面に対して約3.89:1、淡い青緑 ■#E9F2F0 の外側に対して約3.41:1です。
• 「無料資料を受け取る」CTA：深いテラコッタ ■#A4492C の背景と白 ■#FFFFFF の文字を組み合わせます。文字との比率は約5.89:1、淡いグレー ■#F8FAF9 の周囲に対するボタン背景の比率は約5.61:1です。

同じCTA色を最初の案内、メリットの後、最後の確認部分で繰り返し、その他のリンクには落ち着いた青緑を使う構成です。CTAの位置が分かりやすい一方、読み進めるための情報を強い色で埋めないことを意図しています。

色数を増やさずに目立たせるための確認点

セクションごとに背景色を変えすぎたり、同じ画面で「問い合わせ」「資料請求」「無料相談」の全ボタンを同じ強い色にしたりすると、どれが主な行動なのか伝わりにくくなります。主なCTAは表現と色を統一し、補助的な導線は下線付きの文字リンクなどで差を付けましょう。

写真やグラデーションの上にCTAや見出しを重ねると、場所によって文字との明るさの差が変わります。CTAの周囲に単色の面を用意し、スマートフォンではボタンと説明が離れすぎないか、ボタンの文言が省略されていないか確認してください。クリックや申込みが増えるとは色だけで断定できないため、必要なら実際の利用状況を見て改善します。

WCAG（WEBコンテンツを利用しやすくするためのガイドライン）2.2のレベルAAでは、通常サイズの文字は背景とのコントラスト比が4.5:1以上、大きな文字は3:1以上です。フォーム枠など操作に必要な非テキスト要素は隣接色との3:1以上が求められます。上の組み合わせはその基準に照らして確認していますが、背景色や配置を変えた場合は再計算してください。