HubSpotのCTA機能とは？戦略的なCTAの設置でコンバージョン獲得を！作成方法からポイントまで解説

CTAとは

CTA（Call to Action）とは、「行動喚起」のことを意味します。
ウェブサイトやメールなどのタッチポイントにおいて、訪問者や読者に具体的な行動を促す役割を持ちます。

例えば、「今すぐ登録」「無料体験はこちら」「お問い合わせはこちら」などといったボタンやリンク、また最近では画像などを使用したCTAが一般的です。

CTAを設置する目的としては、主に以下が挙げられます。

・コンバージョンの獲得
　購入、資料請求、問い合わせなど、訪問者に具体的なアクションを促します

・エンゲージメントの向上
　メルマガ登録や公式SNSアカウントのフォローなど、長期的な関係構築を促します

・離脱防止
　サイトやページを離れようとする訪問者に対し特別オファーを提示し、再考を促します

HubSpotのCTA機能とは

HubSpotの「CTA機能」は、直感的な操作でCTAを作成・管理できる機能です。

HTMLやCSSなどのプログラミング知識がなくても、視覚的に魅力的で効果的なCTAを作成することができます。

さらに、CTAを表示させる際のターゲティングや、表示のタイミングなどの条件を細かく設定することで、訪問者の行動やニーズに応じた体験を提供することができます。

◆主な特徴
・簡単なドラッグ＆ドロップ操作でCTAを作成できる
・ターゲット層や表示タイミングの柔軟な設定ができる
・分析機能を活用したCTAパフォーマンスのトラッキングができる
このように、HubSpotのCTA機能は単なる「クリックさせるためのボタン」ではなく、
マーケティング施策を支える機能を持ち合わせています。

HubSpotのCTA機能でできること

多種多様なCTAの作成ができる

HubSpotでは、以下の形式のCTAを作成することができます。

◆作成可能なCTA

スティッキーバナー形式
ページ上部や下部に固定表示させる、横長バナーのCTAです。

ポップアップボックス（ポップアップバナー）形式
訪問者の特定の行動に基づいて表示させるモーダルウィンドウ（訪問者がウィンドウ内の指示に従うか、キャンセルするかしないと他の操作ができない）のCTAです。

スライドインバナー形式
ページの隅（右下からが一般的）から滑り込むように表示させるCTAです。

埋め込みバナー形式（画像・ボタン・HTMLが可能）
ページ内にボタンや画像として配置するCTAです。

表示させるタイミングの設定ができる

HubSpotのCTA機能では、訪問者の行動や状況に合わせて柔軟に表示タイミングを設定することができます。

この設定をしておくことで、CTAが適切な瞬間に訪問者の目に触れるようになります。

以下に、それぞれの設定について詳しく解説します。

◆表示タイミングの種類

ボタンクリックしたときに表示

訪問者が特定のCTAボタンをクリックしたタイミングで、CTAを表示します。
訪問者のアクションに関連する次のステップを提示する際に最適で、訪問者が主体的に行動した直後のため、関心が高い状態で次のアクションを訴求することができます。

〈例〉
・「詳しくはこちら」ボタンをクリックしたときに表示する
・「製品情報を閲覧」ボタンをクリックした後に特典（例：「購入で10％オフクーポン」のCTA）を表示する

ページスクロールしたときに表示

訪問者がページのコンテンツを一定割合（例えば50%や80％）スクロールした際に、CTAを表示します。
訪問者がある程度コンテンツを読み進めていることが前提なので、関心度の高いユーザーにアクションを促すのに効果的です。

〈例〉
・ブログ記事の最後に「資料ダウンロード」ボタンを表示し、訪問者が記事をしっかり読んで興味を持った状態でCTAを表示させる
・商品説明ページでユーザーが特定のポイントまで読んだ時に「購入はこちら」ボタンを出表示し、購入意欲を高める

離脱意図に基づいて表示

訪問者がブラウザの閉じるボタンにマウスを移動させるなど、サイトを離れる兆候を検知した際にポップアップCTAを表示します。
離脱しようとするユーザーを引き留める最後のチャンスとして活用でき、コンバージョン率向上や離脱率の低減に繋げることができます。

〈例〉
・離脱しそうな訪問者に「特別オファー」や「期間限定の割引クーポン」を提示する
・Eコマースサイトでカートに商品を入れたまま離れそうな場合に「商品がカートに入っています。」などのメッセージを表示する

経過時間で表示

訪問者がサイトに滞在してから一定時間が経過した後にCTAを表示します。
訪問者がサイトに慣れて情報を探し始めたタイミングや、コンテンツの視聴後に次の行動を促したい場面でも効果的です。

〈例〉
・新規訪問者に対し、滞在1分後に「ニュースレター登録で特典をゲット！」というポップアップCTAを表示する
・動画コンテンツページで、視聴後数秒以内に「関連動画を見る」「この内容に関する資料をダウンロード」といった案内を表示する

無操作のときに表示

訪問者が一定時間操作（クリック、スクロール、キー入力など）を行わない場合にCTAを表示します。訪問者の興味が薄れてきたタイミングで注意を引き戻すために利用され、訪問者の関心を引き戻し、行動を誘導する効果があり、特に長時間放置されがちなページに有効です。

〈例〉
・「何かお困りですか？」というポップアップCTAを無操作10秒後に表示し、チャットボットへ誘導する
・ 商品ページで2分以上無操作の場合、「購入で送料無料キャンペーンを実施中！」というポップアップCTAを表示する

このように、適切なタイミングでCTAを表示することにより、訪問者の次の行動を誘発し、コンバージョンへ繋げやすくする効果があります。

表示させるターゲットを設定できる

HubSpotのCTA機能では、特定のターゲットに向けてメッセージを最適化させることができます。
誰に対して、どのタイミングで、どのような内容を見せるかを細かく設定することで、訪問者の関心を引き付けることができるため、行動を促進する効果が高まります。

表示ターゲットは以下より設定ができます。

・全ての訪問者
・絞り込まれた訪問者

このうち「絞り込まれた訪問者」では、以下のように絞り込むことが可能です。

・セグメント化されたリスト（あらかじめリストを作成し、そのリストにのみ表示）
・訪問者（すでにコンタクトとして登録されている訪問者か、否かを選択し表示）
・ログイン済訪問者（サイトログイン済の訪問者か、未ログインの訪問者かを選択し表示）
・デバイスタイプ（パソコン、モバイル、タブレットに絞り表示）
・ブラウザーの言語（44か国の言語より絞り表示）
・国
・CTAのクリック（すでに公開済のいずれかのCTAをクリックした人に絞り込み表示）
・前回の訪問からの日数
・フォーム表示（すでに公開済のいずれかのフォームを表示した人に絞り込み表示）
・セッション数（セッション数が5回以上の訪問者などを絞り込み表示）
・訪問されたページ
・リファラルURL
・SEOトピック（SEO機能で設定したトピックの中から絞り込み表示）
・SEOトピックの履歴（SEO機能で設定したトピックの中から絞り込み表示）

デザインを工夫することができる

CTAのデザインは、訪問者の注目を引き、行動を促すための重要な要素です。
HubSpotのCTA機能では、視認性を高め、ブランドに適したデザインを簡単に作ることができます。

◆具体的に設定できるデザイン要素

表示させる位置の調整
ページのどこにCTAを表示するかを細かく設定することができます。
ユーザーの視線や操作性を考慮して配置場所を選択できるため、コンテンツの邪魔にならないよう設定することができます。

CTA内に配置する画像のカスタマイズ
CTA内に配置する画像のデザインを選べます。
ブランドロゴや商品の画像を挿入することで、訴求力をさらに高めることができます。

カラーの設定
背景色や文字色、ボタンの色を自由に変更できます。
訪問者の注目を引きやすいデザインにすることができるため、
ブランドカラーやコントラストの高い配色を選ぶことで、クリック率向上が期待できます。

HubSpotでのCTA作成方法

HubSpotでCTAを作成する手順を解説していきます。

CTAの作成

①HubSpotの左サイドメニューより、[マーケティング] > [CTA] にアクセスする

②右上の [作成] をクリックする

③テンプレートが表示される
※タグの切り替えで、「ポップアップ」と「埋め込みとボタン」より選択することができます

▼ポップアップ

▼埋め込みとボタン

※また、テンプレートを使用して短時間で作成することもできますが、
「空白」というテンプレートを選ぶことでゼロからも作成することができます

④今回は、「空白（スライドイン）」を使用してCTAを作成する

⑤テンプレートの画像部分をクリックする（➊）
左側に編集画面が表示されるので [置換] をクリックする（❷）

⑥置換したい画像（下記の赤枠）をクリックする
※新規で画像をアップロードする場合は、下の [アップロード] をクリックして登録する

⑦下記のように画像が差し変わったら、次はテキストなどを設定していく

⑧テキストを編集する
※直接テキストを打ち込むことができます
（例：集客できる！コンテンツマーケティングセミナー）
（例：事例をもとにプロがノウハウを解説！）

⑨次に、CTAボタンを編集する
※CTAボタン部分をクリックすると、左側に編集画面が表示されます

リンク先（例：URL）
リンクURL（例：https://now-village.jp/）
ボタンテキスト（例：「詳細を見る >」）

下記のようになればデザインは完成です。

表示タイミングの設定

CTAを作成し終えたら、表示タイミングを設定していきます。

以下は、CTA機能で利用できる5つの主要なトリガー（発火条件）の設定方法です。

ボタンクリックによるトリガー
訪問者が特定のボタンをクリックした際にCTAを表示する方法です。
この方法は、常に使用できるような設定になっています。

ページスクロール時にトリガー
訪問者がページを一定割合スクロールしたタイミングでCTAを表示する方法です。

トリガーを[ON]にし、任意のパーセンテージを設定する（例：50%）

離脱意図にもとづいて実行
訪問者がページから離脱しようとした際にCTAを表示する方法です。

トリガーを[ON]にするだけで設定完了

経過時間後にトリガー
ページ訪問から一定時間が経過したタイミングでCTAを表示する方法です。

トリガーを[ON]にし、任意の秒数を設定する（例：10秒）

無操作の後にトリガー
訪問者が一定時間操作を行わない場合にCTAを表示する方法です。

トリガーを[ON]にし、任意の秒数を設定する（例：30秒）

オプションによる詳細設定

続いて、オプションの設定をしていきます。
ここでは、主に下記の設定が可能です。

・CTAの表示サイズの設定（オン・オフの設定）
・マーケティングキャンペーンへの追加設定
・クリックトラッキングの設定
・スケジュール設定

CTAの表示サイズの設定（オン・オフの設定）
モバイルや、タブレットなどの小さい画面で表示させたくない場合は、以下にチェックを入れる

マーケティングキャンペーンへの追加設定
HubSpotでマーケティングキャンペーンを設定している場合、このオプションを使うと、作成したCTAを特定のキャンペーンに関連付けることができる。

関連付けたいキャンペーンを選択する

クリックトラッキングの設定
CTAがクリックされたデータをHubSpotで追跡するかどうかを設定したい場合は、チェックを入れる

スケジュール設定
CYAを表示させたい日付と時間を設定したい場合、また公開終了日時を設定したい場合は[ON]にし、予定日時を設定する

効果的にCTAを設置する際のポイント

CTAを設置することは、単なるボタン配置ではありません。
サイト訪問者が自然に行動したくなる仕掛けが求められており、それが出来ていなければ訪問者は行動をしてくれません。

ここでは、HubSpotのCTA機能を効果的に活用するための5つのポイントをご紹介します。

ユーザーメリットを訴求する

CTAを効果的なものにするためには、訪問者に明確な「メリット」を感じてもらうことが重要です。

例えば、

「無料で試してみる」
「限定事例集をダウンロード」
「今なら期間限定クーポン配布中」
「今なら送料無料！」

などです。

訪問者が「価値が高い」と感じるようなオファーを具体的にCTAに盛り込むことで、コンバージョン率を向上させることに繋がります。

文脈に適したCTAを設置する

訪問者がいるページの目的や内容、文脈に合わせたCTAを設置することも重要です。

例えばブログ記事では、「記事に関連する資料のダウンロード」など、コンテンツの内容との整合性が必要になります。

コンテンツの内容と異なる文脈のCTAを挿入すると、違和感があり、コンバージョンに繋がりにくくなってしまうので要注意です。

行動喚起を促す文言にする

また、CTAには行動を促す力強い言葉を使用するのが効果的です。

例えば、

「今すぐ登録」
「限定オファーを受け取る」

といった具体的かつシンプルなフレーズは、訪問者に迷いなく行動させるきっかけとなります。また、「今だけ」「限定」といった緊急性や希少性を示す言葉を取り入れると、クリック率をさらに高めることが可能です。

色・形などのデザイン要素を工夫する

視認性の高いデザイン・カラーは、CTAの効果をより高める要素の一つです。
HubSpotのCTA機能では、色やテキストフォント、ボタンの形状を自由にカスタマイズすることが可能です。

例えば、背景とのコントラストを強調した色を選び、クリックする場所を直感的に分かるようにするなどができます。

また、「動き」のあるアニメーションを動画などで加えることもできるため、訪問者の目を引くCTAを作成することができます。

効果検証し定期的に見直す

CTAは一度作成して終わりではなく、どのくらいの人がCTAをクリックしたか、その後のコンバージョンに繋がったかなどを計測し、効果検証を行うことが重要です。

HubSpotの分析機能を活用することで、CTAのクリック率や、クリック後のコンバージョン率を計測することができます。

どの表示形式のCTAが効果的なのか、どのような文言を入れることが効果的なのかなどを検証し、成果が出ていない場合は、文言やデザイン、配置の改善を行い継続的に最適化をしていきましょう。

CTA機能を利用できるプラン

ここまで解説してきたCTA機能は、以下の製品で利用することが可能です。

・Marketing HubのStarterプラン以上
・Content HubのStarterプラン以上

プランにより利用できる機能に制限があります。
導入を検討されている方は、以下の表を参考にしてみてください。

◆Marketing Hub／Content Hub（同様）

	無料	Starter	Professional	Enterprise
CTAの作成	なし	・埋め込みCTAの作成 ・ポップアップCTAの作成	・埋め込みCTAの作成 ・ポップアップCTAの作成	・埋め込みCTAの作成 ・ポップアップCTAの作成
カスタムターゲティング	なし	なし	・デバイスタイプ、国、リファラルURLなどを基準としたカスタムターゲティング	・デバイスタイプ、国、リファラルURLなどを基準としたカスタムターゲティング
訪問者のアクションを追跡	なし	・複数のウェブページでのアクション追跡	・複数のウェブページでのアクション追跡	・複数のウェブページでのアクション追跡

Marketing Hub、Content Hubについては、下記の記事もあわせて参照ください。

関連記事：
HubSpot Marketing Hubとは？特徴・機能・料金・メリットデメリットを徹底解説
コンテンツマーケティングに強いContent Hubとは？CMS機能や導入効果、注意点

HubSpotのCTA機能を活用して集客を加速させよう

いかがでしたか？

CTAの設置は、訪問者との接点を効果的に活用するための重要な施策です。

HubSpotの機能HubSpotのCTA機能を活用することで、単なるボタンの設置にとどまらず、ターゲティングやデザイン、さらには効果測定を統合的に行うことができます。

適切なタイミングで適切なメッセージを訪問者に届けることで、コンバージョン率を大幅に向上させることが期待できますので、CTA機能を最大限に活用し、訪問者を次のステップに導く最適なCTAを設置していきましょう！

ナウビレッジに相談してみる