CTA（コール・トゥ・アクション）の作成

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

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

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

CTAをデザインする

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

• HubSpotアカウントで、［マーケティング］＞［リード情報の収集］＞［CTA］の順に進みます。
• 左上のドロップダウンメニューをクリックし、［CTA（旧）］を選択します。
• 右上の［作成］をクリックします。
• 新規CTAをゼロから作成することも、テンプレートから作成することもできます：
  • テンプレートから新しいCTAを作成するには、左のパネルで、HubSpot 「テンプレート」をクリックします。そして、自分の目標に合ったテンプレートを選びます。 
  • ゼロから新しいCTAを作成するには、左のパネルで、「ゼロから始める」をクリックします。次に、CTAの種類を選択します：
    
    • スティッキーバナー：ページの上部または下部に固定される常設のバナーです。バナーは、訪問者があなたのページをスクロールするときに残ります。 
    • ポップアップボックス：設定されたスケジュールで表示されるポップアップボックス。 
    • スライドイン： ウェブサイトの隅からスライドして入ってくるバナーです。バナーは、訪問者があなたのページをスクロールするときに残ります。 
    • Embedded: HubSpotのコンテンツで使用できるバナー、CTA、ボタンを埋め込み、見込み客を特定のページに誘導します。
    • 「埋め込み画像」: HubSpotのページやEメールで使用できる画像です。
    • Embedded: HubSpotのページやEメールで使用できるボタンです。
• 左パネルの「追加」タブから、CTAの要素を追加し、レイアウトを編集します： 

• • CTAにコンテンツを追加するには、新しい要素をクリックしてエディターの右側のパネルに直接ドラッグします。CTAに動画要素を追加することもできます。詳しくは、CTAに動画を追加するをご覧ください。 
  • CTAのレイアウトを変更するには、要素にマウスポインターを合わせ、クリック＆ドラッグして新しい位置に移動します。
  • 要素を複製するには、要素にマウスポインターを合わせてduplicate複製アイコンです。
  • 要素を削除する場合は、要素の上にマウスポインターを合わせてdeleteごみ箱アイコンです。 
  • 要素を編集するには、その要素をクリックします。左側のパネルでは、要素の内容やデザインを編集することができます。

• 左のパネルで、「コンテンツ」タブをクリックして、要素を管理します。 
  • 要素を編集するには、要素の名前をクリックします。左側のパネルでは、要素の内容やデザインを編集することができます。リッチテキスト要素では、コンテンツアシスタントを使って、CTAコンテンツを作成したり、洗練させたりすることができます。 
  • 要素を削除するには、要素の上にマウスポインターを置き、delete 削除アイコンをクリックします。 
• 左のパネルで、デザインタブをクリックし、CTAのカスタマイズとプレビューを行います。
  • 特定のページでCTAをプレビューするには、右上の「プレビュー」をクリックします。次に、「特定のページでプレビュー」のドロップダウンメニューをクリックし、CTAをプレビューするHubSpotのページを選択します。 

• • CTAの外観をカスタマイズするには、以下のオプションのいずれかを選択します。次に、左側のパネルで変更内容を設定します。 
    • Position:粘着バナータイプのCTAの場合、上部または下部の位置を選択できます。スライドインタイプのCTAの場合、ページの左上、左下、右上、右下にCTAを配置することができます。 
    • サイジング: CTAの高さを設定します。CTAの内容に基づいて自動的に高さを設定するオプションを切り替えることができます。
    • Layout: CTAのレイアウトを設定します。CTAコンテンツにパディングを追加することができます。また、レスポンシブ・レイアウトを有効にするオプションを切り替えることもできる。レスポンシブレイアウトでは、CTAの列は小さな画面でも縦に積み重なります。
    • スタイル: CTAのスタイル、例えばCTAの主要フォント、境界線、ドロップシャドウなどを設定します。 
    • 背景: CTAの背景を設定します。背景色を設定するか、背景画像をアップロードするかを選択できます。

HTMLのCTAをデザインする

カスタム埋め込みHTML CTAを作成し、独自のテーマやCSSを適用するには：

• 左のパネルで、「ゼロから始める」をクリックする。 
• 次に、詳細オプションをクリックして展開し、HTML 埋め込みを選択します。
• 「リンク先」ドロップダウンメニューをクリックし、リダイレクトするCTAのオプションを選択します：
  • Eメールアドレス：mailtoリンクを作成します。
  • ファイルダウンロード: CTAをファイルマネージャーのファイルにリンクします。既存のファイルを選択するか、新しいファイルをアップロードし、ボタンのCTAをクリックした訪問者に新しいブラウザーウィンドウで画像を表示する場合は、新しいタブでページを開くチェックボックスを選択します。 
  • ミーティングリンク： CTAをHubSpotミーティングリンクにリンクします。「ミーティングリンクを選択」ドロップダウンをクリックし、ミーティングリンクを選択します。このリンクを新しいページで開くには、新しいタブでページを開くチェックボックスを選択します。 
  • ページの1つ: CTAをHubSpotのページまたはブログ記事の1つにリンクします。ページドロップダウンメニューをクリックし、ページまたはポストを選択します。ボタンCTAのリンクはページIDに関連付けられ、ページのURLが変更されると、ボタンCTAのリンクも自動的に更新されます。
  • URL: CTAをHubSpot外の外部ページにリンクします。リンクURLフィールドに、訪問者を誘導するウェブサイトURLを入力します。
  • CTA:カスタムCTAを使用して、スティッキーバナー、ポップアップボックス、スライドインCTAをトリガーします。
• 「ボタンの内容」フィールドに、CTA textを入力します。 
• CTAのデザインをさらにカスタマイズするには、[詳細]をクリックします。
  

• Advancedページでは、カスタムCSSクラスやルールを追加することができます：
  • カスタムCSSクラス: CTAにカスタムクラスを入力します。カスタムクラスを使用して、ウェブサイト内の複数のCTAにフォントファミリーなどのデザインスタイルを適用できます。カスタムCSSクラスは、HubSpotページで使用するCSSスタイルシートに含める必要があります。
  • カスタム CSS ルール:カスタムルールを追加して、CTA に固有のインラインスタイルを適用します。
    • 新しいCSSルールを追加するには、 Add oneまたは+ Add and をクリックし、セレクターとスタイルを設定します。 
      • Selector: CSSセレクターを入力します。この値はオプションで、CTAのセレクターと組み合わされます。例えば、入力されたセレクターが:hoverの場合、組み合わされたセレクターは次のようになる。${ctaSelector}:hover
      • Style:設定されたセレクターに適用するカスタムCSSスタイルルールを入力します。セレクターを入力しなくても、スタイルを入力することができます。例えば、color: yellow;。
         

• 既存のCSSルールを編集するには、ルールにマウスポインターを合わせ、edit編集アイコンをクリックします。 
• CSSルールを複製するには、ルールにマウスポインターを合わせ、duplicate複製アイコンをクリックします。 

• CSSルールの優先順位を管理するには、各ルールをクリックしてドラッグし、優先順位順に並べます。
• CSSルールを削除するには、ルールにマウスポインターを合わせ、delete削除アイコンをクリックします。 

• 旧CTAと同じHTMLとクラスをCTAに適用するには、「旧マークアップを使用」チェックボックスを選択します。旧CTAをスタイル設定するページにCSSスタイルシートがある場合、このチェックボックスを選択すると、HTML CTAにも同じスタイルが適用されます。 

• CTA デザインの設定を完了するには、保存して適用 をクリックします。
  

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

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

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

起動トリガー 

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

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

ウェブサイト URL

同じTargetingタブで、特定のウェブページ URL および/またはクエリーパラメーター値に対して条件付きロジックを追加できます。デフォルトでは、CTAは全ページに表示されます。

• 訪問者が特定のウェブサイトのURLにいるときにCTAを表示するには、「ウェブサイトのURL」セクションで
  • 最初のドロップダウンメニューをクリックし、［ウェブサイトURL］を選択します。
  • 2番目のドロップダウンメニューをクリックしターゲッティングルール .
  • テキストフィールドにルール基準を入力します。

• URLに特定のクエリーパラメーターが含まれる「ウェブ」サイトのページに訪問者がいるときに、CTAを表示すること：
  • 最初のドロップダウンメニューをクリックし、［クエリーパラメーター］を選択します。
  • 1つ目のテキストフィールドに、クエリーパラメーター名を入力します。
  • ドロップダウンをクリックし、ターゲティングルールを選択します。
  • 2番目のテキストフィールドに、クエリーパラメーターの値を入力します。

• 別のルールを追加するには、［ルールを追加］をクリックします。
• 特定のページ（例：プライバシーポリシーページ）からCTAを除外するには、［除外ルールを追加］をクリックします。
  
  
  

訪問者の情報および行動（任意）

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

• 訪問者情報と行動（オプション）セクションで、最初のドロップダウンメニューをクリックし、訪問者の絞り込み方法を選択します。

• 次のドロップダウンメニューをクリックして、フィルタリングルールを選択します。
• CTAを表示するタイミングのルールをさらに追加するには、「ルールを追加する」をクリックして、フィルターを選択します。

• CTAを非表示にするタイミングを選択します：
  
  • 除外ルールの追加］をクリックします。
  • は、CTAを非表示にするタイミングを選択するドロップダウンメニューです。 
  • 次のドロップダウンメニューをクリックして、フィルタリングルールを選択します。
  • CTAを非表示にするタイミングのルールをさらに追加するには、「除外ルールを追加する」をクリックして、フィルターを選択します。

• 別のフィルタリングルールを作成するには、［フィルターグループを追加］をクリックし、フィルタリングルールを選択します。

表示周波数

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

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

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

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

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

CTAを公開する 

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

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