CTAを作成する

CTAツールを使って、ボタンのCTA、バナー、ポップアップを作成し、HubSpotのページに追加して、新しい訪問者を引き付けましょう。外部ページにCTAを追加することもできます。

外部ページにCTAを追加する前に、 HubSpotトラッキングコードをインストールするか、 WordPressサイトにHubSpot WordPressプラグイン をインストールする必要があります。CTAを追加した後で、訪問者を特定のページ、ミーティングリンク、または外部URLに誘導してトラフィックを促進します。 

モバイルデバイスでは、 CTAオプションで レスポンシブレイアウト を有効にするか、小さい画面のCTAを非表示にするかを選択できます。CTAを公開したら、 CTAのA/Bテスト を作成して CTAのパフォーマンスを分析する方法を学びます。 

CTAをデザインする

CTAエディターで、訪問者の関心を集めるようにCTAのデザインをカスタマイズします。CTAを作成するとき、スマートコンテンツを使用して、閲覧者カテゴリーに基づいてCTAの異なるバージョンを表示することもできます。 CTAでのスマートコンテンツの使用についての詳細をご確認ください。 

1. HubSpotアカウントにて、［マーケティング］＞［CTA］の順に進みます。
2. 右上にある［作成］をクリックします。
3. 上部の［ポップアップ］タブまたは［埋め込みとボタン］タブを選択します。 
   • ポップアップCTAには次のタイプが含まれます。
     
     • バナー：ページの上部または下部に固定され、常に表示されるバナーです。バナーは、訪問者があなたのページをスクロールするときに残ります。 
     • ポップアップボックス：設定されたスケジュールで表示されるポップアップボックス。 
     • スライドイン：ウェブサイトの端からスライドしてくるバナー。バナーは、訪問者があなたのページをスクロールするときに残ります。 
   • 埋め込みCTAとボタンCTAには次のタイプが含まれます。 
     • 埋め込み：見込み客を特定のページに誘導する目的でウェブサイトやHubSpot Eメールで使用できるバナー、CTA、またはボタンです。
     • 埋め込み画像：HubSpotのページやEメールで使用できる画像です。
4. 作成するCTAのタイプに基づいてテンプレートを選びます。
   • 各CTAテンプレートには、画像やテキストフィールドなどのカスタマイズ可能なモジュールがあります。
   • 例えば、「 Click to chat」テンプレートを選択してWhatsAppのリンクを開いたり、「 ミーティングポップアップ」テンプレートを使用してミーティングの予約ページを表示したり、訪問者がカンファレンスやワークショップに登録するための 「イベント 」テンプレートを選択したりできます。
5. 左側のパネルで、[ 追加]タブからモジュールを追加し、CTAのレイアウトを編集します。 

• • CTAにコンテンツを追加するには、新しい モジュール をクリックしてエディターの右側のパネルに直接ドラッグします。
    • CTAに追加できるのは1つの フォーム(新規エディター) または ミーティング モジュールのみです。1つのCTAにフォームとミーティングモジュールの両方を含めることはできません。 
    • カウントダウンタイマーや動画モジュールなど、一部のモジュールは一度しか追加できません。
    • CTAに動画を追加することもできます。 CTAに動画を追加する際の要件について詳細をご確認ください。 
  • CTAのレイアウトを変更するには、 モジュールの上にマウスポインターを置き、クリックして新しい位置にドラッグします。
  • モジュールを複製するには、モジュールの上にマウスポインターを置き、duplicate複製アイコンをクリックします。
  • モジュールを削除するには、モジュールの上にマウスポインターを置き、 deletedeleteアイコンをクリックします。
     

. 

• • モジュールを編集するには、 モジュールをクリックします。
    • 左側のパネルでは、モジュールのコンテンツとデザインを編集できます。
    • 訪問者がフォームを送信した後にポップアップCTAが閉じるようにするには、フォームモジュールをカスタマイズするときに［送信後に閉じる］スイッチをオンにします。
       

7. 左側のパネルで、[ コンテンツ ]タブをクリックしてモジュールを管理します。 
   • モジュールを編集するには、モジュール の名前 をクリックします。左側のパネルでは、モジュールのコンテンツとデザインを編集できます。リッチ テキスト モジュールでは、 AIアシスタント を使用してCTAコンテンツを作成または調整できます。  
   • モジュールを削除するには、モジュールの上にマウスポインターを置き、 delete deleteアイコンをクリックします。 
8. 左側のパネルで［デザイン］タブをクリックし、CTAをカスタマイズしてプレビューします。
   • 特定のページでCTAをプレビューするには、右上の［プレビュー］をクリックします。次に、［特定のページでプレビュー］ドロップダウンメニューをクリックし、CTAをプレビューするHubSpotページを選択します。 

• • CTAの外観をカスタマイズするには、以下のオプションのいずれかを選択します。次に、左側のパネルで変更内容を設定します。 
    • 位置：スティッキーバナーCTAの場合、上部または下部の位置を選択できます。スライドインCTAの場合、ページの左上、左下、右上、右下にCTAを配置できます。 
    • サイズ調整：CTAの高さを設定します。CTAの内容に基づいて高さを自動設定するオプションをオンに切り替えることができます。
    • レイアウト：CTAのレイアウトを設定します。CTAコンテンツにパディングを追加できます。また、レスポンシブレイアウトを有効にするオプションをオンに切り替えることもできます。レスポンシブレイアウトでは、小さな画面でもCTAの列が縦に重なります。
    • スタイル：CTAのスタイル（CTAの基本フォント、境界線、ドロップシャドウなど）を設定します。CTAではカスタムフォントを使用できます。 HubSpotコンテンツでのカスタムフォントの使用について詳細をご確認ください。 
    • 背景：CTAの背景を設定します。背景色を設定するか、背景画像をアップロードするかを選択できます。
    • ［閉じる］オプション：ポップアップボックスCTAの場合、訪問者がポップアップボックス外部をクリックしたときにCTAを閉じることができるようにするオプションをオンに切り替えることができます。このオプションをオフにすると、訪問者は閉じるアイコンを使う方法でのみCTAを閉じることができます。 

HTML CTAをデザインする

カスタム埋め込みHTML CTAを作成し、カスタムテーマやカスタムCSSを適用するには、次のようにします。

1. HubSpotアカウントにて、［マーケティング］＞［CTA］の順に進みます。
2. 右上にある［作成］をクリックします。
3. 上部の [埋め込みとボタン ]タブをクリックします。
4. 左のサイドバーメニューで、[ 詳細]に移動します。次に、[ 埋め込みHTML]を選択します。
5. 左側のパネルで[ リンク] ドロップダウンメニューをクリックし、CTAのリダイレクト先となるオプションを選択します。
   • Eメールアドレス：mailtoリンクを作成します。このリンクを新しいページで開くには、［リンクを新しいタブで開く］チェックボックスをオンにします。 
   • ファイルダウンロード: CTAをファイルマネージャーのファイルにリンクします。既存のファイルを選択するか、新しいファイルをアップロードし、ボタンのCTAをクリックした訪問者に新しいブラウザーウィンドウで画像を表示する場合は、［リンクを新しいタブで開く］チェックボックスを選択します。 
   • ミーティングリンク：CTAをHubSpotミーティングリンクにリンクします。［ミーティングリンクを選択］ドロップダウンをクリックし、ミーティングリンクを選択します。このリンクを新しいページで開くには、［リンクを新しいタブで開く］チェックボックスをオンにします。 
   • いずれかの自分のページ：CTAをいずれかのHubSpotページまたはブログ記事にリンクします。［ページ］ドロップダウンメニューをクリックし、ページまたは記事を選択します。ボタンCTAのリンクはページIDに紐付けられ、ページのURLが変更されるとボタンCTAのリンクも自動的に更新されます。このリンクを新しいページで開くには、［リンクを新しいタブで開く］チェックボックスをオンにします。 
   • URL：CTAをHubSpot外部のページにリンクします。［リンクURL］フィールドに、訪問者を誘導するウェブサイトURLを入力します。このリンクを新しいページで開くには、［リンクを新しいタブで開く］チェックボックスをオンにします。 
   • CTA：カスタムCTAを使用して、スティッキーバナー、ポップアップボックス、またはスライドインCTAをトリガーします。
6. [ボタンコンテンツ ]フィールドに CTAテキストを入力します。
   

7. CTAのデザインをさらにカスタマイズするには、[ 詳細]をクリックします
8. ［詳細］ページでは、カスタムCSSクラスやルールを追加することができます：
   • カスタムCSSクラス：CTAにカスタムクラスを入力します。カスタムクラスを使用して、フォントファミリーなどのデザインスタイルをウェブサイト内の複数のCTAに適用できます。カスタムCSSクラスは、HubSpotページで使用するCSSスタイルシートに含める必要があります。
   • カスタムCSSルール：CTAに特化したインラインスタイルを適用するためのカスタムルールを追加します。
     • 新しいCSSルールを追加するには、［追加する］または［+追加］をクリックし、セレクターとスタイルを設定します。 
       • セレクター：CSSセレクターを入力します。この値はオプションで、CTAのセレクターと組み合わされます。たとえば、入力されたセレクターが :hoverの場合、結合されたセレクターは次のようになります ${ctaSelector}:hover
       • スタイル：設定されたセレクターに適用するカスタムCSSスタイルルールを入力します。セレクターを入力しなくても、スタイルを入力することができます。たとえば、「 color: yellow;」のように入力します。
         
         

9. 既存のCSSルールを編集するには、そのルールにマウスポインターを合わせて、edit編集アイコンをクリックします。 
10. CSSルールを複製するには、そのルールにマウスポインターを合わせて、duplicate複製アイコンをクリックします。 
11. CSSルールの優先順位を管理するには、各ルールをクリックしてドラッグし、優先順位順に並べます。
12. CSSルールを削除するには、そのルールにマウスポインターを合わせて、delete削除アイコンをクリックします。 
13. 旧CTAと同じHTMLとクラスをCTAに適用するには、［旧マークアップを使用］チェックボックスをオンにします。旧CTAをスタイル設定するページにCSSスタイルシートがある場合、このチェックボックスを選択すると、HTML CTAにも同じスタイルが適用されます。 
14. CTAデザインの設定を終了するには、［保存し、適用］をクリックします。
    

スティッキーバナー、ポップアップボックス、スライドインCTAを表示する位置とタイミングをカスタマイズする

1. 訪問者が特定のウェブサイトURLにアクセスしたときにCTAを表示するには、[ ウェブサイトURL]セクションで、次の手順に従います。
   • 最初のドロップダウンメニューをクリックし、［ウェブサイトURL］を選択します。
   • 2つ目のドロップダウンメニューをクリックし、ターゲティングルールを選択します。
   • テキストフィールドにルール基準を入力します。
2. 訪問者がURLに特定のクエリーパラメーターが含まれるウェブサイトページにアクセスしたときにCTAを表示するには、次の手順に従います。
   • 最初のドロップダウンメニューをクリックし、［クエリーパラメーター］を選択します。
   • 1つ目のテキストフィールドに、クエリーパラメーター名を入力します。
   • 2つ目のドロップダウンメニューをクリックし、ターゲティングルールを選択します。
   • 2つ目のテキストフィールドに、クエリーパラメーター値を入力します。
3. 別のルールを追加するには、［ルールを追加］をクリックします。
4. 特定のページからCTAを除外するには、［除外ルールを追加する］をクリックします。例えば、プライバシー ポリシー ページの例外を追加することがあります。

1. [表示する対象者]セクションで、CTAのオーディエンスを設定します。次の中から選択します。
   • 全ての訪問者:全ての訪問者にCTAが表示されます。
   • 絞り込まれた訪問者:CTAは指定された訪問者にのみ表示されます
2. [表示頻度]セクションで、CTAの頻度を設定します。[再表示] ドロップダウンメニューをクリックし、以下から選択します。
   • 設定した期間の後:CTAは指定された時間の経過後に再び表示されます。 
   • 繰り返し:CTAは、訪問者が選択されたウェブページに移動し、トリガーアクションを実行するたびに表示されます。以前にそのウェブページを操作したことがある場合でも、そのCTAが表示されます。
   • 今後は表示しない: 同じ訪問者にCTAを今後表示することはありません。
     
     

CTAオプションをカスタマイズする

［オプション］タブで、CTAを小さいサイズの画面に表示するかどうか、関連付けられているキャンペーン、CTAのスケジュールなど、さまざまなCTAオプションをカスタマイズします。 

1. 上部の［オプション］タブをクリックします。
2. スティッキーバナー、ポップアップボックス、スライドインCTAは、小さなサイズの画面では非表示にできます。［画面サイズ（小）］セクションで［小さい画面サイズではオフにする］チェックボックスをオンにします。
3. 「Marketing Hub Professional」または「Enterprise」のサブスクリプションをご利用の場合、CTAをキャンペーンに関連付けることができます。
   • CTAを既存のキャンペーンに関連付けるには、［キャンペーン］ドロップダウンメニューをクリックし、キャンペーンを選択します。
   • CTAを新規キャンペーンに関連付けるには、［キャンペーン］ドロップダウンメニューをクリックし、［キャンペーンを作成］をクリックします。続けて、キャンペーンを設定します。 
   • キャンペーンを作成したことがない場合は、［キャンペーンを作成］をクリックします。続けて、キャンペーンを設定します。 
4. CTAのクリック数をトラッキングする方法を設定します。以下のオプションから選択します。 
   • リダイレクトからのクリックを追跡：訪問者を最終ページにリダイレクトする前に、クリックをCTAに関連付ける初期URLに訪問者を誘導することによってクリック数をトラッキングします。このオプションはデフォルトで選択されています。
   • ブラウザーからのクリックを追跡：訪問者のブラウザー空のクリックを非同期に追跡します。このオプションでは、リダイレクト先がないためにアンカータグを使用でき、CTAによって設定されたURLに訪問者が誘導されます。 
5. スティッキーバナー、ポップアップボックス、スライドインCTAの場合、CTAが表示されるタイミングをスケジュールできます。
   
   • CTAの表示開始する日時をスケジュールするには、［予定としてスケジュール］スイッチをオンに切り替えます。次に、開始日と時刻を選択します。 
   • CTAの表示を停止する日時をスケジュールするには、［公開終了日時を設定］スイッチをオンに切り替えます。次に、[終了日]と [時間]を選択します。
     
     

CTAを公開する 

CTAの設定が完了したら、CTAを公開します。 

1. 右上の「レビューと公開」をクリックします。
2. 右側のパネルでCTAを確認し、［今すぐ公開］をクリックします。CTAは自動的にターゲットページに公開されます。