CTA（行動ボタン）

CTAボタンの文言はどう決める？

CTAの文言は、「押すと何が起きるのか」をお客様の立場の動詞で書けば大丈夫です。お客様はボタンの前で、「これを押したらすぐ決済されるの？」「電話がかかってしまうの？」とまず心配するからです。

ボタンを押した後にお客様が負担に感じそうなことがあるなら、ボタンのすぐ下に短く書き添えます。「相談だけでも大丈夫です」「お支払いは次のステップです」といった1行が、ためらいを減らしてくれます。

ボタンの文言は短いほど良いですが、意味が伝わらなくなるほど削ってはいけません。2〜3語の中に「何を」と「どうするか」が両方見えるくらいがちょうどよいです。

ボタンの文言は、お客様が実際に使う言葉に合わせてください。美容室なら「施術の予約」より「カット・パーマの予約」のように、お客様が頭に思い浮かべる言葉のほうが早く読まれます。

メインボタンとサブボタンはどう分ける？

メインボタンはお店がお客様にいちばん取ってほしい行動1つで、サブボタンはまだ決めかねているお客様のための別の道です。たとえば美容室なら、「予約する」がメインボタン、「料金表を見る」がサブボタンになります。

メインボタンは塗りつぶした色で、サブボタンは枠線だけ、または文字リンクにして、重みに差をつけます。2つのボタンが同じ色・同じ大きさだと、お客様はどちらを押せばよいのか考え直すことになります。

ページごとにメインボタンを何にするか先に決めておくと、デザインの打ち合わせも短くなります。トップページは「予約」、料金ページは「この施術を予約」、アクセスページは「道順を調べる」のように、ページの目的に合わせて変えれば大丈夫です。

業種別の例では、カフェは「道順を調べる」、工房は「クラスに申し込む」、オンライン販売は「カートに入れる」がメインボタンになることが多いです。サブボタンは、まだ迷っているお客様のための「メニューを見る」「作品を見てみる」「口コミを見る」といったものです。

CTAボタンはどこに、どのくらいの大きさで置く？

CTAは、お客様が決断する場所のすぐそばに置きます。ファーストビュー、料金や説明を読み終えた地点、ページのいちばん最後が代表的です。

大きさは、指で正確に押せるくらいでなければなりません。Webアクセシビリティの国際基準WCAG 2.2では、押せる領域を最低24×24 CSSピクセル以上と定めており、重要なボタンはこれより余裕を持たせて作るのがおすすめです。ボタン同士がくっつきすぎていると隣のボタンを押してしまいやすいので、間隔もあわせて確認します。

スマホでは、画面の下部に「電話・予約」ボタンを固定しておく方法もよく使われます。親指が届きやすい位置なので便利ですが、内容を隠さないよう高さは低めにする必要があります。

ボタンがボタンらしく見えることも大切です。文字だけで枠線や背景がないと、お客様は押せるものだと気づかずに通り過ぎてしまいがちです。

CTAはどんな手順で作ればいい？

ボタンのデザインより先に、「お客様に何をしてもらうか」を決めるのが正しい順番です。以下のステップに沿って進めれば、ページごとに合ったボタンを決められます。

お店が小さいほど、メインボタンはオーナー様がいちばん早く対応できる連絡方法にするのがおすすめです。営業中に電話に出られないことが多いなら、「電話する」より「カカオトークで問い合わせ」や「予約する」をメインボタンにする、といった具合です。

ボタンの位置は、最初から完璧である必要はありません。公開後に実際に押された記録を見て動かすほうが、推測で決めるより正確です。

1. 01お店の売上につながる行動を書き出します。（予約、電話、カカオトークでのお問い合わせ、購入、来店）
2. 02その中でいちばん重要な1つをメインボタンに、残りの1〜2つをサブボタンに決めます。
3. 03ページごとにメインボタンを1つずつ割り当てます。
4. 04ボタンの文言を、お客様の立場の動詞で書きます。
5. 05ファーストビュー、説明が終わる地点、ページの最後にボタンを配置します。
6. 06スマホで親指を使って押してみて、大きさと間隔を確認します。
7. 07公開後、ボタンごとにどれだけ押されたかを記録し、文言と位置を磨いていきます。

CTAがちゃんと機能しているかはどう確認する？

ボタンが何回押されたか、そのうち実際の予約・お問い合わせにつながったのが何件かを見れば大丈夫です。アクセス解析ツールでボタンのクリックを「イベント」として記録しておけば、どのボタンが役に立っているかがわかります。

電話ボタンは押された回数まではわかりますが、通話につながったかどうかは別に確認する必要があります。店頭で「どちらでお知りになりましたか？」と尋ねる習慣もあわせて身につけると、数字を読み解きやすくなります。

文言を変えるときは一度に1つだけ変え、2〜4週間ほど様子を見るのがおすすめです。複数を同時に変えると、何が原因で変化したのかがわかりにくくなります。

訪問者がそれほど多くない小さなお店は、割合より件数を見るほうが向いています。1か月にボタンが何回押され、そのうち何件が実際の予約になったかを書き留めておけば、数か月後に変化が見えてきます。

CTAでよくある失敗は？

よくある失敗は、ボタンを置きすぎることです。「予約」「お問い合わせ」「電話」「カカオトーク」「Instagram」が1列に同じ大きさで並んでいると、お客様はかえって何も押さないこともあります。

「ここをクリック」「もっと見る」のように、前後の文脈がないと意味がわからない文言も避けるべきです。画面を音声で読み上げるソフトを使うお客様はボタンの文言だけを聞いて判断するため、Webアクセシビリティの基準でもリンクの目的がわかるように書くことを勧めています。

ボタンを押した後の画面もCTAの一部です。お問い合わせを送ったのに何の案内もなければ、お客様はきちんと送れたのかわからず、もう一度送ったり電話をかけたりします。「通常、数時間以内にお返事します」といった完了の案内を必ず入れてください。

CTAについて制作会社に何を聞けばいい？

制作会社には、「ボタンを大きく、赤く」のように見た目だけを頼むより、「このページでは予約がいちばん大事です」のように目的を先に伝えてください。目的がはっきりしていれば、デザイナーがそれに合った大きさ・色・位置を提案できます。

• ページごとにメインボタンを何にしたのか説明してもらえますか？
• スマホでのボタンの大きさと間隔は別途確認していますか？
• ボタンのクリックをアクセス解析に記録してもらえますか？
• 公開後にボタンの文言や位置を変えたいときは、どう依頼すればいいですか？