HubSpot CMS：クリック率を高める「画像付きボタンモジュール」の解説

Webサイトにおいて、資料請求やお問い合わせなどの成果を左右するのがCTA（コール・トゥ・アクション）ボタンです。今回紹介する「画像付きボタンモジュール」は、通常のテキストのみのボタンとは異なり、直感的なアイコンや画像を組み込むことで、ユーザーの視覚に強く訴えかけ、クリックを促すことができます。

1. 目的

本モジュールの主な目的は、「誰でも簡単に、視認性の高い高品質なビジュアルボタンを構築・管理すること」です。

• 高い視認性: 左側に画像を配置することで、ボタンの役割を瞬時にユーザーへ伝えます。
• 柔軟なカスタマイズ: 背景色、文字色、枠線、さらにはボタンの幅や余白まで、エディター上で自由に調整可能です。
• マルチデバイス対応: スマートフォンで見てもデザインが崩れないレスポンシブ仕様が自動で適用されます。

2. ユースケース

• 資料請求: 資料の表紙画像をボタン内に添えて、ダウンロード内容を具体的にイメージさせます。
• 予約・購入: カレンダーやカートのアイコンを使い、次のアクションを直感的に示します。
• サービス案内: メインテキストに補足用のサブテキストを添え、より詳細な情報を伝えます。

3. 実装と操作ステップ

新規ページの作成から、提供されたコードの適用、実際の運用設定までの全工程を解説します。

ステップ1：ページ作成とモジュールの配置

HubSpot管理画面から新しいページを立ち上げます。エディター左側のサイドバーでモジュール名を検索し、編集エリアへドラッグ＆ドロップして配置します。

ステップ2：デザインマネージャーでのコード適用

デザインマネージャーで新規モジュールを作成し、公開されているソースコードを、HTML/HubLおよびCSSの該当箇所へそのままコピー＆ペーストして保存・公開します。

ステップ3：エディターでの設定

コード適用後は、編集画面のサイドパネルから直感的にボタンをデザインできます。

• リンクと画像: 遷移先のURLを設定し、ボタンに表示するアイコンや写真をアップロードします。
• テキスト: メインの文言に加え、必要に応じてサブテキストを入力します。
• スタイル調整: カラーピッカーでボタンや文字の色を指定し、文字サイズや余白の数値を微調整して完了です。

‍

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

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

1. fields.json

フィールド定義です。繰り返しフィールド（Items）と、スタイル設定用フィールド（Styles）で構成されています。

[
  {
    "children": [
      {
        "default": {
          "content_id": null,
          "href": "",
          "type": "EXTERNAL"
        },
        "display_width": null,
        "id": "f4dd7acd-2d7e-76c9-b26f-74ab4e08cf44",
        "label": "link_field",
        "locked": false,
        "name": "link_field",
        "required": false,
        "supported_types": [
          "EXTERNAL",
          "CONTENT",
          "FILE",
          "EMAIL_ADDRESS",
          "BLOG",
          "CALL_TO_ACTION",
          "PHONE_NUMBER",
          "WHATSAPP_NUMBER",
          "PAYMENT"
        ],
        "type": "url"
      },
      {
        "default": {
          "size_type": "auto",
          "src": "",
          "alt": null,
          "loading": "lazy"
        },
        "display_width": null,
        "id": "3a544d43-2f52-1693-268d-f6701677d5e8",
        "label": "left_image",
        "locked": false,
        "name": "left_image",
        "required": false,
        "resizable": true,
        "responsive": true,
        "show_loading": false,
        "type": "image"
      },
      {
        "allow_new_line": false,
        "display_width": null,
        "id": "125a57f0-da53-241d-a5bb-9623473db3f2",
        "label": "sub_text",
        "locked": false,
        "name": "sub_text",
        "required": false,
        "type": "text"
      },
      {
        "allow_new_line": false,
        "display_width": null,
        "id": "a5e99482-16c1-e624-15b6-255f006ec3d8",
        "label": "main_text",
        "locked": false,
        "name": "main_text",
        "required": false,
        "type": "text"
      }
    ],
    "default": {
      "link_field": {
        "content_id": null,
        "href": "",
        "type": "EXTERNAL"
      },
      "left_image": {
        "size_type": "auto",
        "src": "",
        "alt": null,
        "loading": "lazy"
      }
    },
    "display_width": null,
    "expanded": false,
    "group_occurrence_meta": null,
    "id": "1506e18e-9178-22f7-d7c5-5bee6b0b2e8e",
    "label": "content_settings",
    "locked": false,
    "name": "content_settings",
    "required": false,
    "tab": "CONTENT",
    "type": "group"
  },
  {
    "children": [
      {
        "default": {
          "color": null,
          "opacity": null
        },
        "display_width": null,
        "id": "8d0868d2-91e3-aa14-f087-dc2e819ffb33",
        "label": "bg_color",
        "locked": false,
        "name": "bg_color",
        "required": false,
        "type": "color"
      },
      {
        "default": {
          "color": null,
          "opacity": null
        },
        "display_width": null,
        "id": "13fcadad-7961-5839-ca94-1ea9bc3a5bee",
        "label": "text_color",
        "locked": false,
        "name": "text_color",
        "required": false,
        "type": "color"
      },
      {
        "default": {
          "color": null,
          "opacity": null
        },
        "display_width": null,
        "id": "468e6147-8896-9019-022a-d3d126f73ed7",
        "label": "border_color",
        "locked": false,
        "name": "border_color",
        "required": false,
        "type": "color"
      },
      {
        "display": "text",
        "display_width": null,
        "id": "5022d0f7-d8a0-5c8a-55aa-8ca6d2f5084d",
        "label": "border_size",
        "locked": false,
        "name": "border_size",
        "required": false,
        "step": 1,
        "type": "number"
      },
      {
        "display": "text",
        "display_width": null,
        "id": "51120133-7a36-6784-0ea4-6f96e5a6d491",
        "label": "font_size_sub",
        "locked": false,
        "name": "font_size_sub",
        "required": false,
        "step": 1,
        "type": "number"
      },
      {
        "display": "text",
        "display_width": null,
        "id": "562925bd-40a0-66da-bb0a-ce208b3c4ef3",
        "label": "font_size_main",
        "locked": false,
        "name": "font_size_main",
        "required": false,
        "step": 1,
        "type": "number"
      },
      {
        "display": "text",
        "display_width": null,
        "id": "b4dc843f-cc9e-5684-ab7d-41f4f2c8ad69",
        "label": "button_width",
        "locked": false,
        "name": "button_width",
        "required": false,
        "step": 1,
        "type": "number"
      },
      {
        "display": "text",
        "display_width": null,
        "id": "0a846e0d-d283-9358-65d6-e06f4ffd221a",
        "label": "button_v_padding",
        "locked": false,
        "name": "button_v_padding",
        "required": false,
        "step": 1,
        "type": "number"
      }
    ],
    "default": {
      "bg_color": {
        "color": null,
        "opacity": null
      },
      "text_color": {
        "color": null,
        "opacity": null
      },
      "border_color": {
        "color": null,
        "opacity": null
      }
    },
    "display_width": null,
    "expanded": false,
    "group_occurrence_meta": null,
    "id": "259ad463-3bdb-ce22-2926-4abd5116ce53",
    "label": "style_settings",
    "locked": false,
    "name": "style_settings",
    "required": false,
    "tab": "CONTENT",
    "type": "group"
  }
]