HubSpot CMS: 導入ステップやフロー図に使える「ステップフロー」モジュールの実装

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

このモジュールの主な目的は、「ユーザーに次の行動（ネクストアクション）を明確にイメージさせること」です。

複雑な工程を「ステップ」として分割し、アイコンと番号を用いて視覚化することで、ユーザーの離脱を防ぎ、コンバージョン率（CVR）の向上に寄与します。また、HubSpotのフィールド機能を活用しているため、HTMLやCSSがわからないマーケティング担当者でも、ページエディタ上で簡単にステップの増減や色の変更が可能です。

主なユースケース

このデザインは、以下のような場面で特に効果を発揮します。

• SaaS・アプリの導入フロー
  • Step 1: アカウント作成
  • Step 2: 初期設定
  • Step 3: 利用開始
• お問い合わせから納品までの流れ
  • Step 1: ヒアリング
  • Step 2: お見積り提出
  • Step 3: ご契約・着手
• 採用サイトの選考プロセス
  • Step 1: エントリー
  • Step 2: 書類選考
  • Step 3: 面接
• セミナー・イベント参加手順
  • Step 1: フォーム送信
  • Step 2: 受講票メール受信
  • Step 3: 当日会場へ

HubSpot CMSでの使い方

このモジュールをページエディタ（ページ編集画面）に配置した際の設定項目と操作方法は以下の通りです。

1. 基本設定とスタイル (Style Settings)モジュール設定のトップまたはスタイルグループから、以下のデザインを一括で変更できます。ブランドカラーに合わせて調整してください。

• Main Title: セクション全体のタイトルを入力します（例：「ご利用の流れ」）。
• Text Color: テキスト全体の色を指定します。
• Border Color: 枠線の色を指定します。
• Border Width: 枠線の太さを数値で指定します。
• Base Font Size: 基本となる文字サイズを調整します。

2. ステップの追加と編集 (Steps)「Steps」グループはリピーター（繰り返しフィールド）になっているため、必要なステップ数だけ直感的に追加・削除が可能です。

• Add / Remove: 必要な数だけステップを追加したり、ドラッグ＆ドロップで順番を入れ替えたりできます。
• Step Label / Number: 「STEP」「01」のような表記を自由に入力できます。
• Icon: HubSpot標準のアイコンピッカーから、内容に合ったアイコンを選択します。
• Title / Description: 各ステップの見出しと詳細説明を入力します。

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

以下は、Design Managerに実装するためのコード一式です。カスタムモジュールを新規作成し、各セクションに以下のコードを貼り付けてください。

1. fields.json

フィールド定義です。スタイル設定のグループ化や、ステップを増減させるためのリピーター機能を含んでいます。

[
 {
  "allow_new_line": false,
  "display_width": null,
  "id": "acf72606-d674-5f90-274d-f9c9c98e6b77",
  "label": "main_title",
  "locked": false,
  "name": "main_title",
  "required": false,
  "type": "text"
 },
 {
  "children": [
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "3f2e92b0-dd50-01d2-4a95-8fb5702cc954",
    "label": "text_color",
    "locked": false,
    "name": "text_color",
    "required": false,
    "type": "color"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "e2ed5fe3-b347-78ce-c90d-2742e74c580d",
    "label": "border_color",
    "locked": false,
    "name": "border_color",
    "required": false,
    "type": "color"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "ad9d333e-9eed-5663-82c8-5ad75cedb5cf",
    "label": "border_width",
    "locked": false,
    "name": "border_width",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "1bafc3e9-47f2-b52b-004b-a4ae36be0c0b",
    "label": "base_font_size",
    "locked": false,
    "name": "base_font_size",
    "required": false,
    "step": 1,
    "type": "number"
   }
  ],
  "default": {
   "text_color": {
    "color": null,
    "opacity": null
   },
   "border_color": {
    "color": null,
    "opacity": null
   }
  },
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "8ed3eabc-3007-ad43-8ae9-b5ed3c076cc0",
  "label": "style_settings",
  "locked": false,
  "name": "style_settings",
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 },
 {
  "children": [
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "61df6f80-bb75-828e-ace3-d996467e4528",
    "label": "step_label",
    "locked": false,
    "name": "step_label",
    "required": false,
    "type": "text"
   },
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "75918939-9e65-2c0d-8a9f-eca248270ae4",
    "label": "step_number",
    "locked": false,
    "name": "step_number",
    "required": false,
    "type": "text"
   },
   {
    "default": {},
    "display_width": null,
    "icon_set": "fontawesome-5.14.0",
    "id": "f1c6fdf9-a639-f2cb-adcb-bc47aec3ca2a",
    "label": "step_icon",
    "locked": false,
    "name": "step_icon",
    "required": false,
    "type": "icon"
   },
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "e263b998-b922-2d87-a978-fac5256b8572",
    "label": "step_title",
    "locked": false,
    "name": "step_title",
    "required": false,
    "type": "text"
   },
   {
    "display_width": null,
    "id": "a085be67-2afd-839b-a162-9af69150c0f3",
    "label": "step_description",
    "locked": false,
    "name": "step_description",
    "required": false,
    "type": "richtext"
   }
  ],
  "default": [],
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "a1f6d8a3-0a35-c9fa-2a9a-079247675a8c",
  "label": "steps",
  "locked": false,
  "name": "steps",
  "occurrence": {},
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 }
]

‍

‍