HubSpot CMS：プロフェッショナルな「料金表テーブルモジュール」の実装ガイド

Webサイトにおいて、サービスのプラン比較や価格の提示はコンバージョンに直結する重要な要素です。今回紹介する「料金表テーブルモジュール」を導入すれば、エンジニアの手を借りずに、ブランドイメージに合わせた機能的な料金比較表を自由に構築できるようになります。

1. 目的

本モジュールの主な目的は、「情報の透明性を高め、ユーザーの意思決定を強力にサポートすること」です。

• 直感的な比較: 複数のプランや機能を並列に表示し、ユーザーが自分に最適な選択肢を瞬時に判断できるようにします。
• デザインの一貫性: ヘッダーの色、テキストサイズ、余白などをエディターから一括管理し、サイト全体と調和したテーブルを作成できます。
• モバイル最適化: 複雑になりがちな表組みを、スマートフォン閲覧時には自動的に縦並びのカード形式へ変換し、視認性を確保します。

2. ユースケース

• SaaS・ソフトウェアのプラン比較: 「無料版」「プロフェッショナル」「エンタープライズ」といった異なるプランの機能差を明確に示します。
• サービスパッケージの紹介: コンサルティングやクリエイティブ制作など、複数のサービスレベルと価格帯を提示します。
• 具体例を用いたプラン解説: 特定の行を「具体例」として設定し、実際の運用イメージと価格感をセットで伝えることで、納得感を高めます。

3. 実装ステップ

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

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

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

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

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

ステップ3：エディターでの運用・カスタマイズ

コード適用後は、編集画面のサイドパネルからノーコードで詳細を調整できます。

• 列と行の設定: 「columns」でプラン数を、「rows」で比較項目を作成し、それぞれの内容を入力します。
• 強調表示: 特定のセルを目立たせたい場合は、「highlight」をオンにして背景色や文字色を切り替えます。
• スタイル調整: カラーピッカーを使用して、ヘッダー背景色や枠線の太さをブランドに合わせて微調整します。

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

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

1. fields.json

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

[
 {
  "children": [
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "ed9560c9-9c1c-0441-0faf-e9550904cfa6",
    "label": "title",
    "locked": false,
    "name": "title",
    "required": false,
    "type": "text"
   }
  ],
  "default": [],
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "c179193d-d8a5-7392-e6fc-6b3d06e993e9",
  "label": "columns",
  "locked": false,
  "name": "columns",
  "occurrence": {},
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 },
 {
  "children": [
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "d7805557-6ec3-59cf-119a-3a052f27dad6",
    "label": "title",
    "locked": false,
    "name": "title",
    "required": false,
    "type": "text"
   },
   {
    "default": false,
    "display": "checkbox",
    "display_width": null,
    "id": "6ad38bcb-6b06-63a3-9001-ebe8efd355f5",
    "label": "is_example",
    "locked": false,
    "name": "is_example",
    "required": false,
    "type": "boolean"
   },
   {
    "children": [
     {
      "display_width": null,
      "id": "966af101-ccd3-c4db-a10b-3050a3c423fd",
      "label": "content",
      "locked": false,
      "name": "content",
      "required": false,
      "type": "richtext"
     },
     {
      "default": false,
      "display": "checkbox",
      "display_width": null,
      "id": "602c9712-5e63-c97e-7aca-d5ef1e4acf3f",
      "label": "highlight",
      "locked": false,
      "name": "highlight",
      "required": false,
      "type": "boolean"
     }
    ],
    "default": [],
    "display_width": null,
    "expanded": false,
    "group_occurrence_meta": null,
    "id": "4b422ad5-7d67-db73-cdc1-94e1320642ee",
    "label": "cells",
    "locked": false,
    "name": "cells",
    "occurrence": {},
    "required": false,
    "tab": "CONTENT",
    "type": "group"
   }
  ],
  "default": [],
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "061a08e6-3523-bbb7-ce39-1b111ac42aa0",
  "label": "rows",
  "locked": false,
  "name": "rows",
  "occurrence": {},
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 },
 {
  "children": [
   { "default": { "color": null, "opacity": null }, "id": "515623f8-4fa2-645b-5086-4a968101c60c", "label": "header_bg_color", "name": "header_bg_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "96bbe9fa-b7e4-f1c2-ede4-cdb715c4de38", "label": "header_text_color", "name": "header_text_color", "type": "color" },
   { "display": "text", "id": "e766f233-5e0e-5134-7e0e-7580595ee79b", "label": "header_font_size", "name": "header_font_size", "type": "number" },
   { "display": "text", "id": "6dc0dc16-74d1-01d0-191a-df347869131e", "label": "header_padding", "name": "header_padding", "type": "number" },
   { "default": { "color": null, "opacity": null }, "id": "775f2e3b-8ff3-8d87-0321-ecdc42b1e2ac", "label": "row_title_bg_color", "name": "row_title_bg_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "7507e164-c68a-a8ad-f6c2-761eb0c5102a", "label": "row_title_text_color", "name": "row_title_text_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "e6b750b8-64dd-2f9c-742a-2fbff12e6cc3", "label": "content_bg_color", "name": "content_bg_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "ea8a1a14-c964-e9b7-360b-9abea479d953", "label": "content_text_color", "name": "content_text_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "3417db6a-c059-3069-a9e4-b3683340b2a7", "label": "highlight_bg_color", "name": "highlight_bg_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "ad2b046b-2a21-c01e-927d-a4f8b1e7b58d", "label": "highlight_text_color", "name": "highlight_text_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "73861370-bc2f-10c2-8cc7-80535299e608", "label": "example_row_bg_color", "name": "example_row_bg_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "bc2a46db-f8f0-35b0-1e0c-b890b29fd466", "label": "example_row_text_color", "name": "example_row_text_color", "type": "color" },
   { "default": { "color": null, "opacity": null }, "id": "542c512e-4e10-7827-292b-d6446f54ef78", "label": "border_color", "name": "border_color", "type": "color" },
   { "display": "text", "id": "ca1c6f42-30f0-a850-7088-34b84e7cb3da", "label": "border_width", "name": "border_width", "type": "number" },
   { "display": "text", "id": "98e77063-97b2-4169-ba7f-fc157f640e47", "label": "font_size", "name": "font_size", "type": "number" },
   { "display": "text", "id": "de62c8f1-1e30-7799-5c12-993ba149848f", "label": "cell_padding", "name": "cell_padding", "type": "number" },
   { "display": "text", "id": "73dc7a53-67ab-6e86-f5cc-4e7982d282d5", "label": "first_column_width", "name": "first_column_width", "type": "number" }
  ],
  "id": "84432453-92c7-d5bc-237b-0c33d0abe501",
  "label": "style",
  "name": "style",
  "tab": "CONTENT",
  "type": "group"
 }
]