リード獲得
フォーム・LP・CTA の設計と CRM 連携

フォーム送信からコンタクト作成までの完全フロー

HubSpotフォームが送信されると、バックグラウンドで複数の処理が 自動的・連続的に実行されます。 この流れを正確に理解することが、CMS↔CRM連携の設計の出発点です。

Cookie とコンタクト特定の仕組み

HubSpotトラッキングコードが設置されたページに訪問すると、 ブラウザに hubspotutk という Cookie が発行されます。 フォームを送信する際、このCookieの値もデータとして送られ、 フォーム送信前のページ閲覧履歴がコンタクトに紐付けられます。

HubSpot フォームの種類と使い分け

HubSpotのフォームには複数の表示形式があります。 それぞれの特性を理解して適切な場面で使い分けることで、 コンバージョン率を最大化できます。

ポップアップフォームのトリガー設定

フォームフィールドの設計 — プロパティ紐付けとプログレッシブプロファイリング

フォームフィールドとCRMプロパティの紐付け

HubSpotフォームのすべてのフィールドはCRMのプロパティと1対1で紐付けられています。 フォームに追加できるフィールドは「HubSpotに存在するプロパティ」に限られます。 カスタムプロパティを追加したい場合は、先にCRM側でプロパティを作成してからフォームに追加します。

最低限取得すべきフィールドの設計指針

プログレッシブプロファイリング（Professional以上）

プログレッシブプロファイリングは、同じコンタクトが2回目以降にフォームを送信する際、 すでに分かっている項目を非表示にして、まだ分かっていない情報を聞く機能です。 毎回同じ質問を繰り返すストレスを与えずに、段階的にリード情報を充実させられます。

設定方法：フォームエディター → フィールドを選択 → 「プログレッシブフィールドとして使用」をON。 代替フィールドとして表示したいフィールド（まだ値がない場合に聞く質問）を指定します。

hidden フィールドでコンテキストを渡す — UTMパラメータ・ページURL

hidden フィールドはユーザーには見えないが、フォーム送信時にCRMへ値を送信できる 特殊なフィールドです。「どのページから」「どの広告から」「どのキャンペーンから」 コンバージョンしたかを記録するために不可欠です。 これを設定しないと、マーケティング施策の効果測定ができません。

UTMパラメータを hidden フィールドで取得する仕組み

hidden フィールドの設定方法と実装パターン

{# ===== 方法1：{% form %} タグの form_field_values_json で値を渡す =====
   ページのURLやHubLの変数を hidden フィールドに渡せる
===================================================== #}
{% form
  form_id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
  response_redirect_url="/thanks"
  form_field_values_json='[
    {
      "name"  : "hs_context",
      "value" : "download_page"
    },
    {
      "name"  : "landing_page_url",
      "value" : "{{ content.absolute_url }}"
    },
    {
      "name"  : "page_title",
      "value" : "{{ content.name|escape }}"
    }
  ]'
%}

{# ===== 方法2：JavaScriptでUTMパラメータをフォームに動的に注入 =====
   フォームのonFormReadyコールバックを使う
===================================================== #}
<script>
// URLのクエリパラメータを取得してフォームのhiddenフィールドに注入
hbspt.forms.create({
  portalId: "{{ hub_id }}",
  formId  : "xxxx-xxxx-xxxx-xxxx",
  target  : "#hs-form-target",
  onFormReady: function($form) {
    var params = new URLSearchParams(window.location.search);
    var utmFields = [
      'utm_source', 'utm_medium',
      'utm_campaign', 'utm_content', 'utm_term'
    ];
    utmFields.forEach(function(key) {
      var val = params.get(key);
      if (val) {
        // フォームのhiddenフィールドに値をセット
        $form.find('input[name="' + key + '"]').val(val);
      }
    });
  }
});
</script>

実案件でよく使う hidden フィールドのパターン

サンクスページ・サンクスメールの設定

サンクスページの設計

フォーム送信後のサンクスページは「コンバージョン直後の最も温度の高い瞬間」です。 単なる「送信完了」で終わらせず、次のアクションへ誘導する設計が重要です。

サンクスページの設定方法（2種類）

サンクスメール（自動返信メール）の設定

フォーム送信後の自動返信メールはワークフローで設定します。 フォームエディターに「送信後メール」という設定はありません。 ワークフローが必要なため Marketing Hub Professional 以上が必要です。

【ワークフロー設定手順】

1. マーケティング → 自動化 → ワークフロー → 「ワークフローを作成」

2. トリガーの設定：
   「コンタクトベースのワークフロー」を選択
   トリガー：「フォームの送信」→ 対象フォームを指定
   例：「資料DLフォームを送信した」

3. アクションの追加：
   「メールを送信」→ 事前に作成したサンクスメールを選択
   （送信遅延：0分 = 送信直後）

4. 追加アクション（任意）：
   - コンタクトプロパティを更新（例：lifeyclestage = "lead"）
   - 担当者にタスクを作成（例：「24時間以内にフォローアップ」）
   - Slackに通知（インテグレーション設定が必要）
   - リードスコアを加算

5. サンクスメールの内容：
   件名：【資料名】をお送りします（パーソナライズトークン使用）
   本文：氏名でパーソナライズ → 資料のダウンロードURL → 次のアクション案内

CTA の作成と CMS テンプレートへの組み込み

CTA（コール・トゥ・アクション）は「クリック数・コンバージョン数を計測できるボタン・画像」です。 通常のHTMLリンクと違い、HubSpotのCTAはクリック数・コンバージョン率が自動で計測され、 A/Bテストも可能です。

CTA の作成手順

• マーケティング → リード獲得 → CTA → 「CTAを作成」
• テキストCTA（ボタン）または画像CTAを選択
• リンク先URL・ボタンテキスト・スタイルを設定
• 作成後に発行される埋め込みコードまたはHubL タグをコピー

HubSpot CMS テンプレートへの CTA 組み込み方法

{# ===== 方法1：HubL タグで直接埋め込む（最も推奨）=====
   CTA のIDを使って HubL タグで組み込む方法。
   管理画面でCTAの内容（テキスト・リンク先）を変更しても
   サイト側は自動で反映される。
===================================================== #}
{% cta "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" %}

{# ===== 方法2：カスタムモジュールのフィールドで CTA を選択できるようにする =====
   fields.json で hubspot_cta 型のフィールドを定義する
===================================================== #}

// fields.json
{
  "type"  : "hubspot_cta",
  "name"  : "cta",
  "label" : "CTA（コール・トゥ・アクション）"
}

// module.html
{% if module.cta %}
  {% cta module.cta %}
{% endif %}

{# ===== 方法3：ブログ記事テンプレートにCTAを固定配置する =====
   記事本文の下にCTA を常に表示するパターン
===================================================== #}
<div class="post__cta-block">
  <p>この記事を読んで興味を持った方へ</p>
  {% cta "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" %}
</div>

CTA vs 通常リンクの使い分け

ランディングページの A/B テスト（Professional以上）

A/Bテストは2つのバリアントを同時に表示し、どちらがより多くコンバージョンするかを統計的に検証する手法です。 HubSpot では LP・メール・CTAにA/Bテスト機能が組み込まれています。

A/Bテストの設定手順（LP）

• コンテンツ → ウェブサイトページ（またはLP）→ 対象ページを開く
• 右上の「アクション」→ 「A/Bテストを実行」
• バリアントBのページを編集（見出し・CTA・レイアウト等を変更）
• トラフィックの配分比率を設定（例：A:B = 50:50）
• 勝者を判断する指標を設定（コンバージョン率 / クリック率）
• テスト終了後、勝者のバリアントを「100%に設定」してテストを終了

A/Bテストの設計ルール

リード獲得の計測 — コンバージョン数・フォーム送信数のトラッキング

リード獲得の施策が機能しているかどうかを判断するために、 正しい指標を正しい場所で確認することが必要です。 HubSpotは複数の計測ポイントを持っています。

フォームのパフォーマンスレポート

ランディングページのパフォーマンス確認

• 確認場所：コンテンツ → ウェブサイトページ → ページを選択 → 「パフォーマンス」タブ
• セッション数・コンバージョン数・コンバージョン率・直帰率が一画面で確認できる
• 期間を指定して前月比・前年比の比較が可能

GA4 との役割分担

第2章まとめ