デザインマネージャー

デザインマネージャーは、HubSpotサイトのテンプレート・モジュール・CSS/JS・ファイルを一括管理・編集するための開発／デザイン用ツールです。

ページ編集側（コンテンツエディター）の「裏側」を作る場所、というイメージです。

デザインマネージャーに含まれている機能

デザインマネージャーには主に次が含まれます。

  • ファインダー
    テンプレート・モジュール・CSS/JS・フォルダの管理

  • レイアウトエディター
    ドラッグ＆ドロップでページ／ブログ／Eメール用テンプレートを組み立て

  • コードエディター
    HTML＋HubL、CSS、JavaScript を書くIDE

  • モジュールエディター
    再利用可能なカスタムモジュールを作成

  • ファイルマネージャー
    画像やPDFなどのアセット管理


設定理由 

各項目を設定する理由は、以下のとおりです。

  • テーマ：ページ全体の一貫性あるデザイン適用のため
  • テンプレートファイル：各ページ構成を定義し、再利用性を高めるため
  • JSONファイル：マーケティング担当者がGUI上で項目を編集可能にするため
  • CSSファイル：ブランドカラーやデザインの一貫性維持のため
  • HubDBテンプレート：データをWebページ上に動的表示するため
  • フォントファイル：表示の崩れを防ぎ、デザイン性を保つため

設定項目

  1. テーマフォルダ：デザイン全体のベース
  2. テンプレートファイル：ページ単位のレイアウト構造を定義
  3. テーマ設定ファイル：
    1.  theme.json（テーマの基本情報）
    2. fields.json（テーマフィールド定義）
  4. CSSファイル：デザインスタイルを統一するためのファイル
  5. HubDB対応テンプレート：動的なデータをHubDBから取得する場合に使用
  6. フォントファイルや外部アセット

設定方法

  1. 左のサイドメニューで、 [コンテンツ] > [デザインマネージャー] をクリックする