見出し画像

CTAボタン改善でCVR改善|クリック+34%でも購入は動かない。色より「言葉」を設計するABテスト

ボタンの色を変えたら、クリックは約34%増えました。なのに、購入はほとんど増えませんでした。

CTA改善の多くは「色」から始めますが、それは中間指標をいじっているだけです。筆者は20年近くABテストを回してきた現場の人間で、この媒体では一次データだけを書きます。媒体の考え方はこちら → https://note.com/abtest_shoritsu/n/n4042b05d8859


Webサイトの成果を大きく左右するCTA(Call to Action)とは、ユーザーに次の行動を促すためのボタンやリンクを指します。この重要拠点を前にして、多くの現場のマーケターが「まずはコンバージョンボタンの色を変えてみよう」と考えがちですが、実はそこに落とし穴があります。CTAとCVの違いを正しく理解しないまま表面的なデザイン変更を繰り返しても、バケツの穴は塞がりません。本記事では、現場検証から導き出した、売上に直結する真の改善アプローチをお伝えします。


この記事でわかること

  • ボタンの色変更が最終的なコンバージョン(CVR)を動かせない根本的な原因

  • クリックを増やす言葉と、最終的な購入を決定づける言葉の決定的な違い

  • ユーザーの検討段階に応じて、勝つ言葉が180度反転する実務上の力学

  • 勝率を5割から7割へと引き上げるための、CTA設計における正しい優先順位


なぜ「色」から変えると数字が動かないのか

赤いボタンはクリック+34%。なのに購入はほぼ動かなかった。

現場の泥臭い検証で最も頻出する思い込みが、「アクションボタンの色を最も目立つ色にすれば、クリックが増えて売上も上がるはずだ」という仮説です。私はこの先入観が本当に正しいのかを検証するため、あえてその仮説に真正面から乗るテストを設計しました。視認性を極限まで高めた「赤いボタン」を用意し、クリック数だけで満足せず、購入完了という最終成果まで完全に計測する仕掛けを施したのです。木だけを見ずに森を見る、つまり中間指標に騙されないための勝率設計の初手でした。

あるECサイトで実施したこのABテストの結果は、極めて示唆に富むものでした。用意した赤い目立つボタンは、狙い通りにクリック率が約+34%という明確な有意差をつけて勝利したのです。しかし、その先のページを通過した最終的な「購入完了率」を測定すると、数値の改善は+0.1%未満に留まり、実質的にはほぼ無風という結果に終わりました。つまり、クリックは増えたものの、実際に財布を開くユーザーの数は全く変わっていなかったのです。

なぜこのような現象が起きたのでしょうか。レポートが示した理由は明快で、目立つ色はユーザーの視線を集めてボタンを押させる「視認性」を高めるものの、ユーザーがその商品を買うという「動機」そのものは1ミリも高めないからです。色が動かすのはあくまでクリック率という中間指標に過ぎず、コンバージョンボタンの色を何色にしようが、購入の意思決定には寄与しません。「ボタンの色は何色がいいか」や「LPのボタンの色」を議論すること自体が、実は本質から外れているのです。CTA改善を色から始めるのは、バケツの穴を放置したまま水を勢いよく注ぐようなものであり、最も効果の小さい要素を最初にいじる悪手と言えます。

クリックさせる言葉と買わせる言葉は違う

クリックさせる言葉と、買わせる言葉は違う。

色神話の次に現場のマーケターを惑わせるのが、「押したくなるボタンの文言」という甘い響きです。引きの強いキャッチコピーや興味をそそる言葉を使えば、確かにクリック数は跳ね上がります。しかし、その言葉は本当に「買う人」を増やしているのでしょうか。この疑問を解消するために、期待をあえて強烈に煽る文言を配置し、クリックの瞬間から最終的な購入完了までを一本の線で繋げて計測するテストを設計しました。

あるサービスサイトの入荷お知らせボタンを対象に検証を行いました。従来の控えめな表現から、ユーザーの心理を強く引きつける「入荷したらおしえて」という即時性と期待感を持たせたコピーへ変更したパターンを用意したのです。結果として、この引きの強いコピーを冠したボタンは過去最高のクリック率を記録しました。しかし驚くべきことに、その後に実際に案内が届いてからの最終的な購入完了率は、全テストパターンのうちで最下位に沈むという最悪の結果を招いたのです。同様の型を持つテストでも、全く同じ「中間指標の裏切り」が複数確認されました。

期待だけを過剰に煽る言葉は一時的な興味でクリックを集めますが、購入の覚悟や納得感までは醸成しません。むしろ、ボタンを押した後の遷移先で「思っていたのと違う」という幻滅を生み、離脱を加速させる原因になります。つまり、ボタンの言葉とはユーザーを誘惑して「クリックさせる言葉」ではなく、すでに買う気になっている人を迷わせずに次へ進ませるための「背中を押す言葉」でなければならないのです。ここを見誤ると、数値を上げようとして逆に事業売上を毀損する博打になってしまいます。

勝つ言葉を見分ける「CTAコピーの4原則」

勝つ言葉か、負ける言葉か。4つの物差しで見抜く。

クリックの罠に陥らず、最終コンバージョン(CVR)を着実に引き上げる言葉を選ぶためには、確固たる物差しが必要です。テストの現場から磨き上げられた判断フレームワークが、次の「CTAコピーの4原則」です。私はすべてのボタン文言をこの4つの基準に照らし合わせて審査し、勝ち筋を設計しています。

  • 原則1 目的を語る:機能や便益ではなく、ユーザーがそのボタンの先で本当に達したい世界を記述する。避けるべき例は「次へ進む」「送信する」などのシステム都合の文言。

  • 原則2 脳内辞書を使う:ユーザーが日常的に使っている言葉を選び、企業側の造語や社内用語を徹底的に排除する。避けるべき例は「スマート手続き」「プレミアムエントリー」などの独自呼称。

  • 原則3 売上を死守する:中間指標(クリック)の増減に一喜一憂せず、最終CVの数字だけを判断軸に据える。避けるべき例はクリックを稼ぐためだけに期待を過剰に煽るコピー。

  • 原則4 読者が得るものを主語にする:書き手や売り手の「買ってほしい」という都合ではなく、読者が手にする果実を主語にする。避けるべき例は「会員登録を申し込む」「注文を確定させる」などの義務的表現。

先ほどの「入荷したらおしえて」という言葉は、この原則に照らすと「原則3 売上を死守する」を破り、ただクリックを誘発した典型例と言えます。また、売り手都合のシステム用語で埋め尽くされたボタンは、ユーザーに「面倒な手続きが始まる」という心理的摩擦を与えます。この4原則をクリアした言葉だけが、ユーザーの脳内に余計なノイズを生ませず、流れるような遷移体験を実現させるのです。

「検討段階」で勝つ言葉は反転する

同じ「投入」が、一覧で勝ち詳細で最下位に沈んだ。

4原則を理解した上で、さらに実務家を悩ませるのが「一度勝ったはずの文言が、別のページでは全く通用しない」という現象です。私は、コンバージョンに近いカートに入れるボタンを検証するにあたり、1つの仮説を立てました。それは、「商品一覧ページで複数の選択肢を眺めているユーザー」と、「商品詳細ページで1つの商品をじっくり読み込んでいるユーザー」では、検討段階、つまり心理的な熟度が全く異なるはずだという見立てです。だからこそ、同じボタンであっても一覧と詳細を明確に切り分けて別々にテストを仕込みました。

あるECサイトでの検証結果は、この仮説を鮮やかに証明しました。商品一覧ページにおいては、従来の「カートに追加」という表現から、より行動を促す「カートに投入」という文言に変えたパターンが、統計的に有意な差をつけて勝利したのです。ところが、全く同じ「投入」という言葉を商品詳細ページにそのまま適用したところ、他のどのパターンよりもCVRが下がる最下位クラスに沈んでしまいました。一覧での勝者が、詳細では敗者に転落したのです。

この結果の背景には、ユーザーの検討段階の違いがあります。一覧ページをスクロールしている段階では、テンポよく候補を放り込む「効率性」が求められるため、「投入」という即物的な響きが噛み合いました。一方で、詳細ページを熟読しているユーザーは、サイズや素材を慎重に見極める心理状態にあります。そこに「投入」という乱暴で事務的な言葉が突きつけられたため、心理的な摩擦が生まれ、警戒されてしまったと考えられます。この条件ではこう出たという事実が示す通り、勝つ言葉は一様ではなく、ユーザーの検討段階によって反転します。他社の成功事例をそのまま自社に横展開してはならない最大の理由がここにあります。必ずページごとに別個の検証が必要です。

助詞・ひらがな漢字——1字の解像度

「いれる」より「入れる」。助詞ひとつで購入が動く。

先ほどの、詳細ページで「投入」という言葉が慎重な心理に嫌われたという結果を受け、私は次なる一手を設計しました。「では、詳細ページでじっくり悩んでいるユーザーの心理に、最も精緻に寄り添う表記の境界線はどこにあるのか」を突き詰めるテストです。言葉の解像度を、助詞1字、ひらがなと漢字の使い分けのレベルまで分解して同時に検証を走らせました。まさに、後出しジャンケンを成立させるための微細な網の目の仕込みです。

商品詳細ページの再テストを走らせた結果、ひらがな表記の「カートにいれる」よりも、漢字を交えた「カートに入れる」の方が、購入完了率において統計的に有意に勝利を収めました。さらに驚くべきことに、助詞の「に」と「へ」の差、すなわち「カートに入れる」と「カートへ入れる」という、わずか1文字のニュアンスの違いによっても、最終的な購入完了率のデータに明確な優劣が出たのです。

この結果から、言葉の印象はたった1文字で劇的に変化するという仮説が成り立ちます。「カートに入れる」という漢字表記は、画面全体を引き締めて見せ、手続きとしての信頼感や確実性を担保した可能性があります。また、助詞が持つ微細なニュアンスが、詳細を読み込んで購入直前まで来ているユーザーの無意識の心理にカチリと噛み合ったと考えられます(仮説)。言葉の解像度は、文字通り「1字」の差で有意差をもたらします。定説を鵜呑みにせず、自社のユーザーに届く表現の正解を自らの手で検証し続ける価値は、この1字の重みに隠されているのです。

ボタンの外側で不安を消す——マイクロコピー

勝負はボタンの中だけではない。外側の一言で不安を消す。

ここまではボタン本体の中にある言葉に焦点を当ててきましたが、勝率をさらに盤石にするための設計思想として、ボタンの周辺領域の活用が挙げられます。私は、ユーザーがコンバージョンボタンを押す直前に抱く「最後の迷いや不安」をいかにして摘み取るかという課題に対し、ボタンの外側に小さな補助文言を添える設計を重視しています。これが「マイクロコピー」と呼ばれるアプローチです。

例えば、ECサイトの決済手前であれば「送料無料」「いつでも返品可能」といった一言をボタンのすぐ近くに配置します。あるいは、資料請求のボタンであれば「1分で入力完了」「この後に料金が発生することはありません」といった、この後に起こる出来事を正確に予告する一言を添える手法です。これらはすべて、先述した「CTAコピーの4原則」の応用であり、ユーザーの検討段階に応じた摩擦の引き算に他なりません。かつて紙の資料請求で入力項目の重さに悩んでいたサイトが、メールアドレスのみで即座に閲覧できるデジタルパンフレットのフォームを新設し、心理的ハードルを徹底的に下げることで、紙の約2倍のCVを獲得しCRMの接点を一気に3倍に増やした実例があります。これも「摩擦を減らす」設計思想が共通して活きた結果と考えられます(仮説)。

ボタンの周囲にどんな不安の解消剤を置くべきかは、サイトの性質によって異なります。重要なのは、具体的なUIや数字を勘で創作することではなく、ユーザーがボタンを押すその刹那に、頭の中でどんなリスクを懸念しているかを徹底的に想像することです。ボタンの内側と外側が美しく連動したとき、遷移のハードルは極限まで下がり、未開拓だったCVが目覚め始めます。

色は「最後に」効く=CTA設計の優先順位

色は最後でいい。まず言葉、色は原色で全方位→反復。

ここまでの知見を統合し、無駄な打席を減らして勝率を5割から7割へと引き上げる看板メソッドが「勝率設計」です。ABテストの成功率は一般的に4打数1安打、つまり約25%程度と言われていますが、それはOptimizelyが2億回超のデータを分析したマクロな一般論に過ぎません。規律ある実務家は、以下の優先順位に従ってテストを事前に設計し、成功確率を意図的にコントロールします。

  • 優先度1 言葉(目的の提示):4原則に基づき、ユーザーの行動目的を定義する最重要要素。

  • 優先度2 検討段階との一致:一覧か詳細か、新規か既存か(ログイン有無)で訴求を出し分ける。

  • 優先度3 配置・サイズ・視認性:スクロールに追従するフローティングCTAなどを検討し、存在を適切に伝える。

  • 優先度4 色(収束のための要素):特定色への依存を捨て、全方位探索から徐々に最適解へ絞り込む。

優先順位の最後に位置する「色」ですが、決して無意味なわけではありません。色をテストする際は、勘で1色を選ぶのではなく、勝率設計の色版を用います。まずは青・緑・オレンジ・赤・黄といった原色で全方位に振り、どこに正解の方向性があるかを広く探る多パターン探索から始めます。そこでチャンピオンが出たら、その周辺色に補色やまだ試していない色を混ぜて反復テストを行い、局所最適を避けながら少しずつ正解の色へと収束させていくのです。一発で当てようとせず、反復によって勝ち筋を設計するアプローチをとります。

また、こうしたABテストを進める前段階では、ヒートマップなどの他手法との役割分担が欠かせません。ヒートマップは「ユーザーがどこで詰まり、どこを読んでいるか」という課題の特定に優れており、ABテストはその課題に対する「改善の正解探し」を受け持ちます。両者は競合するものではなく、組み合わせることで最大の威力を発揮します。多くのパターンを仕込み、ログイン有無などのセグメントを最低3種設定して後出しジャンケンの構造を作る。この規律こそが、博打ではない継続的な成果を生み出すのです。

よくある質問

色は何色? 文言は何パターン? 現場の基準値で答える。

CTAの改善方法はありますか?

色より先に、言葉です。押した先で何が起こるかを想像させる文言に変えると数字が動きます。「送信する」より「店舗で詳しく聞いてみる」。助詞ひとつの違いでも差が出ます。

CTAボタンを目立たせる方法は?

背景に埋もれない視認性は前提です。ただし目立たせてクリックが増えても、購入が動くとは限りません。ボタンを赤くしてクリックが+34%伸びたのに、購入はほぼ動かなかった実測があります。

CTAボタンを作るコツは?

飾る前に「結局、何が言いたいか」を1つに定めることです。軸が決まってから、言い換えで幅を出します。新規と既存で文言を出し分けるのも有効です。

クリック率を改善するにはどうすればいいですか?

クリック率だけなら、色や強い訴求で上げられます。ただし見るべきは最終CVとの整合で、クリックだけ伸びて購入が動かない改善は採用しないのが原則です。

ボタンの色は何色がいいですか?

特定の色に普遍の正解はありません。「ボタンの色は何色」という問いに対する答えは、「検証の順番を正しく守り、言葉を固めた後に最後に色を詰める」という設計手順そのものです。自社のサイト内で警戒されずに最も目立ち、押したくなる色を、原色での全方位探索から始めて反復検証のプロセスを経て見つけ出す必要があります。

CTAボタンにつける文言のパターンはどれくらい試すべきですか?

ユーザーの検討段階(一覧か詳細かなど)と、訴求の方向性を掛け合わせて複数パターンを用意するのが理想です。トラフィックが許すのであれば、訴求の方向を180度変えた真逆の案、いわゆるサイドチェンジを含めて多めに仕込むことで勝ち筋に当たりやすくなります。ただし、月数千から1万PV規模のサイトであれば、1パターンあたり最低でもCV30件以上(訪問200以上)を確保できる5パターン前後を目安に設計してください。

うちのサイトはCV数が少ないのですが、ABテストは実施できますか?

テスト可否の真の判断軸は、最終CVの数ではなく「ページの訪問者数」です。改善対象のページに月1万件以上の訪問が望ましいですが、もし訪問者が足りない場合は、導線の上位へ遡るか、最終CVのカウントではなく「カート遷移」「入力開始」といった手前のマイクロCVを計測指標に設定することで十分にテストを回せます。期間は曜日の波を均すため、最低2週間(平日・週末を各2回以上含む)を必ず確保してください。訪問者数が極端に少ない場合は、ABテストよりもヒートマップやユーザーテストによる課題特定を先行させるべきです。

まとめ

  • CTA改善において「色」が動かすのは視認性という中間指標であり、最終CVへの影響度は低いため最優先でいじるべきではない。

  • 言葉の役割は「クリックさせること」ではなく「買う気のあるユーザーを迷わせずに次へ進ませること」である。

  • 「CTAコピーの4原則」を物差しとして言葉を磨き、ユーザーの「検討段階」に応じて一覧と詳細で文言を出し分ける設計が不可欠。

  • 勝率設計の規律に基づき、効果の大きい「言葉」から着手し、セグメントと多パターンを事前に仕込んで検証を反復する。

本気でCVを動かしたいあなたへ

ボタン1つの裏側にある「言葉の設計」の深さや、本記事にはどうしても載せられなかった失敗事例(クリックが爆伸びした一方でCVが沈んだ生データと検証レポート)の数々は、無料のニュースレターで生々しく配信しています。机上の空論ではなく、明日の実務でCVRを本気で上げたいと戦っているあなたは、ぜひ購読して現場の武器を手に入れてください。さらに、ご自身のチームで自走してテストを回したい方向けの実践マニュアル(有料note)や、社内のバケツの穴を一緒に塞ぐ個別のご相談・伴走プランもご用意しています。

色や形で差が出ない理由と、判定基準の引き方はこちら。https://note.com/abtest_shoritsu/n/n8b70f9acb2ce

この記事があなたの現場の役に立ったら、スキを押してもらえると執筆の励みになります(noteアカウントが無くても、SNS内のブラウザからでも押せます)。


なお、クリックの伸びに騙されずに勝ち負けを捌く手順は、CV整合チェックリストにしてあります。『ABテスト勝率設計の実務キット』の購入特典として、そのままお渡ししています。いま購入すると、今後の増補も追加料金なしで読めます。

▼ABテスト勝率設計の実務キット(第1部まで無料で読めます)


【無料特典】ABテストが初めてでも、大丈夫
無料メルマガにご登録いただいた方に、「あなたのWebサイトの改善ポテンシャル診断」(10項目・1枚)をお渡ししています。✓を付けていくだけで、広告を増やさずに売上を伸ばせる“伸びしろ”と、最初の一歩が見えてきます。メルマガでは、記事にしづらい失敗談や現場の裏側も配信中です。
▼無料メルマガに登録して、診断を受け取る
https://abtestshoritsu.substack.com

顧客体験を変え、売上を変え、人生を変える
——次の一手は、あなたのサイトの中にあります。

いいなと思ったら応援しよう!