背景と同系色でボタンが埋もれているページと、ボタンがはっきり浮き上がっているページを左右で対比したイラスト

この記事の結論

LPのボタンを全体のデザインと同系色にすると、見た目は整いますが、見込み客が「行動する場所」が画面から消えます。ボタンはお店のレジの案内板と同じ役割を持っていて、はっきり案内するほど押されます。そしてこれは印象の問題で終わりません。登録率が2ポイント落ちるだけで獲得単価は2割以上跳ね上がります。色のコントラスト・余白・文言の3点を見直してください。

「レジがどこか分からん」と言われる店になっていないか

LPを作るときによくあるのが、申し込みボタンをページ全体のデザインと同系色にしてしまうパターンです。ベージュ基調のページに少しだけ色味を変えたベージュのボタン。濃紺のページに、やや明るい紺のボタン。見た目は整っていますし、世界観も崩れません。デザインとしての完成度は、たしかに高い。

でも、LPの仕事は売ることです。見込み客が「行動する場所」を一目で見つけられないと、成立しません。

これはお店のレジの案内板と同じです。会計をしようと思っても、レジ台が店内の棚と同じ色で、案内も出ていなかったらどうでしょうか?「えっと、どこで払うんだろう」と店内をぐるぐる歩くことになります。逆に、レジの上に大きな表示板が出ていて、スタッフが「こちらどうぞ」と声をかけてくれたら、迷わず進めます。

ボタンの役割は、レジの案内板と同じ。馴染ませずに、はっきり案内する。それだけで押されます。

ボタンが背景に埋もれていると、そこで視線が止まりません。人はページを上から下へ流し読みしていて、色が変わる場所で一度目を止めます。その止まる場所がなければ、そのまま通り過ぎます。通り過ぎられたら、登録も購入も起きません。

ボタンが埋もれると、広告費の効率まで落ちる

ここが、僕が広告運用の側から一番お伝えしたいところです。ボタンの見え方は「印象が良い・悪い」の話で終わらず、そのまま獲得単価に跳ね返るんです。

実際の数字で置いてみましょう。Meta広告に月10万円を投じて、クリック単価100円で1,000クリックをLPに送ったとします。

  • 登録率(CVR)10%のとき → 登録100件、獲得単価(CPA)1,000円
  • 登録率が8%に落ちたとき → 登録80件、獲得単価1,250円

登録率がたった2ポイント下がるだけで、1件あたりのコストは25%上がります。同じ10万円でも、取れる見込み客は20人減る。これが半年続けば、120人分の差です。

広告の管理画面だけを見ていると、この差は「最近CPAが高いな」としか映りません。クリエイティブを差し替えたり、ターゲットをいじったりして原因を探しにいくことになります。でも実際の詰まりが着地先のページにあるなら、広告側でいくら手を動かしても戻りません。

埋もれたボタンと、浮いているボタンの違い 上段は背景と同系色のボタンで視線が止まらず通り過ぎられ、登録率が落ちて獲得単価が上がる流れ。下段はコントラストのあるボタンで視線が止まり、行動につながって獲得単価が下がる流れ。 ✕ 背景に馴染んだボタン 背景と同系色で ボタンが埋もれる 視線が止まらず 読み流される 登録率が下がり 獲得単価が上がる ○ あえて浮かせたボタン 反対色・余白・文言で ボタンを目立たせる 視線が止まり 次の一歩が分かる 登録率が上がり 獲得単価が下がる
図: ボタンの見え方は印象の問題では終わらず、そのまま獲得単価に跳ね返る

押されるボタンにするための3つの見直し

直すところは多くありません。次の3点を順番に確認してください。

1. 色のコントラストを出す

背景の反対側にある色を使って、視界に飛び込んでくる色を選びます。判断に迷ったら、ブラウザの表示を思い切り縮小するか、目を細めてページを眺めてみてください。その状態でボタンの位置が真っ先に分かれば合格です。形がぼやけて背景に溶けるなら、まだ馴染みすぎています。

2. 上下左右に余白を取る

ボタンの周囲にスペースを持たせると、「ここは押せる場所だ」と直感的に伝わります。文章とボタンがぴったり接していると、ボタンが文章の一部に見えてしまい、押せるものとして認識されません。色だけを変えて余白を詰めたままだと、効果は半分になります。

3. 次に何が起きるかが分かる文言にする

「送信」「こちら」だけでは、押したあと何が起きるか分かりません。押す直前に不安があると、人は手を止めます。「無料テキストを今すぐ受け取る」「LINEで講座の詳細を受け取る」のように、押した先で手に入るものを書いてください。行動のハードルが低いことを添える書き方も有効です。

そしてもう1点。オプトインLPの場合は、ボタンをファーストビューの中にも置いてください。最後まで読んでから決める人だけでなく、最初の画面で内容に納得した人がその場で行動できるようにしておきます。ファーストビュー下部とページ最下部の2か所が基本です。

世界観よりも、レジに行ってもらうことが先

見た目の世界観が大事なのは、そのとおりです。ブランドの印象は、価格の納得感にも関わります。

それでも、レジに行ってもらうことのほうが先です。だからボタンだけは、アクセントとして「あえて浮かせる勇気」が必要になります。ページ全体が和モダンでも、ナチュラルな色合いでも、そこに看板を1枚だけ立てる。お客さんは迷わずに進めます。

デザイナーに依頼して作ってもらったLPなら、伝え方も工夫できます。デザインへの注文という形にせず、「このページの役割は申し込みを取ることなので、ボタンだけは意図的に浮かせたい」と目的から伝えてください。僕が見てきた範囲では、ボタンが馴染んでいるLPのほとんどは、単にページの目的がデザイナーへ共有されていなかっただけでした。目的が伝われば、世界観を保ったままコントラストを出す方法を向こうから提案してくれます。

成果が出るLPにしたいなら、まずボタンの色を見直してください。デザインを作り直すより早く、数字がいちばん動く一手です。

よくある質問

ボタンの色は何色にするのが正解ですか?

決まった正解の色はありません。基準になるのは「そのページの背景や周囲のパーツと、はっきり差がついているか」です。ページ全体が寒色でまとまっているならオレンジや赤系、暖色系のページなら濃い青や緑系というように、そのページの中で一番浮く色を選びます。自分で判断しにくいときは、画面を思い切り縮小するか目を細めて見て、ボタンの位置が真っ先に分かるかどうかで確かめてください。

デザイナーに作ってもらったLPです。色を変えてほしいと言いにくいのですが。

デザインの良し悪しの話にせず、「このページの役割は申し込みを取ることなので、ボタンだけは意図的に浮かせたい」と、目的を先に伝えてください。理由が共有されていれば、世界観を保ったままコントラストを出す方法をデザイナー側が提案してくれます。多くの場合、目的が伝わっていなかっただけです。

ボタンはページの何か所に置けばいいですか?

オプトインLPなら、ファーストビューの中と、ページ最下部の2か所に置くのが基本です。読み進めた人が最後に申し込めるだけでなく、最初の画面で内容に納得した人がその場で行動できるようにしておきます。長いセールスページの場合は、見込み客の気持ちが動く区切りごとに追加します。ただし1ページで求める行動は1つに絞ってください。

Web Culture Service CEO 加藤理人

加藤理人(かとう みちひと)

Web Culture Service CEO/Meta公認代理店〈Meta Business Partners〉

2011年創業。ひとり起業家と小さな会社のための「AI自動化マーケティング設計」を提唱。AI導入支援・Webマーケティング支援・Meta広告運用代行の3事業を展開し、東海テレビ・Yahoo!ニュースで業界有識者として解説。奈良を拠点に全国オンライン対応。

LPと広告、通しで見てみませんか?

広告の数字が伸びない原因が、広告側にあるのか着地先にあるのか。集客の仕組みをまとめて相談できます。売り込みは一切しません。

無料相談の申し込みはこちら