HubSpot CMS: クリック率を高める「画像付きリッチCTA」モジュールの実装

このモジュールの目的とメリット

このモジュールの主な目的は、**「ユーザーの視線を集め、クリックへの心理的ハードルを下げること」**です。

主なメリット:

• 視線誘導: 4秒ごとにボタン上を光が走るアニメーション（シマーエフェクト）があり、動的な要素で自然と視線を集めます。
• 情報量の多さ: ボタン内に「サムネイル画像」「マイクロコピー（補足）」「メインコピー」を配置できるため、クリックした先に何があるかが直感的に伝わります。
• 柔軟な運用: HubSpotの「CTAツール」で作成したボタンを埋め込むモードと、このモジュール単体でリンクや画像を自由に設定する「カスタムモード」を切り替えて使用できます。
• デザイン管理: ブランドカラーに合わせて、通常時とホバー時の色をノーコードで自由に調整可能です。

主なユースケース

このデザインは、ユーザーに強いアクションを促したい以下のような場面に最適です。

• 資料ダウンロード
  • 資料の表紙画像（サムネイル） ＋ 「3分でわかる！」（補足） ＋ 「資料を無料ダウンロード」（メイン）
• ウェビナー・イベント申し込み
  • 登壇者の写真 ＋ 「〇月〇日開催」（補足） ＋ 「ウェビナーに申し込む」（メイン）
• 製品デモ・お問い合わせ
  • 製品ロゴ ＋ 「まずは無料でお試し」（補足） ＋ 「デモをリクエストする」（メイン）
• 記事の回遊促進
  • 注目記事のアイキャッチ ＋ 「人気記事」（補足） ＋ 「記事の続きをよむ」（メイン）

HubSpot CMSでの使い方

このコードをDesign Managerで実装した後の、ページエディタ（編集画面）での操作方法です。

1. ボタンタイプを選択 (Button Type)

最初に、このボタンをどう運用するかを選択します。

• Custom (カスタム): モジュール内で画像やテキスト、リンク先を自由に設定するモードです（推奨）。
• CTA (HubSpot CTA): HubSpotのマーケティング機能「CTA」ツールで作成したボタンを選択して表示します。※この場合、画像やサブテキストのレイアウトはCTAツールの設定に依存しますが、光るエフェクトやボタンスタイルは適用されます。

2. コンテンツの設定（Custom選択時）

「Custom」を選んだ場合、以下の項目が表示されます。

• Link Field: リンク先URLを設定します。外部リンク、内部ページ、ファイル、メールアドレスなどに対応しています。
• Thumbnail: ボタンの左側に表示する画像を選択します。資料の表紙やアイコンなどが適しています。
• Top Text: メインテキストの上に表示される小さな補足テキストです（例：「＼ 無料公開中 ／」）。
• Main Text: ボタンのメインとなる文言です。

3. スタイルの調整 (Styles)

「Styles」グループでは、以下のデザインを直感的に変更できます。

• Base Bg/Text Color: 通常時の背景色と文字色。
• Hover Bg/Text Color: マウスを乗せた時の背景色と文字色。
• Border Color / Size: 枠線の色と太さ。
• Text Size: 上部テキストとメインテキストのフォントサイズ。

モジュールのソースコード

HubSpotのDesign Managerで「新規モジュール」を作成し、以下のコードをそれぞれの箇所に貼り付けてください。

1. fields.json

条件分岐ロジック（visibility）が含まれており、選択したタイプに応じて必要な入力項目だけが表示される使いやすい設計になっています。

‍

[
 {
  "choices": [
   [
    "custom",
    "Custom (Use module fields)"
   ],
   [
    "cta",
    "HubSpot CTA (Select existing)"
   ]
  ],
  "display": "select",
  "display_width": null,
  "id": "86abe95d-12cc-4468-0761-41f0be18f1d6",
  "label": "Button Type",
  "locked": false,
  "multiple": false,
  "name": "button_type",
  "preset": null,
  "reordering_enabled": true,
  "required": false,
  "type": "choice"
 },
 {
  "display_width": null,
  "id": "de5d23b2-d299-d748-e214-c43db3a1526b",
  "label": "Select CTA",
  "locked": false,
  "name": "cta_field",
  "required": false,
  "type": "cta",
  "visibility": {
   "controlling_field_path": "button_type",
   "controlling_value_regex": "cta",
   "operator": "EQUAL"
  }
 },
 {
  "default": {
   "url": {
    "content_id": null,
    "type": "EXTERNAL",
    "href": ""
   },
   "open_in_new_tab": false,
   "no_follow": false
  },
  "display_width": null,
  "id": "4ed2abf9-80f9-3a59-7029-e2ff4b992b2f",
  "label": "Link",
  "locked": false,
  "name": "link_field",
  "required": false,
  "show_advanced_rel_options": false,
  "supported_types": [
   "EXTERNAL",
   "CONTENT",
   "FILE",
   "EMAIL_ADDRESS",
   "BLOG",
   "CALL_TO_ACTION",
   "PHONE_NUMBER",
   "WHATSAPP_NUMBER",
   "PAYMENT"
  ],
  "type": "link",
  "visibility": {
   "controlling_field_path": "button_type",
   "controlling_value_regex": "custom",
   "operator": "EQUAL"
  }
 },
 {
  "default": {
   "size_type": "auto",
   "src": "",
   "alt": null,
   "loading": "lazy"
  },
  "display_width": null,
  "id": "5fb752e9-691e-7b11-a612-94cac8189962",
  "label": "Thumbnail Image",
  "locked": false,
  "name": "thumbnail",
  "required": false,
  "resizable": true,
  "responsive": true,
  "show_loading": false,
  "type": "image",
  "visibility": {
   "controlling_field_path": "button_type",
   "controlling_value_regex": "custom",
   "operator": "EQUAL"
  }
 },
 {
  "allow_new_line": false,
  "display_width": null,
  "id": "0726cb7f-8436-4243-dcec-36ba8bcfb6b1",
  "label": "Top Text (Microcopy)",
  "locked": false,
  "name": "top_text",
  "required": false,
  "type": "text",
  "visibility": {
   "controlling_field_path": "button_type",
   "controlling_value_regex": "custom",
   "operator": "EQUAL"
  }
 },
 {
  "allow_new_line": false,
  "display_width": null,
  "id": "85113087-5591-64c7-c052-2d9720c1ab49",
  "label": "Main Button Text",
  "locked": false,
  "name": "main_text",
  "required": false,
  "type": "text",
  "visibility": {
   "controlling_field_path": "button_type",
   "controlling_value_regex": "custom",
   "operator": "EQUAL"
  }
 },
 {
  "children": [
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "a757c310-1dc8-9f7f-5f73-20dc89173b3e",
    "label": "Base Background Color",
    "locked": false,
    "name": "base_bg_color",
    "required": false,
    "type": "color"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "44209241-2b72-bb28-b166-ef57a7222a8e",
    "label": "Hover Background Color",
    "locked": false,
    "name": "hover_bg_color",
    "required": false,
    "type": "color"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "d4f266ca-e938-b1b0-1d3d-4c0a027fe887",
    "label": "Base Text Color",
    "locked": false,
    "name": "base_text_color",
    "required": false,
    "type": "color"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "64278894-20a7-cf1e-52c9-966217d6d4fb",
    "label": "Hover Text Color",
    "locked": false,
    "name": "hover_text_color",
    "required": false,
    "type": "color"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "5c01e696-9336-1fcf-e5e4-1987e32d44f4",
    "label": "Border Color",
    "locked": false,
    "name": "border_color",
    "required": false,
    "type": "color"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "a3f5c61a-7ed6-4e17-386b-5550214aca9d",
    "label": "Border Size (px)",
    "locked": false,
    "name": "border_size",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "6fb4ebf9-4b2d-c15b-0177-0a8594cacbd1",
    "label": "Top Text Size (px)",
    "locked": false,
    "name": "top_text_size",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "81d85724-0b11-31dd-c5e6-937e2270b8c3",
    "label": "Main Text Size (px)",
    "locked": false,
    "name": "main_text_size",
    "required": false,
    "step": 1,
    "type": "number"
   }
  ],
  "default": {
   "base_bg_color": {
    "color": null,
    "opacity": null
   },
   "hover_bg_color": {
    "color": null,
    "opacity": null
   },
   "base_text_color": {
    "color": null,
    "opacity": null
   },
   "hover_text_color": {
    "color": null,
    "opacity": null
   },
   "border_color": {
    "color": null,
    "opacity": null
   }
  },
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "cf5f24f0-39f9-9be6-2158-e2fb915743ad",
  "label": "Styles",
  "locked": false,
  "name": "styles",
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 }
]