LP制作で「申し込みボタンが反応しない」を防ぐ！CTAエリアの設計と配置の正解｜現場で使える実践テクニック

2026年05月01日

クリオ

Web制作ディレクター / フロントエンジニア

こんにちは！

今日は「LP制作で見落としやすい、CTAボタンの配置と設計」について解説します。

僕が経験した「申し込みボタンが反応しない」クライアント報告

あのですね、Web制作やってて一番びっくりする問い合わせがこれです。
「うちのLP、申し込みボタンが反応してないんちゃう？」
クライアントから連絡が来るんです。

僕も最初は「えっ、ボタンのコーディングが崩れてんのかな」とめっちゃ焦りました。
でも実際に見てみると、ボタン自体は問題ない。
何が起きていたかというと、ユーザーが「ボタンだと思ってクリックしてる部分が、実は別の要素」だったんですよ。

具体的には、CTAボタンの周りに広い余白があったり、フォーム入力エリアが長すぎたり、はたまたボタンのz-indexがおかしくて、別の要素に覆われてたり。
ほんま、細かい設定ミスが「ボタンが反応しない」という印象を生んでしまってたんです。

だからこそ、CTAエリアの設計って、想像以上に重要なんですよ。

まず、CTAボタンの「当たり判定」を意識することが大事です。
当たり判定って、要するにボタンがどれくらいの範囲で反応するのかってことですね。

よくある失敗は、こんな感じです。

現場でよく見るのは、デザイナーさんが「ボタンは小さくシンプルに」と考えてしまうパターンです。
気持ちはわかるんですが、ユーザーは必ずしもディスクレーション（細部）を気にしません。
むしろ、「このボタンはちゃんと押せるんだな」って安心感が大事なんです。

ボタンのサイズは、最低でも以下の基準を守るといいですよ。

これは、GoogleやAppleのガイドラインでも推奨されてるサイズですからね。
忘れずにですよ。

スマートフォンでLP見てる人って、本当にスクロールしないんですよ。
僕も最初はビックリしました。

データを見ると、ファーストビューから200px以内にコンバージョン（申し込みとか購入）のきっかけがないと、かなり多くのユーザーが離脱します。
つまり、ファーストビューの直後、スクロールして最初に見える範囲に「申し込みボタン」や「詳しく見る」みたいなCTAがないと、ほぼ反応されません。

よくある配置ミスは、こんな感じ。

理想的には、スマートフォンの場合、ファーストビュー表示直後（つまりスクロール1回分後）に、最初のCTAが見えるようにするといいですよ。
そこで「もっと詳しく知りたい」か「今すぐ申し込む」かの2択をユーザーに与える感じですね。

ほんま、この配置ひとつで、コンバージョン率が20%変わることもあります。

ここからが、めっちゃ実践的な話です。
LPには、複数のボタンが必要な場合がありますよね。

例えば、こんな感じ。

ここで重要なのが、ビジュアルの優先度と配置の優先度を一致させることなんです。

よくある失敗は、デザイン上は全部のボタンが同じ大きさ、同じ色で並んでる場合。
こうなると、ユーザーは「どれをクリックするのが正解？」って迷ってしまいます。

正しいやり方は、こんな感じ。

実装の面では、メインボタンにはbackground-colorで色を付けて、サブボタンにはborderだけを付けるようなやり方が多いですね。

配置的には、スマートフォンでは縦に並べるときに、メインCTAを上に、サブCTAを下に配置します。
ユーザーは上から順に見ていくので、視線の流れに沿った配置にするといいですよ。

あと、僕がよく使うテクニックとしては、「スクロール追従型のボタン」を下部固定で配置するパター