コンバージョンボタンとは？押す前の不安から位置と文言を決める方法

「コンバージョンボタンは、ページを仕上げるときに色と形を整える部品」。サイトの制作では、本文の原稿が固まった後のデザインの工程でボタンを置くことが多く、ボタンを直すときも見た目から手を付けがちです。ところが、読者がボタンの手前で止まるのは、押した後に何が起きるのか、費用や手間がどれだけかかるのかが分からないときです。ボタンは、押す前の不安に答える文章とセットで作るものです。

本記事では、コンバージョンボタンの意味から、押す前の不安の見つけ方、位置と文言の決め方、ボタンごとの測り方まで、記事やページの文章を書く制作会社の視点で順を追ってお伝えします。

コンバージョンボタンとは

コンバージョンボタンとは、Webサイトで成果と決めた行動へ進むために押すボタンのことです。成果と決めた行動はコンバージョンと呼ばれ、問い合わせや資料請求、購入、会員登録などがあたります。CVボタンやCTAボタンと呼ぶこともあり、CTAボタンは関連記事への案内のような、成果に数えない行動のボタンまで含めた呼び方です。

コンバージョンボタンの色や大きさは、読者にボタンだと気づいてもらうための条件です。気づいた読者は、ボタンの上下にある文と文言を読んで、押してよいかを判断します。ボタンは、文言と位置と周りの文章の3つで1組と考えると、直す場所を見つけやすくなります。

押す前に読者が抱く4つの不安

読者がコンバージョンボタンの手前で止まるのは、押す前に抱いた不安への答えが、ボタンの近くに見当たらないときです。押す前の不安は、次の4つに分けられます。

ボタンがそもそも見えていないのか、押した先が不安なのかを数字で見分ける方法は、CVボタンが押されない原因の切り分け方にまとめています。

Web担当者

問い合わせボタンを目立つ色に変えたのに、押される数がほとんど変わりません。

Writers-hub
編集部

色を変えたことは、ボタンに気づいてもらうために役立っています。次は、ボタンの上下の文を見てください。費用がかかるのか、押した後に営業の電話が来るのかが書かれていなければ、読者はそこで止まります。

自社の読者の不安は、すでに届いている質問から集めます。集める先は次の4つです。

• 問い合わせフォームの自由記述欄に書かれた質問
• 初回の打ち合わせや電話で、最初に聞かれること
• 購入や申し込みの前に、メールやチャットで届いた質問
• 解約や返品、申し込みの取り消しの理由

集めた質問を4つの不安に分けて数えると、件数の多い不安から、どのボタンの近くで答えるかを決められます。

ボタンを置く位置と答える不安

ボタンを置く位置は、その位置までに読者がどの不安への答えを読んだかで決めます。同じ行き先のボタンでも、位置ごとに残っている不安が違うので、近くに置く文も変わります。位置ごとの違いは次の4つです。

答える文を書けない位置には、ボタンを置きません。不安が残る位置のボタンは、読者にとって押す理由がまだないボタンだからです。

同じ行き先のボタンは、2か所以上に置いてかまいません。読者が押してよいと考える位置は、人によって違うからです。資料請求と問い合わせのように行き先の違うボタンを横に並べ、どちらを押すかを読者に選ばせる置き方は避けます。

ボタンの文言の決め方

ボタンの文言は、押した後に読者の画面で起きることを、動詞を入れて書きます。AppleのHuman Interface Guidelinesの「Buttons」にも、ボタンの働きを伝えるために、ラベルを動詞で始めることを考えるよう書かれています。例に挙げられているのは、商品をカートに入れるボタンの「Add to Cart」です。日本語の文言では「カートに入れる」のように、動詞は終わりに来ます。

とりわけ見落とされがちなのが、ボタンの文言と、押した後に開く画面の食い違いです。「資料をダウンロード」と書いたボタンを押して入力フォームが開くと、すぐに資料が手に入ると思っていた読者は戸惑います。入力が必要なら「入力して資料を受け取る」のように文言に入力を含めるか、ボタンの下に入力する項目の数を書きます。

「無料」「1分で完了」のような言葉は、事実のときだけ書きます。入力に数分かかるフォームに「1分で完了」と書くと、ボタンは押されても、フォームの途中でやめる読者が出ます。用途ごとの文言の例は、CTA文言の作り方にまとめています。

押せると分かる色と大きさ

ボタンの色と大きさは、読者が押せる場所だと見分けられるように決めます。何色にすれば押される数が増えるかは、W3CやApple、Googleの公式の資料では確認できていません。公式の資料にある主な数値は、次の6つです。

WCAGの大きさの基準には、文章の中のリンクのように、例外になる場合があります。ボタンとして置く部品は、例外に当たらない前提で大きさを決めます。

WCAG 2.2の日本語訳は、ウェブアクセシビリティ基盤委員会が公開しています。

Web Content Accessibility Guidelines (WCAG) 2.2 (日本語訳)

Web Content Accessibility Guidelines (WCAG) 2.2 は、ウェブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨事項を網羅している。このガイドラインに従うことで、全盲又はロービジョン、ろう又は難聴、運動制限、発話困難、光感受性発作及びこれらの組合せ、並びに学習障害及び認知限界への一部の適応を含んだ、様々な障害のある人に対して、コンテンツをアクセシブルにすることができる。しかし、これらの障害のある人に対するあらゆる利用者のニーズに対処するものではない。このガイドラインは、あらゆる種類のデバイス (デスクトップ、ラップトップ、キオスク、及びモバイルデバイスを含む) におけるウェブコンテンツのアクセシビリティを扱う。このガイドラインに従うことは、一般にウェブコンテンツが利用者にとってより使いやすいものにもなる。

🌐 waic.jp

外部リンク

色は、ページのほかの部分で使っていない色をボタンにだけ使うのが一つの考え方です。見出しやリンクと同じ色のボタンは、色だけでは押せる場所かどうかを見分けにくいためです。形や動きの決め方は、CTAボタンのデザインにまとめています。

ボタンごとに表示とクリックを測る方法

ボタンの位置や文言を変えた結果は、ボタンが画面に表示された数と押された数を、位置ごとに分けて測ると比べられます。ページ全体の問い合わせの数だけでは、どの位置のボタンが押されたのか、読者がボタンまで届いたのかが分からないためです。Googleタグマネージャーでは、次の3つを設定します。

1. ボタンごとに、HTMLのid属性へ位置の分かる値を付ける（cv-top、cv-price、cv-endなど）
2. 「要素の表示」トリガーでIDを指定し、ボタンが画面に表示されたらGA4へイベントを送る
3. 「すべての要素」のクリックトリガーで「一部のクリック」を選び、Click IDがボタンのIDと同じときにGA4へイベントを送る

要素の表示トリガーは、選んだ要素がブラウザの画面内に表示されると発動します。既定では、要素の50％以上が画面に入ったときです。GA4へは「Google アナリティクス: GA4 イベント」のタグで送り、タグに付けたイベント名がGA4のレポートに表示されます。公開する前に、タグ マネージャーのプレビューとGA4のリアルタイム レポートで、イベントが届くかを確かめます。

Googleのイベントを設定する手順の例は、ボタンの文字であるClick Textを条件にしています。ただ、同じ文言のボタンを複数の位置に置くと、文字では位置を区別できません。位置ごとに分けるには、ボタンごとに付けたIDを条件にします。

Click IDには実際に押された要素のIDが入るため、ボタンの中にアイコンがあるとIDが一致しないことがあります。ボタンの中は文字だけにします。

手元のボタンを見直す5つの手順

手元のボタンは、ボタンの書き出しから変更の記録まで、次の5つの手順で見直します。計測は、文や文言を変える前に始めておくと、変える前の数字と比べられます。

答える文を足しても押される数が変わらないボタンは、行き先が、そのページの読者に合っていない場合があります。用語の意味を調べに来た読者が多いページなら、相談の申し込みより、資料のダウンロードのような手間の少ない行き先を試します。

コンバージョンボタンのよくある質問

コンバージョンボタンについて、よくある3つの質問に答えます。

ボタンに動きを付けてもいい？

ボタンに動きを付けるときは、読者が止められるようにします。WCAG 2.2の達成基準2.2.2、レベルAは、自動で始まり、5秒を超えて続き、ほかの内容と並んで表示される動きに、一時停止か停止か非表示の手段を求めています。マウスを乗せたときだけ色が変わる動きは、自動で始まらないので、この条件の対象外です。

画像で作ったボタンでもいい？

ボタンの文字は、画像にせずテキストで書きます。WCAG 2.2の達成基準1.4.5、レベルAAは、使っている技術で同じ見た目を表現できるなら、文字の画像ではなくテキストで情報を伝えるよう求めています。ロゴのように、見た目そのものが欠かせない場合は例外です。テキストのボタンなら、文言を変えるたびに画像を作り直さずに済みます。

フォームの送信ボタンも同じ考え方でいい？

フォームの送信ボタンも、押した後に起きることを近くに書きます。送信の直前に残りやすい不安は、返事がいつ、どの方法で届くかです。送信ボタンのすぐ上に返事の方法と時期を書き、文言は「送信」より「この内容で相談を申し込む」のように、押した後に起きることが分かる言葉にします。

まとめ｜ボタンは不安に答える文章と1組で作る

コンバージョンボタンは、押す前の不安に答える文章とセットで、位置と文言を決めて測ります。位置は、そこで残る不安に答える文を書ける所に決め、文言は押した後の画面で起きることで決めます。色と大きさは、公式の基準で押せると分かる最低限を満たしたうえで、ほかの部分と見分けられるようにします。

変える前に、ボタンごとの表示と押された数の計測を始めます。

私たち合同会社Writers-hubは、記事制作会社として累計8,000記事以上を制作してきました。ボタンの近くに置く文も、記事と同じく読者の疑問に答える文章です。どのボタンから直すか迷ったときは、ご相談ください。