HubSpot CMS 開発シリーズの第2回では、HubSpot の「テーマ」について詳しく解説します。テーマはサイトのデザインや構造をコントロールする最上位の単位で、開発者が最初に作成すべき重要なパーツです。

テーマとは？

HubSpot におけるテーマは、テンプレート・モジュール・スタイル・構成ファイルなどを一つにまとめたフォルダー構造で、ウェブサイト全体のビジュアルと機能を統一的に管理します。

テーマの主な目的

ページやブログのテンプレートを再利用できるようにする
カスタムモジュールを一元管理する
スタイルガイドやデザインシステムに基づいた開発を可能にする
編集者が視覚的にデザイン調整できるようにする（テーマフィールド）

テーマの構成例

以下が典型的なテーマフォルダー構成です：

my-theme/
├── templates/           # テンプレート（HTML）
│   ├── layout.html
│   └── blog.html
├── modules/             # 再利用可能なモジュール
│   └── hero-banner.module
├── css/                 # スタイル（CSS or SCSS）
│   └── styles.css
├── images/              # 画像
│   └── logo.png
├── theme.json           # テーマの基本情報
├── fields.json          # 編集可能なフィールドの定義
└── preview.png          # テーマのプレビュー画像

theme.json と fields.json はテーマの中心ファイルです。CLI やマーケットプレイスでのインポートに必要です。

各ファイルの説明

theme.json テーマのメタデータ（名前、説明、バージョンなど）
fields.json エディター向けの調整可能な色・フォントなどの設定項目
templates/ 各ページのベース構造（トップページ、ブログ、LPなど）
modules/ Hero セクション、CTA、画像ギャラリーなど再利用可能部品
css/ 共通スタイルシート
preview.png テーマ一覧で表示されるプレビュー画像

theme.json の例

{
  "label": "My Custom Theme",
  "screenshot_path": "preview.png",
  "author": {
    "name": "Trieu Cuong",
    "email": "you@example.com"
  }
}

fields.json の例

[
  {
    "name": "primary_color",
    "label": "Primary Color",
    "type": "color",
    "default": "#FF6600"
  },
  {
    "name": "font_family",
    "label": "Font Family",
    "type": "font",
    "default": {
      "font": "Arial",
      "fallback": "sans-serif"
    }
  }
]

これにより、HubSpot の UI 上で編集者が色やフォントを自由に変更できるようになります！

CLI を使ってテーマを作成する

hs create theme my-theme
cd my-theme

これにより、ベース構造が自動生成され、すぐに開発に取りかかることができます。

テーマをテストする方法

テーマをアップロード：

hs upload my-theme my-theme

HubSpot ポータルにログインし、デザインマネージャーでテーマを確認
新しいページ作成画面でテーマが選べるか確認

ベストプラクティス

命名規則：テーマ名、テンプレート名、モジュール名に意味のある英語を使用する（例：hero-banner）
再利用性を意識：各モジュールは他のテンプレートでも使えるように汎用性を意識
UI フィールド設計：編集者にとって分かりやすい名前・説明を付ける

まとめ

HubSpot のテーマは、単なるテンプレート集ではなく、サイトのブランド体験と運用の効率性を支える土台です。

次回は、HubL テンプレートエンジンの基礎を学び、ページに動的データや条件分岐を組み込む方法を紹介します！