メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。

CTA(コール・トゥ・アクション)の作成

更新日時 2023年 8月 24日

以下の 製品でご利用いただけます(別途記載されている場合を除きます)。

Marketing Hub Starter, Professional, Enterprise
CMS Hub Starter, Professional, Enterprise

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

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

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

CTAをデザインする

CTAエディターで、CTAのデザインをカスタマイズして、訪問者を魅了しましょう。 

  • HubSpotアカウントで、Marketing > Lead Capture > CTAsに移動します。
  • 左上のドロップダウンメニューをクリックし、「CTAs」を選択します。
  • 右上の[作成]をクリックします。
  • 新しいワークフローをゼロから作成することも、テンプレートから作成することもできます。
    • テンプレートから新しいCTAを作成するには、左のパネルで、HubSpot Templatesをクリックします。そして、自分の目標に合ったテンプレートを選びます。 
    • ゼロから新しいCTAを作成するには、左のパネルで、「ゼロから始める」をクリックします。次に、CTAの種類を選択します:
      • スティッキーバナー:ページの上部または下部に固定される常設のバナーです。バナーは、訪問者があなたのページをスクロールするときに残ります。 
      • ポップアップボックス:設定されたスケジュールで表示されるポップアップボックス。 
      • スライドイン: Webサイトの隅からスライドして入ってくるバナーです。バナーは、訪問者があなたのページをスクロールするときに残ります。 
      • 埋め込み型: HubSpotのコンテンツで使用できるボタンで、見込み客を特定のページに誘導することができます。
  • 左パネルの「追加」タブから、CTAの要素を追加し、レイアウトを編集します: 
    • CTAにコンテンツを追加するには、新しい要素をクリックしてエディターの右側のパネルに直接ドラッグします。 
    • CTAのレイアウトを変更するには、要素にカーソルを合わせ、クリック&ドラッグして新しい位置に移動します。
    • 要素を複製するには、要素にカーソルを合わせてduplicate複製アイコンです。
    • 要素を削除する場合は、要素の上にカーソルを合わせてdeleteゴミ箱アイコンです。 
    • 要素を編集するには、その要素をクリックします。左側のパネルでは、要素の内容やデザインを編集することができます。
  •  

TW - CTA DD 

  • 左のパネルで、「コンテンツ」タブをクリックして、要素を管理します。 
    • 要素を編集するには、要素の名前をクリックします。左側のパネルでは、要素の内容やデザインを編集することができます。リッチテキスト要素では、コンテンツアシスタントを使用して、CTAコンテンツを作成または改良することができます。 
    • 要素を削除するには、要素にカーソルを合わせ、delete ゴミ箱アイコンをクリックします。 
  • 左のパネルで、デザインタブをクリックし、CTAのカスタマイズとプレビューを行います。
    • 特定のページでCTAをプレビューするには、右上の「プレビュー」をクリックします。次に、Preview on specific pageのドロップダウンメニューをクリックし、CTAをプレビューするHubSpotのページを選択します。 
    • CTAの外観をカスタマイズするには、以下のオプションのいずれかを選択します。次に、左側のパネルで変更内容を設定します。 
      • Position:粘着バナータイプのCTAの場合、上部または下部の位置を選択できます。スライドインタイプのCTAの場合、ページの左上、左下、右上、右下にCTAを配置することができます。 
      • サイジング: CTAの高さを設定します。CTAの内容に基づいて自動的に高さを設定するオプションを切り替えることができます。
      • Layout: CTAのレイアウトを設定します。CTAコンテンツにパディングを追加することができます。また、レスポンシブ・レイアウトを有効にするオプションを切り替えることもできる。レスポンシブレイアウトでは、CTAの列は小さな画面でも縦に積み重なります。
      • スタイル: CTAのスタイル、例えばCTAの主要フォント、ボーダー、ドロップシャドウなどを設定します。 
      • 背景: CTAの背景を設定します。背景色を設定するか、背景画像をアップロードするかを選択できます。

スティッキーバナー、ポップアップボックス、スライドインCTAを表示する場所と時間をカスタマイズできます。

スティッキーバナー、ポップアップボックス、スライドインCTAを設定した場合、このCTAをサイト上で表示するタイミングを選択することで訪問者をターゲットにします。ページにCTAを追加する方法について詳しくはこちら

フィルターを使用すると、どの訪問者がCTAを見るかについて、複数のルールを組み合わせることができます。ターゲティングルールの設定について詳しくはこちら .

起動トリガー 

CTAがページに表示されるタイミングを決定するアクティビティートリガーを選択します。最初に選択したトリガーが満たされると、CTAが表示されます。 

  •  いつ表示するか」セクションで、使用するアクティビティートリガーの横のスイッチをクリックして切り替えます:
    • ボタンクリックでトリガー:訪問者がボタンをクリックしたときにCTAが表示されます。ボタンクリック時にポップアップCTAが起動するように設定する方法をご紹介します
      • HubSpotのページではデフォルトのボタンモジュールで、外部ページではボタンのクラスをカスタマイズすることで設定します。
      • 外部ページにこのトリガーを設定するには、HubSpot のトラッキングコードをインストールする必要があります。 
    • ページスクロールでトリガー:訪問者がページの指定されたパーセンテージを越えてスクロールしたときにCTAが表示されます。
    • Exit intentでトリガー:訪問者がカーソルをブラウザーウィンドウのトップバーに移動させると、CTAが表示されます。
    • 経過時間後にトリガー:指定した秒数後にCTAが表示されます。
    • Trigger after inactivity:訪問者が指定した秒数以上アクティブでなかった場合に、CTAが表示されるようにします。

ウェブサイト URL

特定のウェブページURLや、クエリーパラメーター値の条件付きロジックを追加できます。デフォルトでは、CTAは全ページに表示されます。

  • 上部にある「ターゲット」タブをクリックします。
  • 訪問者が特定のウェブサイトのURLにいるときにCTAを表示するには、「ウェブサイトのURL」セクションで
    • 最初のドロップダウンメニューをクリックし、「ウェブサイトのURL」を選択します。
    • 2番目のドロップダウンメニューをクリックしターゲッティングルール .
    • テキストフィールドにルール基準を入力します。
  • URLに特定のクエリーパラメーターが含まれるWebサイトのページに訪問者がいるときに、CTAを表示すること:
    • 最初のドロップダウンメニューをクリックし、「クエリーパラメーター」を選択します。
    • 最初のテキストフィールドに、クエリーパラメーター名を入力します。
    • ドロップダウンをクリックし、ターゲティングルールを選択します。
    • 2番目のテキストフィールドに、クエリーパラメーターの値を入力します。
  • 別のルールを追加するには、[ルールを追加]をクリックします。
  • 特定のページ(例:プライバシーポリシーページ)からCTAを除外するには、[除外ルールを追加]をクリックします。


訪問者の情報および行動(任意)

また、既知の訪問者情報や行動に基づいて、特定のコンタクトにCTAをターゲティングすることも可能です。追加できるフィルタリングルールの種類は、アカウントのサブスクリプションに依存します。

    • 訪問者の情報と行動(オプション)」セクションで、最初のドロップダウンメニューをクリックし、訪問者がCTAを見るタイミングを選択します。
    • 次のドロップダウンメニューをクリックして、フィルタリングルールを選択します。
    • CTAを表示するタイミングのルールをさらに追加するには、「ルールを追加する」をクリックして、フィルターを選択します。
  • CTAを非表示にするタイミングを選択します:
    • 除外ルールの追加]をクリックします。
    • は、CTAを非表示にするタイミングを選択するドロップダウンメニューです。 
    • 次のドロップダウンメニューをクリックして、フィルタリングルールを選択します。
    • CTAを非表示にするタイミングのルールをさらに追加するには、「除外ルールを追加する」をクリックして、フィルターを選択します。
  • 別のフィルタリングルールを作成するには、[フィルターグループを追加]をクリックし、フィルタリングルールを選択します。




表示周波数

訪問者がスティッキーバナー、ポップアップボックス、スライドインCTAを初めて解除した後、CTAを再度表示するかどうか、また表示する頻度を選択します。CTAの表示頻度を設定する:

  •  How often will be shown」セクションで、「Show again 」ドロップダウン・メニューをクリックし、頻度を選択します: 
    • 設定時間経過後:訪問者がCTAを解除した後、再度表示されるまでの時間を設定します。
    • 繰り返し:選択したウェブページにアクセスし、トリガーアクションを実行するたびに、たとえ以前にインタラクションを行ったことがあっても、CTAを表示します。
    • 再表示しない:訪問者にCTAを一度だけ表示する。初回表示後は、二度とCTAを表示しない。
       


CTAの選択肢をカスタマイズする

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

  • 上部の[オプション]タブをクリックします。
  • CTAをキャンペーンに関連付けるには、「キャンペーン」ドロップダウンメニューをクリックし、ポップアップCTAを関連付けるキャンペーンを選択します。 
  • スティッキーバナー、ポップアップボックス、スライドインCTAを使用する場合は、以下のオプションを設定します:
    • 小さな画面サイズでCTAを非表示にするには、「小さな画面サイズ」セクションで、スイッチをオンに切り替えます。
    • CTAの表示を開始するタイミングをスケジュールする場合は、「Schedule for later」スイッチをオンに切り替えます。次に、Start date and Timeを選択します。 
    • CTAの表示を停止するタイミングを予約するには、「公開しない日時を設定する」スイッチをオンにします。次に、End date and Timeを選択します。




CTAを公開する 

CTAの設定が終わったら、CTAを公開し、本番に臨みましょう。 

  • 右上の「レビューと公開」をクリックします。
  • 右のパネルでCTAを確認し、「今すぐ公開」をクリックします。CTAは対象ページに自動的に発行されます。



この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。