「CTAボタンの色を変えてみたが、CVRは動かなかった」——CTAボタンのABテストで成果が出ない最大の原因は、検証する順番を間違えていることです。
本記事では、CTAボタンのABテストで文言・配置・サイズ・アイコン・色のどれから検証すべきかを、信頼度が公開されている事例6件とあわせて解説します。
記事のポイント
- CTAボタンの検証は文言 → 配置 → サイズ → アイコン → 色の順
- 色から始めると差が検出できない理由
- 信頼度・サンプルサイズつきの公開事例6件
- クリック率が上がってCVRが下がるパターンの見分け方
- ノーコードで検証を回す方法
目次
- CTAボタンのABテストは順番で決まる
- ①文言のABテスト
- ②配置のABテスト
- ③サイズ・形状のABテスト
- ④アイコン・マイクロコピーのABテスト
- ⑤色のABテストは最後でいい
- 公開事例6選（信頼度つき）
- クリック率だけ上がるテストに注意
- DejamでCTAボタンのABテストを回す
- よくある質問
- まとめ
CTAボタンのABテストは順番で決まる
CTAボタンには検証できる要素が5つあります。どれも同じように効くわけではありません。
| 要素 | 期待できる変化幅 | 実装コスト |
|---|---|---|
| 文言 | 大きい | 最小（テキスト差し替えのみ） |
| 配置 | 大きい | 小（HTMLの位置移動） |
| サイズ・形状 | 中 | 小 |
| アイコン・マイクロコピー | 中 | 小 |
| 色 | 小 | 最小 |
文言と配置から始めてください。 理由は2つあります。
1つ目は、変化幅が大きいことです。後述の事例では、文言の変更で申込が104%増えた一方、ボタン配置の変更は19%の改善でした。色単体のテストは、数%の差に収まることが多く、必要なサンプルサイズが跳ね上がります。
2つ目は、色には「正解」がないことです。「緑のボタンがいい」「オレンジがいい」という一般論は成立しません。効くのは背景とのコントラストであり、サイト全体の配色に依存します。色をテストするなら「赤と緑」ではなく「コントラスト比が高い配色と低い配色」として設計します。
①文言のABテスト
最優先です。ボタンの文言は、ユーザーが「押した後に何が起きるか」を判断する唯一の手がかりです。
| 変更の型 | Before → After |
|---|---|
| 名詞 → 動詞句 | 資料請求 → 無料で資料を見る |
| 主語を自分に | お申し込み → 申し込む |
| 所要時間を添える | お問い合わせ → 30秒で問い合わせる |
| 費用の不安を消す | 見積もり依頼 → 無料で見積もりを取る |
| 次の画面を予告する | 送信 → 確認画面へ進む |
| コミットメントを下げる | 購入する → カートに入れる |
「送信」「お申し込み」のままになっているボタンは、ほぼ確実に改善余地があります。 これらはユーザーにとって「何が起きるか分からないボタン」です。
文言の作り方は「マイクロコピーとは：初心者にもわかる実務的な活用法と重要性」でも扱っています。
②配置のABテスト
CTAは「比較し終わった直後」に置くと押されます。
| 変更の型 | 狙い |
|---|---|
| 価格表・プラン表の下から上に移す | 比較の結論が出た直後に押せる |
| ファーストビュー内にも追加する | 即決層を取りこぼさない |
| ページ下部にも追加する（上下2か所） | 読み切った層の導線を作る |
| 追従（スティッキー）CTAにする | スクロール位置に依存しない |
| セクションごとに1つ置く | 検討が終わった場所で押せる |
追従CTAは万能ではありません。 モバイルでは画面の一部を常に占有するため、本文の可読性が落ちます。「追従CTAあり／なし」自体をテストしてください。
③サイズ・形状のABテスト
| 変更の型 | 仮説 |
|---|---|
| ボタンを大きくする | 見落とされない |
| ボタンを小さくして文言を増やす | 情報量で納得感が出る |
| 角丸 → 直角、またはその逆 | サイトの印象と一致する |
| ボタン幅を画面幅いっぱいにする（モバイル） | タップ領域が広がる |
モバイルではタップ領域を44px以上確保してください。 これは好みではなく、アクセシビリティの要件です。詳しくは「WCAG対応の方法」を参照してください。
④アイコン・マイクロコピーのABテスト
| 変更の型 | 仮説 |
|---|---|
| 矢印アイコンを足す | クリックできる要素だと認識される |
| アイコンを外す | 視線が文言に集中する |
| ボタン直下に一文を添える（「登録後もいつでも解約できます」） | 最後の不安が消える |
| ボタン上に残り枠数・期限を添える | 先延ばしされない |
ボタン直下のマイクロコピーは、ボタン自体を変えずに試せる最も低コストな打ち手です。 後述の事例では、アイコンの追加だけでリード送信が30%増えています（信頼度97%）。
⑤色のABテストは最後でいい
色を試すなら、次の形にします。
- × 赤 vs 緑（一般論に答えはない）
- ○ 背景とのコントラストが高い色 vs サイト配色に馴染む色
- ○ ページ内で唯一その色を使う vs 他要素と同じ色
「ページ内でその色を使っているのはCTAだけ」という状態が作れているかが本質です。 見出しもリンクもボタンも同じ色なら、色は手がかりになりません。
コントラスト比の考え方は「LPのコントラスト比改善でCVRを高める方法」で解説しています。
公開事例6選（信頼度つき）
海外で公開されているCTAのABテスト事例です。信頼度とサンプルサイズが報告されているものを優先して掲載しています。
| 変更内容 | 結果 | 信頼度 | サンプル・期間 | 実施 |
|---|---|---|---|---|
| ボタン文言を「Get A Quote（見積もりをする）」に変更 | オンライン申込 104%増 | 96% | 記載なし | Culligan |
| ボタン文言を「Book」→「Book Appointment」に変更（予約可能時間の表示は削除） | 予約数 30%増 | 99% | 17,000人・3日間 | HealthEngine |
| ボタンにアイコンを追加 | リード送信 30%増 | 97% | 4,406人（モバイル）・14日間 | Tinuiti / Swapalease |
| ボタンを価格の下から上に移動 | CVR 19%向上 | 95% | 記載なし | Greenhouse Group / Vodafone |
| 購入ボタンをページ上部にも追加（上下2か所） | 注文CVR 3.1%向上 | 90% | 記載なし | Blue Acorn iCi / Jimmy Jazz |
| ナビゲーション上部にライブチャットボタンを追加 | 注文数 20.43%上昇（チャット回数44%上昇） | 95% | 記載なし | Extra Space Storage |
（出典: DLPO ブログのABテスト事例）
この6件から読み取れることは3つです。
文言の変更が最も大きく動いています（104%増・30%増）。 配置の変更は19%・3.1%で、文言より小さい結果です。
「情報を足す」が必ず勝つわけではありません。 HealthEngineの事例では、予約可能時間を表示した小さいボタンより、何も足さない「Book Appointment」のほうが勝ちました。 情報量を増やすと、ボタンがボタンに見えなくなることがあります。
信頼度90%の結果は採用を急がないでください。 Jimmy Jazzの事例は信頼度90%です。一般的な基準である95%に達していないため、追試が必要な水準です。判定基準の考え方は「AAテストでABテストの有意性を見極める」で解説しています。
クリック率だけ上がるテストに注意
CTAのABテストで最も起きやすい失敗は、クリック率は上がったがCVRは下がるパターンです。
原因は「誤クリックを増やしただけ」のケースです。
| パターン | 何が起きるか |
|---|---|
| 文言を曖昧にした（「詳しく見る」） | 購入意向のない人も押す → フォーム離脱が増える |
| アイコンを目立たせすぎた | 押したが想定と違い、直帰する |
| 価格を隠してCTAを押させた | 次の画面で価格を見て離脱する |
CTAのテストでは、クリック率とCVRを必ず両方見てください。 片方だけで判定すると、中間指標を改善して本命指標を落とします。
実際に、価格表示を追加した公開事例ではクリック率が32%低下した一方で注文数は113%増加しています（信頼度99%、RedEye / TTSグループ）。クリック率の低下が正しい結果だった例です。価格表示の検証は「価格表示のABテスト」で詳しく扱っています。
DejamでCTAボタンのABテストを回す
CTAのテストは1本あたりの変更が小さく、本数で勝負する領域です。開発の順番待ちが入ると回りません。
ABテスト
デザイン変更テストで、文言・配置・色・アイコンをノーコードで差し替えられます。AIが自然言語の指示からテストコードを生成するため、「ボタンの文言を『無料で資料を見る』に変えたパターンを作る」で実装が済みます。
ヒートマップ
クリックヒートマップで、CTA以外のどこが押されているかが分かります。押されていない要素に近い位置へCTAを動かすより、すでに押されている場所にCTAを置くほうが確実です。クリックイベント計測でボタンごとのクリック数も取れます。
自動解析
CVRに貢献しているコンテンツをAIが解析します。「読まれている位置」が分かるため、CTAの配置テストの仮説が絞れます。
よくある質問
Q. CTAボタンのABテストは何から始めるべきですか？
A. 文言です。 公開事例でも文言の変更がもっとも大きく動いています（申込104%増）。実装コストもテキスト差し替えだけで最小です。色は最後に回してください。
Q. ボタンの色は何色が一番いいですか？
A. 一般的な正解はありません。 効くのは色そのものではなく背景とのコントラスト、そして「ページ内でその色を使っているのはCTAだけ」という状態です。色名で比較するテスト設計自体を変えてください。
Q. CTAボタンは多いほうがいいですか？
A. セクションの切れ目ごとに1つが目安です。 ただし追従CTAはモバイルで本文の可読性を下げるため、「あり／なし」自体をテストしてください。
Q. クリック率が上がったのにCVRが下がりました。なぜですか？
A. 購入意向のないユーザーのクリックを増やした可能性が高いです。 文言を曖昧にした場合や、価格を隠してCTAを押させた場合に起きます。CTAのテストではクリック率とCVRを必ず両方見てください。
Q. 事例の「104%増」は自社でも出ますか？
A. 出ません。 業種・流入経路・既存のボタン文言が違うためです。事例は仮説のネタとして使い、数値は自社で取り直してください。アイデアの一覧は「ABテストのアイデア52選」にまとめています。
まとめ
CTAボタンのABテストについて、要点を整理します。
- 検証順は文言 → 配置 → サイズ → アイコン → 色
- 「送信」「お申し込み」のままのボタンは改善余地が大きい
- 配置は「価格表・プラン表の上」が有力（公開事例でCVR19%向上）
- 色は一般論で比較しない。コントラストと「CTAだけがその色」かで設計する
- ボタン直下のマイクロコピーは、最も低コストな打ち手
- 公開事例は信頼度を確認する。 90%は追試が必要な水準
- 情報を足せば勝つわけではない（時間表示を削ったほうが勝った事例がある）
- クリック率とCVRは必ず両方見る。 クリック率の低下が正しい結果のこともある
- モバイルのタップ領域は44px以上（アクセシビリティ要件）
CVR改善ならDejam！CTAの検証を開発待ちゼロで回す
Dejamは、LP制作・ヒートマップ分析・ABテスト・AI自動解析をオールインワンで提供するCVR改善特化ツールです。「ボタンの色を変えてみたが動かなかった」という段階から、本数を積んで成果を出すまでを総合支援します。
Dejamが選ばれる理由
- ワンプロダクトで完結: LP制作・ヒートマップ分析・ABテストをすべて単一ツールで実施
- 月額3万円〜利用可能: オプティマイズプラン月額3万円〜 / CMSプラン月額5万円〜 / オールインワン月額12万円〜
- ユーザー課金なし: 何名で使っても追加費用は発生しない
- ISMS認証取得: ISO/IEC 27001:2022 & JIS Q 27001:2023認証取得済み
- 毎週アップデート: 市場トレンドとユーザーリクエストに応じて機能を毎週拡充
- 権威ある実績: 代表がダイレクトアジェンダで2連覇。LPO顕彰制度「LPO AWARD」主催者
Dejamの主要機能
- LP/記事LP制作: ノーコード・コードの切り替えに対応。AIで生成したコードを直接取り込み可能
- ヒートマップ: 5種類（クリック/クリックイベント/熟読/滞在/離脱）。データ保存期間無制限
- ABテスト: デザイン変更テスト・リダイレクトテスト・ポップアップテストの3種類。AIが自然言語でテストコードを自動生成
- 自動解析: どのコンテンツがCVRに貢献しているかAIが自動解析。ゴールデンルート機能でページ遷移の最適パスも特定
- プロジェクト管理: 改善施策の進捗をチームで共有できる
CTAの文言・配置・色はDejamのデザイン変更テストで完結します。 クリックイベント計測とあわせて使えば、クリック率とCVRを同じ画面で比較できます。
