CTAボタンの最適解｜色・文言・配置で変わるクリック率

LPの離脱率を下げた。コンテンツも改善した。なのにコンバージョンが増えない。

その原因は

CTA（Call To Action）ボタン

にあるかもしれません。CTAボタンはLPの「出口」です。ここが最適化されていないと、どれだけ良いコンテンツを読ませても、最後の一歩を踏み出してもらえません。

この記事では、CTAボタンの色・文言・配置・サイズの最適解を、実践データとA/Bテスト結果に基づいて解説します。

CTAの役割 — 「読者」を「見込み客」に変える瞬間

CTAボタンはLPの中で

唯一、読者のアクションを直接促す要素

です。ヘッドライン、ベネフィット、社会的証明は全て「CTAをクリックしてもらう」ために存在しています。

CTAのクリック率の目安

BtoB LP（資料請求）: 2〜5%
SaaS（無料トライアル）: 3〜8%
EC（購入）: 1〜3%

これより低い場合、CTAの最適化で改善できる余地があります。

1. CTAの色 — コントラストが全て

原則: ページ内で最も目立つ色にする

「緑がいい」「オレンジがいい」という一般論がありますが、正解は

「ページの他の要素と最もコントラストの高い色」

です。

ページの基調色	CTAに効果的な色	理由
白背景 + 青系テキスト	オレンジ / 緑	寒色ベースに暖色が映える
ダーク背景	明るい緑 / 黄色	暗い背景に明色が際立つ
カラフルなデザイン	白 or 黒（余白を広く）	色が多い中でシンプルさが目立つ

やってはいけないこと

ブランドカラーと同じ色 — ヘッダーやナビゲーションに溶け込む
テキストリンクだけ — ボタン形状がないとクリック可能と認識されない
グレー系 — 非活性ボタンと誤認される

スクイントテスト: 画面から離れて目を細めてページを見てください。それでもCTAボタンが目に入るなら、色のコントラストは十分です。

2. CTAの文言（ラベル） — 「動詞+得られるもの」が鉄則

悪い例 → 良い例

悪い例	問題点	良い例
送信	何が起きるか不明	無料で資料を受け取る
Submit	英語=心理的距離	今すぐ無料で始める
詳しくはこちら	得られるものが不明	3分でわかるサービス概要
クリック	行動の意味がない	無料デモを予約する
お問い合わせ	ハードルが高い	まずは無料で相談する

ラベル設計の公式

[動詞] + [得られるもの] + (心理的ハードルの低減)

パターンA（資料系）: 「無料で」+「資料を受け取る」 パターンB（体験系）: 「今すぐ」+「無料で試す」 パターンC（相談系）: 「まずは」+「無料で相談する」

「無料」という言葉は、BtoBでもBtoCでもクリック率を上げる効果がある

ことがA/Bテストで繰り返し確認されています。

文字数の目安

8〜15文字が最適
短すぎる（「送信」）= 情報不足
長すぎる（20文字超）= 読まれない

3. CTAの配置 — 「見えない=存在しない」

配置の基本ルール

ファーストビュー（必須） — ページ到着直後に見える位置。購買意欲の高い層はここで行動する
メリットセクションの直後 — ベネフィットを読んで「いいかも」と思ったタイミング
社会的証明（事例）の直後 — 他社の成功を見て「自社でも」と思ったタイミング
ページ末尾 — 全て読んだ上で判断する慎重層向け

1ページに3〜4回CTAを配置するのが最適解です。 「しつこい」と感じる人もいるかもしれませんが、ユーザーは全文を読むわけではありません。スクロール位置に関係なく、行動を起こしたいタイミングでCTAが目に入ることが重要です。

固定CTA（フローティング）の是非

画面下部に固定表示されるCTAバー。モバイルでは効果的ですが、PCでは

コンテンツの邪魔になる可能性

があります。

デバイス	固定CTA	推奨
モバイル	画面下部に固定バー	○（ただし閉じるボタン必須）
PC	コンテンツ内に配置	◎（固定CTAは控えめに）

4. CTAのサイズと余白

サイズの基準

モバイル: 最低44×44px（Apple HIG準拠）、推奨は幅100%（フルワイド）
PC: 幅200〜300px、高さ48〜56px
テキストの余白: 上下16px、左右32px以上

余白（ホワイトスペース）の重要性

CTAボタンの周囲に十分な余白を設けることで、視覚的な重要度を高めます。ボタンの上下に最低24px、できれば40px以上の余白を確保しましょう。

5. マイクロコピー — CTAの直下で不安を解消する

マイクロコピーとは、CTAボタンの直下に配置する短いテキストです。ユーザーが「クリックしようかな」と迷う瞬間の

不安を解消する役割