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 テンプレートエンジンの基礎を学び、ページに動的データや条件分岐を組み込む方法を紹介します！