HubSpotのCMSの概要

ここでは優れたウェブサイトの構築に向けて、HubSpotのコンテンツ マネジメント システム(CMS)における開発の主なポイントを紹介します。CMS Hubを最大限に活用するには、HTML、JavaScript、CSSなどのウェブ開発の基本に関する専門知識が求められます。

CMS Hubを初めて使用する場合は、クイック スタート チュートリアルを読んでから、必要に応じてこの項に戻ることをお進めします。

HubSpotのCMSの仕組み

CMS Hubは、マーケティング業務に役立つことを重点目標として、企業がウェブでのプレゼンスを向上できるよう設計された、SaaS(Software-as-a-Service)CMSです。開発者が設定したデザイン、スタイル、機能のガイドラインに従うことで、技術的な知識がなくても制作担当者が自力でウェブサイトのコンテンツを作成、評価、改良できることを目指して設計されています。HubSpot CRMには、コンテンツ、リード(見込み客)の情報収集機能、アナリティクスも統合されていて、マーケティング担当者が簡単にパーソナライズされた体験を創出し、その体験をビジネス全体に活用できるように構築されています。

CMS Hubにおける開発者の主な役目は、制作担当者としてではなく、コンテンツイネーブラーとしての役割を果たすことです。企業のウェブサイトは、そのコンテンツが最新で最適化されたときに大きな効果を発揮します。開発者はガイドラインを確立しながら、可能な限り制作業務の摩擦を取り除く必要もあります。HubSpot CMSでは、モジュールシステム、フレキシブルカラム、ドラッグ&ドロップエリアによって、開発者のニーズと制作担当者のニーズのバランスが確保されます。つまり、開発者にとっては、コピーによる更新といった煩わしい作業が少なくなり、制作担当者にとっての利便性も高められます。

テンプレートとモジュールは、開発者とマーケティング担当者の両方が使用する

こうした主な概念と基本要素に関する理念はシステムに反映されています。つまり、適切なCMS Hubサイトは、制作担当者とのコラボレーションを通じて制作担当者のニーズを理解し、開発者の継続的なサポートとメンテナンスの必要性も軽減するという考え方です。CMS Hubでの開発作業中は、制作担当者にページがどのように表示されるか、制作担当者にとってどのような操作感であるか、継続的なプレビューを行ってください。こうした取り組みが、可能な限りコンテンツ作成者が自力で作業できるサイトの実現につながります。

ユーザーがドラッグ&ドロップページを作成する様子を示すアニメーション

CMSのホスティングとメンテナンスはHubSpotによって行われるため、開発者はプラグインの管理、更新、ホスティング、スケーリング、セキュリティーについて心配する必要はありません。ただしトレードオフとして、開発者が自身でCMSをホスティングする場合よりも制約があります。例えば、システムの基本要素を手作業で、またはプラグインを使用して変更したり拡張したりすることはできません。また、レンダリングの詳細を操作すること、データベースのコンテンツに直接アクセスして変更することもできません。

開発者が作成するコンテンツ(テーマテンプレートモジュール、JavaScript、CSSなど)は、デベロッパー ファイル システム内に保存されます。一方、ページコンテンツ(ページ、ブログ記事)は強力なブロックベースのWYSIWYGエディター内で設計、作成されたメディアファイル(制作担当者が作成した画像、PDFなど)はウェブアプリベースのファイルマネージャーに保存されます。

ページのレンダリング時に、HubSpotはドメインに応じて多数のHubSpotサーバーのうちの1つにリクエストをルーティングし、そのサーバー上でページをレンダリングして、可能な場合はそのページをコンテンツ配信ネットワーク(CDN)にキャッシュします。

ウェブサイトページ、ランディングページ、ブログ、Eメール

CMS Hubを使用してマーケティング担当者が作成できるコンテンツには、さまざまなタイプがあります。コンテンツのタイプによっては、制作担当者に表示されるユーザーインターフェイス(UI)に違いがあります。その影響を開発者は認識しておく必要があります。 

テンプレートとモジュールには、以下で説明するタイプのコンテンツが1つ以上関連付けられます。開発者は、コンテンツ作成者が使用するコンテンツを特定のタイプに限定できます。

ウェブサイトページとランディングページ

ウェブサイトページとランディングページは、互いに独立して作成されます。ページはテンプレートに基づいて作成されますが、ページの変更はローカルのページに加えることも、テンプレートに加えることもできます。 

ウェブサイトページとランディングページで制作担当者が使用できる機能は、ほとんど同じです。ただし、ウェブサイトページは組織のウェブサイトの一部として情報を提供し、オーガニック検索で見つけやすく設計される一方、ランディングページは一般に特定のマーケティングオファーまたはキャンペーンに関連付けられる(例:特定のコンタクトリストに送信されるマーケティングEメールからリンクされる)点が異なります。 

マーケティング担当者向けのUIとしては、これらのタイプのページのアナリティクスと編成も独立して体系化されています。これは、ランディングページには多くの場合、特定のコンバージョン目標があるためです。

ブログ

一方、CMS Hubのブログには2つのビューがあります。1つはリストページのビュー、もう1つは個々のブログ記事のビューです。各ブログ記事はそれぞれのビューに含められます。ポータル(HubSpotの個別のインスタンスを指す用語)には複数のブログを設定できますが、個々のブログ記事に使用するテンプレートを記事ごとに指定することはできません。ブログ リスト ページとブログ記事ページに使用するテンプレートと、新しいブログを作成するためのツールは、HubSpot UIの[設定]>[ウェブサイト]>[ブログ]で定義します。

Eメール

HubSpotカスタム版(またはクラシック版)のEメールツールはCMSと同じプラットフォームをベースに作成されているため、テンプレートとモジュールをこのツールでEメールに組み込むこともできます。ドラッグ&ドロップ方式のEメールツールで作成するEメールでは、カスタムテンプレートを使用できません。

デベロッパー ファイル システム

コアアセット(テンプレート、テーマモジュール、およびこれらをサポートするJavaScript、CSSファイル、画像)は、開発者のファイルシステム内に作成されます。このファイルシステムはバックグラウンドのデータベースにマッピングされます。このファイルシステムを確認できるのは、デザインマネージャーの左側のパネル、またはローカル開発ツールを使用してローカルで同期されたフォルダー内です。ファイルシステム内では、アセットを相互に絶対パスまたは相対パスで参照可能です。

バックグラウンド処理における留意点として、これらのファイルはHubSpot上でディスクに保存されるのではなく、データベース内のエントリーにマッピングされることが挙げられます。このことから、デベロッパー ファイル システムにアクセスするには、SSHやFTPではなくHubSpot CLIツールを使用します。特定のファイルシステムに見られるような機能(アクセス権限、シンボリックリンクなど)は、デベロッパー ファイル システムには備わっていません。

これは従来のCMSのアプローチとは異なりますが、ファイルのリンク切れや構文エラーが本番ではなく公開の際に検出されるため、実際のトラフィックをウェブサイトで受け取ったときの偶発的な障害への対策としても強化になります。

制作担当者が新しいページを作成するときは、CMSがファイルシステム内のテンプレートを検出して制作担当者に提示します。したがって、ファイルシステムの構造は開発者の裁量に任されます。モジュールを/modules/フォルダー内に保管したり、JavaScriptを/js/フォルダー内に保管したりする必要はありません。ただし、CMSのボイラープレート サンプル コードと同じようにアセットを整理することをお勧めします。標準的な他の開発ツールを使用したことがあれば、アセットのレイアウトは見慣れたものに感じるでしょう。

テーマ、テンプレート、モジュール、フィールド

テーマテンプレートモジュールフィールドは、開発者がCMS Hubで最も頻繁に扱うオブジェクトです。このさまざまなオブジェクトを効果的に使用することで、開発者が設定したスタイルとレイアウトのガイドラインに従って、制作担当者が自力で自由にウェブサイトを編集し、改良を重ねられるようになります。

テーマとモジュールに含まれるフィールドには、特定のデータ型が設定されます(数値、文字列、リッチテキスト、画像など)。オブジェクトをレンダリングする際にこれらのフィールドを使用する方法、そしてWYSIWYGエディター内でのフィールドの配置と表示は、開発者が制御できます。制作担当者がWYSIWYGエディターでフィールドの値を設定すると、レンダリング時にそれらの値がテーマまたはモジュールに適用されます。

テーマ

他のCMSを操作した経験がある場合、テーマの基礎は見慣れたものに感じられるはずです。テーマは、ウェブサイトの外観と操作感を定義してマーケティング担当者に快適なコンテンツ編集環境を提供するための最上位のオブジェクトです。テーマには、テンプレート、モジュール、CSSファイル、JavaScriptファイル、画像などを組み込むことができます。

テーマを使用することで、開発者は一連のフィールドを作成して、制作担当者がCSSを編集しなくても全体のスタイルを制御できるようにすることができます。CSSファイル内で、制御の適用対象を指定し、他の制御を継承するように設定したり、マーケティング担当者に対してテーマエディターで表示、配置する方法を管理したりできます。制作担当者はテーマエディターを使用して、テーマフィールドの値を変更し、テーマに含まれる既存のテンプレートに対する変更をプレビューしてから、その変更を公開します。

これらのテーマフィールドは、サイト全体でグローバルに設定することも、ページレベルでオーバーライドすることもできます。

テーマエディター

テンプレート

テンプレートは、ページで使用する、基礎となるマークアップとスタイルを定義します。テンプレートを使用するページには、そのテンプレートで定義されたマークアップとスタイルが適用されます。テンプレートには任意のHubL、HTML、JavaScriptファイルとCSSファイルへのリンクを含めることができます。また、特定のタイプのコンテンツで使用されるようにテンプレートを限定することもできます。テンプレートに含めるマークアップとスタイルは完全に開発者の自由裁量に委ねられますが、マーケティング担当者が簡単にページを編集できるよう、いくつかのベストプラクティスに従ってCMSの主要な機能を使用することをお勧めします。

テンプレートを作成するときは、そのテンプレートを基にページを作成する人の作業性を念頭に置いてください。テンプレートを使うのは、社内の同僚、取引先の顧客、あるいはあなた自身かもしれません。いずれにしても、簡単かつ直感的に編集できるようにしてください。

次に例を示します。

  • テーマの一部としてテンプレートを作成し、テーマレベルのCSS(テーマフィールドを含む)を使用して、スタイル設定の大部分をテンプレート内で行えるようにします。こうすると、制作担当者がCSSを編集しなくても、グローバルおよびローカルのスタイルの一貫性を確保しながら変更できるようになります。
  • ページ上のコンポーネントの大半にモジュール(次のセクションで詳細を説明します)を使用して、ウェブサイト全体でモジュールを再編成および再利用できるようにします。
  • サイト内のページをはじめ、主要なページコンテンツにはできるだけドラッグ&ドロップエリアを使用するようにします。ドラッグ&ドロップエリアを使用すると、ページを構成するモジュールの既定のレイアウトを設定する一方で、マーケティング担当者が柔軟に独自のレイアウトとスタイルを編集できます。
  • ウェブサイト全体に一貫して表示するヘッダーやフッターなどの共有コンテンツを含めるには、グローバルパーシャルを使用します。

テンプレートを作成するには、HTML+HubLを使用することも、デザインマネージャー内の ドラッグ&ドロップ方式のインターフェイスを使用することもできます。新しいプロジェクトを開始する際は、コードテンプレートを使用することをお勧めします。コードテンプレートでは開発者がより多くのワークフローオプションを使用できると同時に、ドラッグ&ドロップエリアがサポートされます。

HTML+HubLテンプレートが開いているVS Code

モジュール

モジュールは、CMS Hubのテンプレートやページに配置できる、再利用可能なコンポーネントです。モジュールにはマーケティング担当者用のコントロールを組み込み、ウェブサイトの再利用可能かつ編集可能なコンポーネントを作成するために連動するHubL/HTMLマークアップ、CSS、JavaScriptを追加します。

モジュールのコントロールはフィールドで定義されます。したがって、優れたモジュールを作成するには、ページ上での表示とコンテンツ編集者の作業性の両方を考慮する必要があります。

CMS Hubには、ヘッダー、リッチテキスト、画像、ボタン、CTAなどの一般的な既定のモジュールが用意されています。これらのモジュールを基本的なコンポーネントとして使用する一方で、要素をゼロから作成して、テーマとテンプレートに合った、より特徴的なレイアウトを設定することもできます。例えば、アコーディオン、スライダー、タブなどのモジュールを作成できます。

エディターでのモジュールフォーム

モジュールはオブジェクトであり、ページ上のモジュールはそのオブジェクトのインスタンスであると見なせます。つまり、モジュールに含まれるHubL、CSS、またはJavaScriptに加えた変更は、所定のポータル内のページまたはテンプレートに含まれる、そのモジュールの全てのインスタンスに適用されます。モジュールはポータル間で移植することもできます。デザインマネージャーに組み込まれているコピーツールを使用する、マーケットプレイスで販売する、ローカル開発ツールで直接コードを共有するといった場合も、移植可能です。つまり、デザインソリューションを一度実装すれば、複数のページやポータルでそのソリューションを使用できます。さらに、ソリューションの更新が必要になったら、複数のページや複数のテンプレートを編集しなくても、ソリューションの変更を全てのページに適用できます。

テーマにもモジュールを組み込むことができます。この場合、テーマフィールドを使用してモジュールの外観を操作し、制作担当者が優れた外観のモジュールに簡単にアクセスできるよう、ページエディター内で目立たせることもできます。

詳しくは、モジュールシステムの概要を参照してください。

フィールド

フィールドは、制作担当者がテーマやモジュールに渡されるパラメーターを調整するために使用するコントロールです。フィールドには型があります。型にはブール、テキスト、URL、選択肢、ファイルなどのシンプルなものもあれば、スタイル設定されたフォントといった複雑なフィールドもあります。また、コンテンツの別の部分へのリンクやHubSpotシステム内のフォームへのリンクなど、HubSpot固有のフィールドも使用できます。

モジュールに配列を渡すリピーター内にフィールドを配置することもできます。例えば、画像カルーセルに、「alt」テキストが関連付けられた一連の画像を渡す必要があるとします。この場合、多数の画像フィールドとテキストフィールドを作成する代わりに、画像フィールドとテキストフィールドをそれぞれ1つ作成して、繰り返しグループ内に配置できます。

モジュールのフィールドは、デザインマネージャー内で指定するか、fields.jsonファイル内でこの構文を使用して指定します。テーマのフィールドは、fields.jsonファイル内のテーマのルートに指定する必要があります。

CMS Hub内の他のオブジェクトと同様に、モジュールまたはテーマのフィールドを作成するときは、編集の作業性も考慮してください。例えば、編集しやすいように、フィールドグループを使用して明確な階層にします。

HubL言語

HubSpotのCMSではHubSpot Markup Language、略してHubL(「ハブル」と発音)を使用します。HubLは、JinjavaというJinjaベースのテンプレートエンジンをHubSpotが拡張した言語です。HubLは数多くのHubSpot固有のマークアップを採用しています。また、Jinjaの機能のうちサポートされない機能もあります。ページのレンダリング時に、HubLは一貫してサーバーサイドで実行されます。

HubLでは、シンプルなテンプレート作成言語で使用する変数forループif文などの機能を使用できるだけでなく、複雑なマクロのレンダリング、データフェッチ、およびタグ関数フィルターのマッピングもサポートしています。 

とはいえ、HubLはプログラミング言語ではありません。WordPressのようなCMSでは、テンプレートとバックエンドロジックの境界線がある程度曖昧にされています。この曖昧さが、幅広いテンプレート作成手法を可能にしています。こうした柔軟性にはプラスとマイナスの両た面がありますが、この点に関してここでは詳しく説明しません。概して、CMS Hubにはより厳しい規定があります。HubLで可能なことの限界に達したときは、HubSpotに備わっているAPIでよりカスタマイズされたソリューションを作ることもできます。CMS Hub Enterpriseアカウントではサーバーレス関数を使用して、高度なサーバーサイドプログラミングを行うことができます。 

CMS Hub上での開発中に特定の言語機能について詳細を調べるには、HubL言語リファレンスをご覧ください。


参考になりましたか? *
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。