このシリーズでは、HubSpot CMS 開発者認定資格の取得を目指す方や、HubSpot 上でのウェブサイト開発に興味のある方に向けて、実践的な知識と技術をわかりやすく紹介していきます。
第1回目となる今回は、HubSpot CMS の全体像と、開発者が関わる役割、そして HubSpot CMS を使うメリットについて解説します。
HubSpot CMS とは？
HubSpot CMS（Content Management System）は、HubSpot CRM プラットフォーム上で提供される統合型ウェブサイト開発ツールです。マーケターと開発者の両方が使いやすいように設計されており、コードによるカスタマイズ性と、ノーコードでの編集の柔軟性を両立しています。
特徴：
- CRM に統合：訪問者データやフォーム送信、Eメールマーケティングの成果などとサイトが直結
- ホスティング・SSL・CDN 完備：高速・安全なインフラが標準装備
- マルチデバイス対応：レスポンシブデザインを簡単に実装
- ノーコード編集 UI：コンテンツエディターも直感的にページ更新が可能
- ローカル開発対応：CLI を使った本格的なローカル開発が可能
開発者の役割とスキルセット
HubSpot CMS 開発者は、以下のような業務やスキルに関わります。
主な開発要素
- テーマ サイトの全体設計（フォント、色、間隔、テンプレート構成など）を定義
- テンプレート 各ページのレイアウト（トップページ、ブログ記事、ランディングページなど）
- モジュール ユーザーがページにドラッグ&ドロップで配置できる、再利用可能なUIコンポーネント
- HubL HubSpot 独自のテンプレートエンジン。HTMLに似た構文で、動的な要素を実装可能
開発に使うツール
- HubSpot CMS CLI（ローカル環境との連携）
- Git（バージョン管理）
- VS Code などのエディター
- HubSpot 開発者アカウント（無料アカウントで開発可能）
テーマ構成の概要
HubSpot のテーマは、以下のようなディレクトリ構成で作成されます：
my-theme/
├── templates/
│ ├── blog.html
│ └── landing.html
├── modules/
│ └── custom-button.module
├── fields.json
├── theme.json
├── css/
└── images
templates/：ページテンプレート（ブログ、ランディングなど）
modules/：再利用可能な UI 部品
fields.json：テーマエディターで編集可能なフィールドの定義
theme.json：テーマのメタ情報（名前、ラベルなど）
これらは CLI を使ってローカルで管理・デプロイできます。
なぜ HubSpot CMS を使うべきか？
HubSpot CMS は、他の CMS（WordPress、Wix、Squarespace 等）と比べて、マーケティング主導の企業向けに最適化されています。以下のような強みがあります：
マーケティングオートメーションとの連携
- フォーム送信 ➝ 自動メール配信
- ページ閲覧履歴 ➝ ダイナミックコンテンツの出し分け
- AB テスト ➝ コンバージョン率の改善
保守・管理の簡便さ
- プラグイン管理が不要
- セキュリティパッチも自動
- コードは Git 管理も可能
開発者にとっての利点
- 独自言語 HubL による柔軟なカスタマイズ
- JavaScript, SCSS, JSON をサポート
- モジュールベース開発で再利用性が高い
このシリーズで学べること
この連載では、以下のような内容を順に取り上げていきます：
- HubSpot CMS CLI を使ったローカル開発
- HubSpot テーマの構成と作成方法
- HubL の基本構文と使い方
- カスタムモジュールの作り方
- ブログテンプレートや動的フィールドの実装
- テンプレートの条件分岐、ループ、CRM 情報の埋め込み
- CMS 開発ベストプラクティスと SEO 最適化
まとめ
HubSpot CMS は、単なる CMS ではなく、「マーケティング戦略と開発を一体化できる」強力なプラットフォームです。企業の成長をサポートするためのツールがすでに用意されているため、開発者は価値ある体験をスムーズに構築することができます。
次回は、**「テーマの構造と作成方法」**について詳しく解説します。