デザインマネージャーは、HubSpotサイトのテンプレート・モジュール・CSS/JS・ファイルを一括管理・編集するための開発／デザイン用ツールです。
ページ編集側（コンテンツエディター）の「裏側」を作る場所、というイメージです。
デザインマネージャーに含まれている機能
デザインマネージャーには主に次が含まれます。
-
ファインダー
テンプレート・モジュール・CSS/JS・フォルダの管理
-
レイアウトエディター
ドラッグ＆ドロップでページ／ブログ／Eメール用テンプレートを組み立て
-
コードエディター
HTML＋HubL、CSS、JavaScript を書くIDE
-
モジュールエディター
再利用可能なカスタムモジュールを作成
-
ファイルマネージャー
画像やPDFなどのアセット管理
設定理由
各項目を設定する理由は、以下のとおりです。
- テーマ：ページ全体の一貫性あるデザイン適用のため
- テンプレートファイル：各ページ構成を定義し、再利用性を高めるため
- JSONファイル：マーケティング担当者がGUI上で項目を編集可能にするため
- CSSファイル：ブランドカラーやデザインの一貫性維持のため
- HubDBテンプレート：データをWebページ上に動的表示するため
- フォントファイル：表示の崩れを防ぎ、デザイン性を保つため
設定項目
- テーマフォルダ：デザイン全体のベース
- テンプレートファイル：ページ単位のレイアウト構造を定義
- テーマ設定ファイル：
- theme.json（テーマの基本情報）
- fields.json（テーマフィールド定義）
- CSSファイル：デザインスタイルを統一するためのファイル
- HubDB対応テンプレート：動的なデータをHubDBから取得する場合に使用
- フォントファイルや外部アセット
設定方法
- 左のサイドメニューで、 [コンテンツ] > [デザインマネージャー] をクリックする
- デザインマネージャー画面が開いたら、左側にあるフォルダ構成とファイルリストから、既存テーマや既存テンプレートを選択し編集する
- 新規で作成したい場合は、画面右上の [新規ファイルを作成] をクリックし、新しいテンプレート・モジュール・CSSなどを作成する
- 作成したいファイルを選択する
以下より選択可能です
・テンプレート
・HTML+HubL
・ドラッグ&ドロップ
・コンポーネント
・モジュール
・ファイル
・CSS+HubL
・JavaScript
・Markdown
・GraphQL
- ファイル編集画面で、コード（HTML/CSS/JS）、テーマフィールド（fields.json）などを編集する
- [プレビュー] をクリックし、デザインを確認する
- [公開] または [変更を公開] をクリックして公開する
参照元
HubSpotナレッジベース｜デザインマネージャーのクイックツアー
HubSpotナレッジベース｜HubDBテーブルの作成と入力
HubSpot 開発者ドキュメント｜モジュールとテーマのフィールドの概要