「押されないのはボタンが目立っていないからだろう。色を赤にして大きくすれば、数字も動くはずだ」。ボタンの改善はデザインの担当範囲という分担が社内で定着していると、手を入れられる場所が見た目に限られるため、まずは色とサイズから試すことになります。
しかし、弊社はこれまで多くの企業のオウンドメディアで、記事の本文からCVボタンまでをひと続きに設計してきました。その経験から言えるのは、色やサイズが効くのは3つの原因のうち1つだけだということです。どの原因で止まっているのかを決めないまま見た目に手を入れても、成果が出るかどうかは、たまたま原因と一致したかどうかで決まってしまいます。
本記事では、CVボタンとは何かという整理から、押されない原因を「見えていない」「押す理由がない」「押した先が不安」の3つに切り分ける手順、そして変更の効果を判断するために必要な母数の考え方まで、記事制作の現場の視点で順を追ってお伝えします。
- CVボタンとCTAボタンの呼び分けと、CVの種類によって変わる設計
- 押されない原因を3つの層に切り分けて特定する手順
- 「ボタンに見えないボタン」を作ってしまう設計上の原因
- ボタンの文言を、ボタンの中だけで考えると効かない理由
- 変更の効果を判断するために、どれだけの母数が必要か
CVボタンとは、コンバージョンの直前に置く最後の部品
CVボタンとは、Webサイトの訪問者に取ってほしい行動の入口として設置するボタンを指します。CVはコンバージョン（Conversion）の略で、資料請求、問い合わせ、購入、会員登録など、そのサイトが成果と定めた行動のことです。読者がページを読んで何かを決めたとき、最後に指が触れる場所。それがCVボタンにあたります。
呼び方は現場によって揺れます。CVボタン、コンバージョンボタン、CTAボタン、申し込みボタン。おおむね同じものを指していますが、含む範囲が少しずつ違うため、社内で改善の議論を始める前に揃えておくと話が早く進むでしょう。
CVボタンとCTAボタンは、どこで呼び分けるか
CTAはCall To Action（コール トゥ アクション）の略で、日本語では行動喚起と訳されます。CTAボタンが指す範囲は、資料請求に限りません。関連記事へ誘導するボタンや、SNSのフォローボタンまで含みます。
一方のCVボタンは、そのサイトが成果として計測している行動に直結するボタンに限られます。関連記事へのリンクはCTAボタンではあっても、CVボタンではありません。改善の優先順位を決めるときには、この線引きが効いてきます。計測対象になっていないボタンをいくら磨いても、報告できる数字は増えません。
資料請求と購入では、ボタンの設計が変わる
同じCVボタンでも、その先で読者が負う負担の大きさによって、必要な作りは変わります。無料の資料ダウンロードは、メールアドレスを渡す程度の負担。一方でBtoBの問い合わせは、社名と担当者名を出して営業と接触することを意味しますし、EC購入は決済まで進みます。
負担が大きい行動ほど、ボタンの見た目より、押した先で何が起きるかの説明が結果を左右します。逆に負担が軽い行動では、そもそも気づかれているかどうかの比重が大きくなる。この違いを踏まえずに他社の事例を持ち込むと、うまくいかない理由が見えないまま作業だけが増えていきます。
経営者うちのサイトでは、記事下の問い合わせボタンがほとんど押されていません。デザイン会社に相談すると色を変えましょうと言われるのですが、それで本当に直るのか判断がつかなくて。
Writers-hub編集部
色を変えて直るのは、読者がボタンを見つけられていなかった場合に限られます。まず、ボタンが表示されている位置まで読者が届いているかを見てください。到達しているのに押されていないなら、原因は見た目ではなく、ボタンの手前で読者が何を受け取ったかのほうにあります。
関連記事：コンテンツマーケティングの基礎知識を総まとめ｜やり方から成果につなげる方法まで徹底解説
押されないCVボタンは、3つの層のどこかで止まっている
改善が空回りする一番の理由は、原因の層と打ち手の層がずれていることです。押されないという結果は同じでも、そこに至る経路は3つに分かれます。
1つ目は認識の層。ボタンがそこにあると気づかれていない状態です。2つ目は動機の層。存在は認識されているものの、押す理由が読者のなかに立っていない状態を指します。3つ目は不安の層で、押したい気持ちはあるのに、押した先で何をされるか分からず手が止まっている状態です。
3つの層は、直すべき場所がまったく違います。認識の層はデザインと配置の問題。動機の層は文言と、その手前の本文の問題。不安の層は情報開示の問題です。色を変える打ち手が効くのは、3層のうち1層だけという事実を押さえておくと、施策の当たり外れが減ります。
どの層で止まっているかを見分ける
層の特定は、感覚ではなく数字で行えます。特別なツールを追加しなくても、アクセス解析とヒートマップの基本機能があれば足ります。
スクロール到達率か、ページ内の該当位置までの表示回数を見ます。記事下にボタンを置いている場合、そもそも記事下まで読み進めた人が少ないことは珍しくありません。到達が少ないなら、ボタンではなく配置と本文の長さの問題です。
クリック数をページビュー数ではなく、到達数で割ります。この分母を取り違えると、ボタンの実力を実際より低く見積もりかねません。到達に対するクリック率が極端に低ければ、認識か動機の層を疑います。
ヒートマップの熟読エリアで、ボタン周辺が読まれているかを確認します。周辺が読まれていないなら認識の層、読まれているのに押されていないなら動機か不安の層に絞り込めます。
押されてはいるものの、フォームの表示直後に離脱が集中しているなら、ボタン自体は機能しています。手を入れるべきはボタンではなくフォーム側です。
ここまでで、原因はほぼ1つの層に絞り込めているはずです。以降のセクションでは、層ごとに何を直すのかを順に見ていきます。
関連記事：CTAとは？意味と種類、成果につながる設計と改善の手順
認識の層｜ボタンに見えているか、そこまで届いているか
認識の層でつまずいているサイトには、共通する特徴が3つあります。ボタンに見えない、広告に見える、そもそも到達していない、の3つです。
フラットデザインで「押せる」記号が消えていないか
画面上の要素が押せるかどうかを、読者は無意識の記号で判断しています。立体的な影、角丸の枠線、周囲と切り離された背景色。こうした記号が備わっていれば、文字を読む前に押せる場所だと分かる。
ところが装飾を削ぎ落とす設計を進めた結果、影も枠線もない平面の色面になり、見出しの帯と区別がつかなくなっているページを見かけます。デザイン全体の統一感は上がっても、押せる場所であるという信号は弱まっているわけです。
判断の目安として、そのページのスクリーンショットを見せながら「押せそうなところを指してください」と社外の人に尋ねてみてください。5秒以内に指が止まらないなら、記号が足りていない状態です。社内の人間は場所を覚えてしまっているため、この確認には向きません。
寸法にも下限があります。WCAG 2.2の達成基準2.5.8では、ターゲットのサイズを24×24CSSピクセル以上とすることが求められています。ボタンと背景の色の差については達成基準1.4.11が3対1以上、ボタン内の文字と背景の間は達成基準1.4.3が4.5対1以上（大きな文字は3対1以上）。数値で測れるため、社内レビューで感覚のぶつかり合いになりにくい指標です。
※ 出典: Web Content Accessibility Guidelines（WCAG）2.2 達成基準2.5.8「ターゲットのサイズ（最小）」、達成基準1.4.11「非テキストのコントラスト」、達成基準1.4.3「コントラスト（最低限）」
広告と見分けられているか
読者は広告らしい見た目の要素を、内容を確認する前に視線から外す習慣を持っています。派手な色の横長バナー、囲みの中に画像とキャッチコピーが入った区画、ページ右上のカラフルな四角形。これらは自社の案内であっても、広告と同じ形をしていれば同じように無視されます。
対処は、装飾を足すのではなく減らす方向です。本文と同じ文字組みで見出しと説明文を置き、そのなかにボタンを1つ据える。画像を使わない構成のほうが、記事ページでは反応が良くなる傾向があります。
- ページ幅いっぱいの横長画像として作られたCVエリア
- 本文と無関係な人物写真やイラストを敷いた背景
- 点滅や連続する動きで注意を引こうとする表現
- 本文の文字色と無関係な配色で組まれた囲み
そもそもボタンまで届いているか
記事の末尾にだけボタンを置いている場合、押されない最大の理由が到達不足であることは少なくありません。3,000字の記事を最後まで読む人の割合は、テーマや流入元によって大きく変わります。自社のスクロール到達率を一度測ったうえで、ボタンの位置を決め直すのが順当な進め方でしょう。
関連記事：LPOとは？SEO・EFOとの違いと改善の手順、成果につながる施策
動機の層｜文言はボタンの中だけで決めない
認識の層をクリアしているのに押されないなら、次は文言です。ここで多くの現場が、ボタンの中の文字だけを検討対象にしてしまいます。
ラベルは「作業」ではなく「読者が受け取るもの」で書く
「送信」「こちら」「クリック」といった語は、読者ではなくシステム側の動作を指しています。押した結果として自分が何を得るのかが分からないため、判断材料になりません。
書き換えの方向は、読者が受け取るものを主語に置くことです。「資料をダウンロード」より「料金表と導入事例を見る」、「お問い合わせ」より「30分の無料相談を予約する」。文字数は増えますが、押した先で得られるものが具体的なほど押されやすくなるという関係は、多くの現場で観察できます。
ボタンの手前の3行が、実質のCVボタン
ボタンのラベルに入る文字数は、せいぜい15字前後。読者に決断を促すだけの情報は、その分量には収まりません。実際に読者の判断を作っているのは、ボタンの直前に置かれた2〜3行の本文にほかなりません。
たとえば同じ「無料相談を予約する」というボタンでも、直前が「ご不明な点はお気軽にご相談ください」なのか、「今の記事本数のままで流入が伸びるかどうかは、既存記事の検索順位を見れば判断できます。その診断だけでもお受けしています」なのかで、押す理由の立ち方が変わります。前者は誰にでも当てはまる呼びかけで、読者が自分の状況と結びつけられません。
この構造は、CVボタンの改善が実際にはコンテンツの改善であることを示しています。デザインの担当者だけで進めると手詰まりになりやすいのは、直せる範囲がボタンの中に限られてしまうからです。
ボタンの手前の本文まで含めて、書き直す必要があると感じたら
CVボタンの直前の数行は、記事全体で何を説明してきたかの上に成り立っています。そのため、ボタンの文言だけを差し替えても噛み合いません。合同会社Writers-hubでは、記事の構成から本文、ボタン手前のリード、ラベルの文言までを一続きで設計し直す制作支援を行っています。既存記事の診断からご相談いただけます。
不安の層｜押した先で何が起きるかを、押す前に書く
ラベルを直しても数字が動かない場合、残っているのは不安の層です。読者は押したい。ただ、押したあとに何が待っているか分からないため、指が止まっている状態を指します。
BtoBの問い合わせフォームで特に強く出ます。営業電話がかかってくるのではないか、入力項目が多いのではないか、検討中の段階で連絡するのは早すぎるのではないか。こうした懸念は、ボタンを大きくしても消えません。
マイクロコピーで先に開示する4項目
マイクロコピーとは、ボタンの直下や周辺に小さく添える補足の文言です。ここに書く内容は、読者が抱く懸念を先回りして潰すものに絞ります。
- 入力にかかる時間、または入力項目の数（入力は3項目、30秒程度など）
- 押した直後に表示される画面（フォームなのか、資料がすぐ開くのか）
- 営業連絡の有無と、連絡が来る場合のタイミング
- 費用の発生有無（無料であれば、その旨を明示する）
4項目すべてを書く必要はありません。自社の問い合わせで実際に多い質問から、上位2つを選べば十分でしょう。何が懸念されているか分からない場合は、営業担当に「初回の連絡でよく聞かれること」を尋ねるのが最短です。
不安を消すつもりで書いた文言が、逆に不安を呼び起こすことがあります。「しつこい営業は一切いたしません」と書くと、営業されるという前提が読者の頭に浮かびます。「ご相談後のご連絡はメールのみです」のように、否定形ではなく事実の記述に置き換えてください。
ボタンの数は、押す気になった位置に合わせる
CVボタンは1つに絞るべきだという説明をよく見かけます。この主張が成り立つのは、行き先が複数あって読者が選択を迫られる場合です。同じ行き先へのボタンを、記事の途中と末尾の2か所に置くことは、選択を増やすことにはなりません。
長い記事では、読者が決断する位置がばらつきます。冒頭で結論に納得する人もいれば、事例まで読んで判断する人もいる。行き先が同じなら、複数箇所に置いて問題ありません。避けるべきなのは、資料請求と無料相談と問い合わせが並列で並び、どれを選ぶべきか読者に考えさせてしまう構成のほうです。
変えた結果を判断する｜どれだけの母数が必要か
改善施策で最も多い失敗は、母数が足りない状態で結論を出してしまうことです。
月に30件のクリックしかないボタンで、変更前後に3件の差が出たとします。この差は、施策の効果かもしれませんし、単なる週ごとのばらつきかもしれません。両者を区別する材料がないまま「効果があった」と報告してしまうと、次の判断の土台まで狂います。
見る指標を3つに分ける
CVボタンの評価には、少なくとも3つの数字を分けて見る必要があります。
指標 | 計算方法 | 何が分かるか |
|---|---|---|
到達率 | ボタン位置への到達数 ÷ ページビュー | 配置と記事の長さが適切か |
クリック率 | クリック数 ÷ 到達数 | ボタンと手前の本文が機能しているか |
完了率 | CV数 ÷ クリック数 | フォームや遷移先に問題がないか |
3つを分けずに「CVR」というひとつの数字だけを追うと、どこで失っているのかが見えなくなります。クリック率が高いのに完了率が低いなら、ボタンは十分に働いていて、直すべきはフォーム側です。
ABテストを実施する場合、判定に必要な母数は、元のクリック率とどの程度の改善を検出したいかによって変わります。小さな差を確実に検出しようとするほど、必要な数は跳ね上がります。テスト実施ツールの多くには必要サンプル数の計算機能が付いているため、開始前に必要期間を見積もっておいてください。数週間で足りないと分かった場合は、ABテストではなく変更前後の期間比較で進め、判断の確度が落ちることを前提に扱うほうが現実的です。
1回に1か所しか変えない
色と文言と配置を同時に変えると、数字が動いても理由が分かりません。次に別のページへ応用するときに、何を持っていけばよいのかが分からないままになります。
面倒に見えますが、変更は1か所ずつ。そして変更した内容と日付を記録に残す。この2つを守るだけで、半年後に「なぜこの形になったのか」を説明できる状態が保てます。
切り分けまではできたものの、直す手が足りないとき
どの層で止まっているかが分かっても、記事本文の書き直しやボタン手前のリード文の設計は、片手間では終わりません。合同会社Writers-hubでは、既存記事の診断からCV導線の設計、本文の制作までをまとめてお引き受けしています。まずは現在のサイトで何が起きているかを一緒に確認するところから始められます。
まとめ｜色を変える前に、どの層で止まっているかを決める
CVボタンの改善は、打ち手の数より順番で結果が変わります。ボタンが見えていないのか、見えていても押す理由が立っていないのか、押す理由はあるが押した先が不安なのか。この3つを分けたうえで、該当する層にだけ手を入れる。
そして層の特定は、到達率、クリック率、完了率という3つの数字を分けて見れば足ります。特別なツールを新たに導入する必要はありません。
改善が最も難しいのは動機の層です。ボタンの中の文言だけでは足りず、その手前で記事が何を説明してきたかまで遡らなければ動きません。合同会社Writers-hubでは、SEO記事の制作を通じて、本文からCVボタンまでを一続きの導線として設計する支援を行っています。既存記事のどこで読者が離れているかの診断からご相談いただけます。
特定の色に決まった正解はありません。判断の基準になるのは色そのものではなく、そのページの他の要素で同じ色を使っていないかどうかです。見出しやアイコン、罫線にも同じ色が使われていると、ボタンだけを目で見つけられません。ボタン専用の色を1つ決めて、他の場所からその色を外す進め方をおすすめします。
行き先が同じであれば、複数箇所に置いて構いません。長い記事では読者が決断する位置がばらつくため、途中と末尾の2か所に置くことは有効です。避けたいのは、資料請求と無料相談と問い合わせのように行き先の違うボタンを並べ、読者に選択を求める構成のほうです。
期間ではなく、集まったクリック数で判断してください。日数だけで区切ると、曜日や流入の波の影響を切り分けられません。クリック数が少ないサイトでは、数週間では判断材料が揃わないこともあります。その場合は結論を急がず、記録だけ残して次の施策に進むほうが現実的です。
精度は落ちますが可能です。アクセス解析でボタンのクリックをイベントとして計測し、ページビューとクリック数の比率を見るところから始められます。到達率が測れないぶん、記事の長さを変えた場合の比較ができない点だけ注意してください。
