CTA(Call To Action)とは?成果につながる設計と改善方法

CTAとは「Call To Action」の略で、ホームページを訪れたユーザーに次の行動を具体的に示し、実行を促す要素です。問い合わせボタンだけでなく、サービスページへのリンク、資料請求、電話、予約、会員登録、購入、関連記事への案内もCTAに含まれます。成果につながるCTAには、誰に何をしてほしいか、実行すると何が得られるか、クリック後に何が起きるかが明記されています。CTAを改善するときは、色や大きさだけで判断せず、検索意図、ページ内容、設置位置、文言、遷移先、フォームを一つの導線として確認し、クリックユーザー数とその後のコンバージョンを計測します。
目次
CTAとはユーザーに次の行動を示す要素
CTAとは、Webページを読んだユーザーに対して、次に取れる行動を提示する要素です。日本語では「行動喚起」と訳されます。英語のCall To Actionを直訳した言葉ですが、強く押し切ることではなく、ユーザーが目的を達成するための次の選択肢を分かりやすく示す役割があります。
CTAはボタンの見た目を指す言葉として使われることが多いものの、本来は行動を促す案内全体を含みます。記事中の関連記事リンク、サービスページへ進むカード、電話番号、予約カレンダー、資料請求フォーム、購入ボタンなどもCTAです。
| CTAの例 | ユーザーの行動 | 主な目的 |
|---|---|---|
| 関連記事を読む | 次の課題解決ページへ進む | 理解・回遊 |
| サービス詳細を見る | 提供内容を確認する | 比較・検討 |
| 資料を請求する | 検討資料を受け取る | リード獲得 |
| 無料相談を予約する | 担当者との相談日時を決める | 商談機会 |
| 電話をかける | すぐに連絡する | 問い合わせ |
| 見積もりを依頼する | 条件を伝えて費用を確認する | 商談・受注 |
| 商品を購入する | 注文を確定する | 売上 |
CTAの目的は、すべてのユーザーをすぐに問い合わせへ送ることではありません。情報収集段階のユーザーには関連記事や資料、比較段階のユーザーには事例や料金、相談段階のユーザーにはフォームなど、現在地に合う行動を提示します。
CTAとコンバージョンの違い
CTAは行動を促す要素、コンバージョンは事業やページで成果として設定した行動です。問い合わせボタンをクリックすることを中間コンバージョンとする場合もありますが、通常はCTAクリック後にフォームを正常送信した段階を問い合わせ完了として扱います。
ページを読む
↓
CTAをクリックする
↓
遷移先を確認する
↓
フォームを入力する
↓
問い合わせが完了する
CTAクリック数だけを成果とすると、フォームを開いた後に離脱している問題を見落とします。反対に、最終コンバージョンだけを見ると、CTAが押されていないのか、フォームで止まっているのかを切り分けられません。CTAクリック率、フォーム開始率、フォーム完了率を段階別に確認します。
関連記事:
CTAの主な種類
CTAは、ユーザーに求める行動、ページ内での優先度、表示形式によって分類できます。種類の名称を統一すると、デザイン、実装、GA4計測、改善レポートを同じ単位で管理できます。
プライマリーCTA
プライマリーCTAは、そのページで最も優先する行動です。サービスページなら「無料相談を予約する」、ECサイトなら「購入する」などが該当します。ページ内で視覚的な優先度を高くし、複数のプライマリーCTAが同時に競合しないようにします。
ただし、同じ行動へのCTAをページ上部、本文中、下部へ繰り返し置くことは、プライマリーCTAが複数あるという意味ではありません。目的が同じであれば、設置位置ごとの利用状況を計測します。
セカンダリーCTA
セカンダリーCTAは、プライマリーCTAへ進む準備ができていないユーザーへ、別の選択肢を提示します。「導入事例を見る」「資料を請求する」「料金の考え方を確認する」などです。
選択肢を増やしすぎると、何を優先すべきか分かりにくくなります。ページの目的とユーザーの検討段階に必要なものへ絞り、プライマリーCTAより視覚的な優先度を下げます。
ナビゲーションCTA
ナビゲーションCTAは、関連記事、カテゴリ、サービスページなど、次に読むべき情報へ案内します。記事ページでは、直接問い合わせへ送るCTAだけでなく、検索意図を一段深めるページへ進むリンクが重要です。
単に「詳しくはこちら」と書くのではなく、「問い合わせが来ない原因を診断する」のように、リンク先で何が分かるかを示します。
トランザクションCTA
購入、予約、申し込み、送信など、処理を実行するCTAです。ユーザーの操作によって情報送信や注文確定が発生するため、操作前に内容、条件、費用を確認できるようにします。送信後には成功・失敗の状態を伝え、二重送信を防ぎます。
連絡CTA
問い合わせフォーム、電話、メール、チャット、オンライン相談など、企業との接点をつくるCTAです。ユーザーの緊急度や利用環境に合わせ、利用できる時間、返信方法、必要な情報を示します。
CTAの表示形式
同じ行動でも、ページや利用場面によって適した表示形式が異なります。
| 表示形式 | 特徴 | 向いている用途 | 注意点 |
|---|---|---|---|
| ボタン | 行動を視覚的に強調できる | 問い合わせ、購入、予約 | 過剰に並べない |
| テキストリンク | 文脈の中で自然に案内できる | 関連記事、用語、補足 | リンク目的を具体化する |
| カード | 画像・タイトル・説明をまとめられる | 事例、サービス、関連記事 | クリック範囲を分かりやすくする |
| バナー | 視覚要素と訴求をまとめられる | キャンペーン、資料 | 画像内文字だけに依存しない |
| 固定CTA | スクロール中も表示できる | 電話、予約、問い合わせ | 本文や操作を隠さない |
| ポップアップ | 特定条件で注意を引ける | 資料、登録、確認 | 閉じ方と表示頻度を配慮する |
| フォーム一体型 | その場で入力できる | 資料請求、簡易相談 | ページの目的と項目負荷を合わせる |
ボタンにすれば必ずクリックされるわけではありません。文章の流れの中ではテキストリンクの方が自然な場合もあります。重要なのは、行動の優先度と表示形式が一致し、操作可能な要素であると認識できることです。
CTAを構成する5つの要素
1. 対象ユーザー
誰に向けた行動かを明確にします。「ホームページから問い合わせを増やしたい企業の方へ」のように対象を示すと、ユーザーは自分に関係するCTAか判断できます。
2. 行動
「見る」「確認する」「相談する」「予約する」「購入する」など、ユーザーが行うことを動詞で示します。「こちら」だけでは、何が起きるか伝わりません。
3. 得られるもの
クリックすると何を確認・取得できるかを示します。「資料を請求する」だけでなく、資料の内容や形式、受け取り方法を補足します。
4. 条件と負担
無料・有料、入力時間、必要項目、返信時期など、行動判断に必要な条件を示します。実際と異なる「すぐ完了」「完全無料」などの表現を使ってはいけません。
5. 遷移後の内容
CTAの文言と遷移先のタイトル、フォーム、送信後の流れを一致させます。「料金を見る」と書いたCTAの遷移先が汎用問い合わせフォームでは、ユーザーの期待とずれます。
CTAの文言を決める方法
CTAの文言は短さだけでなく、行動と結果が伝わることを優先します。同じ「お問い合わせ」でも、相談、見積もり、資料請求、サポートでは目的が異なります。
| 曖昧な文言 | 具体化した文言 | 伝わること |
|---|---|---|
| こちら | ホームページ改善の事例を見る | 遷移先の内容 |
| 詳しく見る | CVRの計算方法を確認する | 得られる知識 |
| お問い合わせ | ホームページ改善について相談する | 相談テーマ |
| 送信 | この内容で相談を送信する | 実行される処理 |
| 資料請求 | サービス資料をメールで受け取る | 資料と受取方法 |
W3CのWCAG 2.2では、リンクの目的をリンクテキスト単独、またはプログラムで判断できる文脈と合わせて理解できるようにすることを求めています。リンク一覧を読み上げる支援技術や、Tabキーでリンク間を移動するユーザーにとっても、具体的なリンク文言が役立ちます。
文言を決めるときは、次の順序で考えます。
- CTAを押すユーザーは誰か。
- どの行動をしてほしいか。
- 何が得られるか。
- 次の画面で何が起きるか。
- 行動前に必要な条件は何か。
「今すぐ」「限定」などの緊急性は、実際に期限や数量がある場合だけ使用します。行動を急がせることより、ユーザーが判断できる情報をそろえることが優先です。
CTAを設置する主な場所
ファーストビュー
ページを開いた時点で、対象サービスと主要行動を理解できるようにします。ただし、初めてサービスを知ったユーザーがすぐ相談できるとは限りません。主CTAに加え、事例やサービス概要などの補助CTAを用意する場合があります。
本文中
ユーザーの疑問が解消された直後に、次の情報や行動を案内します。記事では、関連する段落の直後に関連記事やサービスページへのCTAを置くと、文脈を保ったまま移動できます。
比較・事例・料金の後
検討に必要な情報を確認した後は、相談、見積もり、資料請求などへ進みやすい位置です。料金を示した直後にCTAを置く場合は、見積もりに必要な条件や相談できる内容も補足します。
ページ末尾
ページを読み終えたユーザーへ次の行動を提示します。問い合わせだけでなく、関連ページ、資料、相談など複数の検討段階に対応できます。選択肢を並べる場合は、優先順位を視覚的に分けます。
ヘッダー・固定エリア
どの位置からでも主要行動へ移動できるようにします。スマートフォンの固定CTAは、本文、ブラウザ操作、同意バナー、入力欄を隠さないようにします。実機でスクロール、拡大、キーボード表示時の状態を確認してください。
CTAを複数箇所へ置くときは、同じURLへのクリックでも設置位置を区別して計測します。上部、本文中、下部、固定エリアなどの名称を統一します。
CTAはリンクとボタンをどう使い分けるか
見た目がボタンであっても、実装上はリンクの場合があります。基本的には、別ページや同じページ内の場所へ移動する要素はリンク、送信、表示切り替え、ダイアログを開くなどページ上の処理を実行する要素はボタンとして実装します。
適切なHTML要素を使うと、キーボード操作、読み上げ、ブラウザのリンク機能などを利用しやすくなります。見た目だけをdivや画像で作り、クリック処理だけを追加すると、キーボードで操作できない、役割が読み上げられない問題が起こります。
| CTAの動作 | 適した考え方 | 例 |
|---|---|---|
| 別ページへ移動 | リンク | サービス詳細を見る |
| ページ内の位置へ移動 | リンク | 料金表へ移動する |
| フォームを送信 | ボタン | この内容で送信する |
| メニューを開閉 | ボタン | メニューを開く |
| モーダルを表示 | ボタン | 予約可能日を表示する |
| 電話を起動 | 電話リンク | 電話で相談する |
CTAの実装後は、マウスだけでなくTabキー、Enterキー、Spaceキー、スマートフォンのタップで操作できるかを確認します。
CTAのアクセシビリティを確認する
CTAは事業成果だけでなく、ユーザーがサービスや情報へ到達するための操作要素です。見た目を強調しても、操作できない人がいれば導線として機能しません。
リンクの目的を分かるようにする
「こちら」「もっと見る」が複数並ぶと、リンクだけを読み上げたときに違いを判別できません。リンクテキストと周囲の文脈から、移動先や行動を判断できるようにします。同じ行き先のリンク文言は一貫させます。
タップ領域と間隔を確保する
WCAG 2.2のターゲットサイズ(最小)では、ポインター操作の対象を原則として24×24 CSSピクセル以上にするか、例外条件に沿った十分な間隔を確保することを求めています。インラインリンクなどには例外がありますが、CTAボタンは小さく密集させず、誤操作しにくい大きさと間隔を確保します。
キーボードフォーカスを見えるようにする
TabキーでCTAへ移動したとき、現在どこを操作しているか分かるフォーカス表示を残します。デザイン上の理由でブラウザ標準のアウトラインを消す場合は、同等以上に分かる表示を用意します。
色だけで状態を伝えない
リンクや選択状態を色だけで区別せず、下線、枠線、アイコン、文言などを組み合わせます。通常、ホバー、フォーカス、押下、無効、処理中の状態が識別できるか確認します。
画像内文字だけに依存しない
バナー画像の中にCTA文言を入れる場合も、代替テキストやHTML上のリンク名で目的を伝えます。画像が表示されない場合や拡大時にも、行動が分かる状態にします。
CTAクリック率の計算式
CTAの利用状況を評価する基本指標がCTAクリック率です。
CTAクリック率(%)=CTAをクリックしたユーザー数 ÷ CTAがある対象ページのユーザー数 × 100
イベント回数を分子にすると、同じユーザーの連続クリックが含まれます。導線を利用した人数を評価する場合はクリックユーザー数、操作回数を評価する場合はイベント数を使い、指標名で区別します。
設置位置別に確認する場合は、同じユーザーが複数のCTAを押す可能性があります。位置別のクリックユーザー数を合計すると、ページ全体のユニーククリックユーザー数を上回ることがあるため、単純合計しません。
| 指標 | 計算・確認方法 | 分かること |
|---|---|---|
| CTAクリックユーザー数 | CTAを一回以上押したユーザー | 導線を利用した人数 |
| CTAクリック率 | クリックユーザー÷対象ページユーザー | ページから次へ進んだ割合 |
| 位置別クリック率 | 位置別クリックユーザー÷対象ページユーザー | 利用された設置位置 |
| 遷移先到達数 | 遷移先ページを表示したユーザー | クリック後に到達した人数 |
| フォーム開始率 | form_startユーザー÷フォーム閲覧ユーザー | 入力を始めた割合 |
| 問い合わせ完了数 | generate_leadユーザー・受付台帳 | 最終的に受付できた人数 |
CTAクリック率が高くても、遷移先で離脱していれば成果にはつながりません。クリック率、フォーム開始、受付完了、有効問い合わせを続けて確認します。
GA4でCTAクリックを計測する方法
GA4の拡張計測機能では、現在のドメインから別のドメインへ移動するリンククリックをclickイベントとして計測できます。link_url、link_domain、link_id、link_classesなどの情報を利用できます。ただし、同一ドメイン内のサービスページや問い合わせページへ進むCTAは、外部リンクの自動計測だけでは取得できません。
内部CTAを計測する場合は、Googleタグマネージャーなどを使い、組織内で統一したイベントを設定します。イベント名をページごとに変えるのではなく、CTAの種類、設置位置、リンク先、記事ID、クラスターIDをパラメータで区別すると横断集計しやすくなります。
例として、次の情報を設計します。
| 項目 | 値の例 | 用途 |
|---|---|---|
| event_name | cta_click | CTAクリックの共通イベント |
| cta_type | primary、secondary、related | CTAの役割 |
| cta_position | header、inline、footer、sticky | 設置位置 |
| link_url | 遷移先URL | 行き先の確認 |
| article_id | ART-WEB-INQUIRY-006 | 記事単位の集計 |
| cluster_id | IC-WEB-INQUIRY-001 | クラスター単位の集計 |
cta_clickは組織独自の命名例であり、GA4が自動収集する標準イベント名ではありません。実装前に、推奨イベントや既存イベントで要件を満たせるかを確認し、独自イベントを使う場合は命名規則を文書化します。
計測後はDebugViewやリアルタイムレポートで、1回の操作につき1回発生するかを確認します。リンク全体と子要素の両方でタグが発火し、二重計上される場合があります。新しいタブ、同一ページ内リンク、電話、外部予約サービスなど、CTAの種類ごとにテストします。
関連記事:
ホームページの問い合わせを増やすKPIとは?計測設計と改善手順
CTAがクリックされない主な原因
ページ内容とCTAが一致していない
用語を調べているユーザーへ、説明の直後から見積もり依頼だけを提示しても、検討段階が合いません。関連記事、事例、サービス概要など段階に合うCTAを用意します。
クリック後に何が起きるか分からない
「お問い合わせ」「詳しくはこちら」だけでは、フォーム、資料、電話のどこへ進むか判断できません。遷移先と行動を具体化します。
CTAの前に判断材料が足りない
対象サービス、提供価値、事例、費用、流れ、会社情報など、行動に必要な情報が不足している場合があります。ボタンを目立たせる前に、ユーザーが決められない理由を確認します。
選択肢が多く優先順位が分からない
問い合わせ、資料、電話、メルマガ、SNS、関連記事を同じ強さで並べると、主要行動が分かりません。プライマリーとセカンダリーを分けます。
スマートフォンで操作しにくい
ボタンが小さい、固定CTAが本文を隠す、電話とメニューが近い、同意バナーと重なるなどの問題を実機で確認します。
遷移先との約束が違う
CTAでは「無料相談」と書かれているのに、フォームで有料サービスの申込情報を求める場合などです。文言、遷移先、入力項目、返信内容を一致させます。
CTAを改善する手順
CTA改善では、色、形、文言、位置を同時に変更しないようにします。何が成果へ影響したか分からなくなるためです。
- CTAの役割と対象ユーザーを決める。
- クリック前後のページ内容と行動を確認する。
- CTAクリックが正常に計測されるかテストする。
- ページ、デバイス、設置位置別に利用状況を見る。
- クリック後のフォーム開始・完了も確認する。
- 一つの原因仮説に対応する変更を行う。
- クリック率、CV数、CVR、有効問い合わせ率を比較する。
| 数値の状態 | 考えられる課題 | 次に確認すること |
|---|---|---|
| CTAクリック率が低い | 文脈、文言、位置、視認性 | 検討段階とCTAの一致 |
| クリックはあるが到達が少ない | リンク・表示・外部遷移の不具合 | URL、読み込み、計測 |
| 到達するがフォームを始めない | 約束の不一致、不安、項目 | フォーム冒頭と説明 |
| フォーム開始後に完了しない | 入力負荷、エラー、技術 | EFO、送信テスト |
| 完了するが有効率が低い | 対象・条件・訴求のずれ | 流入意図と相談条件 |
CTAクリック率だけを高めると、興味本位のクリックや対象外の問い合わせが増える場合があります。最終的には、ユーザーが必要な情報へ到達し、適切な相談や購入を完了できたかで評価します。
関連記事:
問い合わせフォームで離脱する原因は?入力完了率を高める改善方法
関連記事:
ホームページの問い合わせの質を高める方法|対象外・営業・スパムを減らす改善策
CTAの定義をKnowledge Libraryで管理する理由
CTAは、ホームページ改善、記事制作、広告、UI/UX、GA4計測など複数の領域で使われます。記事ごとに「CTAとは」を詳しく説明すると、課題解決の本文が分断され、定義にも差が生じます。
本記事では、CTAの定義、種類、構成要素、アクセシビリティ、評価指標を管理します。BtoBサイトのCV導線、問い合わせが来ない原因、フォーム改善などのインテント記事では、それぞれの課題に対するCTAの使い方を解説します。
Googleは、AI検索向けに類似ページを大量作成するのではなく、読者にとって独自性と価値がある内容を分かりやすく構成するよう案内しています。ジャリアのKnowledge Libraryでも、同義の用語ページを増やさず、代表ページへ定義を集約します。公開後は、実際のCTA命名規則、設置位置、計測条件、改善判断を個人や顧客を特定しない形で追記します。
CTAを含むホームページ改善をWebaxisが支援します
株式会社ジャリアのWebaxisでは、CTAボタンだけを切り離さず、検索意図、ページ内容、サービスの訴求、遷移先、フォーム、問い合わせ後の質までを一つの導線として確認します。GA4でCTAクリックを計測し、押されない原因と押された後の離脱を分けて改善します。
「CTAをどこに置けばよいか分からない」「問い合わせボタンは押されているのに送信されない」「記事からサービスページへ進まれない」という段階でも、既存ページを分析し、優先する改善範囲を整理できます。
CTAに関するよくある質問
Q1. CTAは何の略ですか?
CTAは「Call To Action」の略です。ホームページや広告で、ユーザーに次の行動を示し、実行を促す要素を意味します。日本語では行動喚起と呼ばれます。
Q2. CTAはボタンだけを指しますか?
ボタンだけではありません。テキストリンク、カード、電話番号、予約、資料請求、フォーム、購入など、次の行動を促す案内全体がCTAに含まれます。
Q3. CTAとCVの違いは何ですか?
CTAは行動を促す要素、CVは成果として設定した行動やその件数です。CTAクリックを中間CV、フォームの正常受付を最終CVとして分けることもあります。
Q4. CTAはページ内に何個置くべきですか?
一律の正解はありません。主要行動をプライマリーCTAとして決め、ユーザーの検討段階に必要な補助CTAだけを設けます。同じ目的のCTAを複数箇所へ置く場合は位置別に計測します。
Q5. CTAにはどの色が効果的ですか?
すべてのサイトに共通する最適色はありません。ブランド、背景、周囲の要素との識別しやすさで決めます。色だけに依存せず、文言、形、余白、フォーカス表示も確認します。
Q6. CTAクリック率の計算式は何ですか?
「CTAをクリックしたユーザー数÷CTAがある対象ページのユーザー数×100」で計算できます。イベント回数を使う場合は、同一ユーザーの複数クリックが含まれることを明記します。
Q7. GA4はCTAクリックを自動計測しますか?
拡張計測機能では外部ドメインへのリンククリックを自動計測できます。同一ドメイン内のサービスページや問い合わせページへ進むCTAは、Googleタグマネージャーなどで別途イベントを設定するのが一般的です。
Q8. CTAクリック率が高ければ成功ですか?
クリック後にフォームを開始・完了し、有効な問い合わせや購入につながったかも確認します。クリック率だけを上げると、期待と異なる遷移や対象外の行動が増える場合があります。
まとめ|CTAは次の行動と遷移後の体験まで設計する
CTAとは、ユーザーに次の行動を示し、実行を促す要素です。ボタンだけでなく、リンク、カード、電話、予約、資料請求、フォームなども含まれます。
CTAを設計するときは、対象ユーザー、行動、得られるもの、条件、遷移後の内容を一致させます。表示位置や色だけで判断せず、リンク目的、タップ領域、キーボード操作などのアクセシビリティも確認してください。改善時にはCTAクリック率だけでなく、遷移先到達、フォーム開始、受付完了、有効問い合わせまでを段階別に測定します。ユーザーが迷わず適切な次の行動へ進める状態が、CTA設計の目的です。

