HubSpotが提供しているContent Hubは、ウェブサイト・ウェブページの作成と、パーソナライズやデバイスごとのコンバージョン最適化など、多彩な機能を持つコンテンツ管理システムです。
Content HubをはじめとするCMSは、コーポレートサイトの構築からコンテンツの作成・管理・効果測定までを包括的に行えるツールであり、多くの企業が導入しています。
サイトコア株式会社の調査によると、アンケートに回答した企業のうちの約6割がCMSを導入済みであるものの、効果的な活用方法について課題を抱えていることがわかっています。
例えば、広報担当者は「企業情報の不足」を、営業・マーケティング担当者は「コンテンツごとの効果測定」や「製品情報の不足」を主な課題と感じているようです。
しかし、このように多くの企業がCMSを十分に活用できていない状況は、逆にチャンスとも捉えられます。CMSの使い方を十分に理解し活用することで、コーポレートサイトやオウンドメディア運用の効果を高められるでしょう。
本記事では、HubSpot Content Hubの使い方と設定・作成方法を徹底解説します。充実した機能を十分に活用するために理解しておきたい、テンプレート、テーマ、モジュールの基礎についても触れていますので参考にしてください。
HubSpot CMSの使い方の説明に移る前に、その概要と基礎を確認しておきましょう。
HubSpot社が運営している「HubSpot」とは、マーケティング、営業、コンテンツ管理、カスタマーサービスを統合するCRMプラットフォームです。
主要なソリューションとして、CRM（顧客関係管理）、MA（マーケティングオートメーション）、SFA（営業支援システム）、CMS（コンテンツ管理システム）などのツールが提供されています。
2023年11月時点で、世界120カ国以上で18万4,000社以上がHubSpotの製品を利用しています。
出典：HubSpot
Content HubはHubSpot製品の一つであり、月額定額制のCMS（コンテンツ管理システム）の機能を搭載しています。
基本の機能として、ウェブサイトの構築・管理、デザイン、SEO対策、コンテンツ作成・編集、セキュリティ対策が含まれます。コーディングなど専門知識がなくても、直感的な操作でコーポレートサイトやブログ、ランディングページ（LP）を構築・管理できます。
Content Hubの強みは、ウェブ解析機能やマーケティングツール、HubSpot CRMツールとの連携が可能なことにより、コンテンツのパーソナライズやキャンペーンの自動化まで対応できる点です。
≪関連記事≫
・【新機能解説】HubSpot Content Hubとは？CMSとコンテンツマーケティングの機能を解説
Content Hubの他に、代表的なCMSとしてWordPressがあげられますが、両者の違いはサービスの提供形態にあります。
Content HubはSaaSの形態です。SaaSとは、クラウドベースで必要な機能を必要な範囲でサービスとして提供するソフトウェア、またはその提供方法を意味します。
WordPressはオープンソースの形態です。オープンソースは、ソフトウェアの構成要素である「ソースコード」を無料で一般に公開する概念です。
CMS Hubは有料ですが、その分CMSで効果をあげるために必要な機能が初期搭載されています。また、使いやすさやサポートの充実度も利点です。CMS Hubの無料版は存在していますが、利用機能は大きく制限されてしまいます。使い勝手を確かめるためにまずは無料版から初めてみるのも良いでしょう。
WordPressは無料でカスタマイズ性に優れている一方で、サーバーやドメインは利用者側が用意・設定する必要があり、ウェブサイト構築やカスタマイズに関して、ある程度の専門知識が求められます。
CMS初心者から成果を重視する大規模サイトまで担えるのがCMS Hubであり、技術や知識があれば制限なく高品質なサイトを目指せるのがWordPressと考えると、イメージしやすいでしょう。
≪関連記事≫
・HubSpotとWordPressの違いを比較！連携するメリット・手順・フォームの埋め込み方法を解説
HubSpot Content HubのCMS機能の使い方を理解する上で、テーマ、テンプレート、モジュールについて把握しておく必要があります。
ここではそれぞれの説明と、WordPressなど一般的なCMSにおけるテーマ、テンプレート、モジュールとの違いについても解説します。
Content Hubには「テーマ」と呼ばれる、ウェブサイト全体のデザインを変更・調整するためにまとめられたファイルが用意されています。
テーマには、「テンプレート」「モジュール」「CSS・JSON・JavaScript・PHPファイル」などがパッケージングされています。
WordPressをはじめとするCMSでも、基本的にはテーマが提供されています。
2024年4月時点では、Content Hubのテンプレートマーケットプレイスで506個、WordPress.orgでは12,100個の無料テーマが公開・提供されています。
テーマに含まれるテンプレートとは、ページのレイアウトや機能を管理するファイルです。
例えば、Content Hubでは以下のようなテンプレートが提供されています。
テンプレートのコンテンツやレイアウトは、エディターで簡単にカスタマイズできます。
WordPressでも同様に、テーマ内のデザインの型はテンプレートと呼ばれ、以下のテンプレートがあります。
モジュールは端的にいうと、テンプレートやページに追加できる、再利用可能な構成要素を指します。HubSpotが提供するモジュールを使用できるだけでな、開発者は独自のモジュールを作成し利用していくことが可能です。
引用：モジュールシステムの概要
また、モジュールはテンプレート内の構成要素であり、テキスト・画像・フォームなどさまざまな形の再利用可能なコンテンツブロックともいえます。
テンプレートはモジュールが組み込まれた状態で提供されており、必要に応じてモジュールを編集・削除・追加してページを完成させることが可能です。
異なる設定で再利用する場合は、モジュールIDを使用してソースコードを簡単にコピー＆ペーストできます。
WordPressでは、ブロックエディターのブロックや、「外観 ＞ メニュー」の機能・動作にあたるものがモジュールと考えるとイメージしやすいでしょう。
Content Hubでは、最初に設定したテーマをもとにテンプレートの編集などを行っていきます。
HubSpotテーマを設定する方法は、次の4種類です。
それぞれの設定方法と特徴を解説しますので、自社での設定方法を検討する際の参考にしてみてください。
HubSpotには、ウェブサイトに必要な基本の要素が組みこまれた既定テーマが用意されています。細かい修正やカスタマイズを行わずとも、ホームページなどのウェブサイトを構築できるため、開発の知識や人員・時間のリソースが限られている場合におすすめです。
既定テーマの使い方は、はじめにHubSpotアカウントにログインし、画面上部メニューの「マーケティング」→「ウェブサイト」→「ウェブサイトページ」の順にクリックします。
画面右上の「作成」→「ウェブサイトページ」の順に進み、ページ名をつけて「ページを作成」をクリックします。
「テーマ」のドロップダウンリスト（プルダウン）から、テーマを変更できます。初期設定のテーマを使用する場合は、そのままテンプレートの選択に移ります。
なお、Content Hubの料金プランとして無料版と有料版（Starter／Professional／Enterprise）があり、Starterアカウントの場合は、Growthテーマのみが利用可能です。
HubSpotには「アセットマーケットプレイス」という、テーマ・テンプレート・モジュールの提供・販売がオンライン上で行われている、販売サイトがあります。
無料から有料まで取り扱われており、気に入ったものを見つけて即時利用することが可能です。
アセットマーケットプレイスへは、HubSpotのダッシュボードの右上のメニューにある「ショップアイコン」からアクセスできます。
または直接、アセットマーケットプレイスへアクセスしましょう。
アセットマーケットプレイスでは、以下のキーワードでテーマやテンプレートを絞り込み検索できます。
必要なテーマやテンプレートを、無料インストールまたは購入して利用しましょう。
Content Hubアカウントのユーザーは、EnvatoのThemeForest MarketplaceにてHubSpotのテーマを購入し、テーマ選択画面から直接HubSpotにアップロードすることが可能です。Envatoとは、動画・音楽・画像・WordPressテーマなどのデジタル素材を無制限でダウンロードできるサブスクリプション（定額）型のサービスです。
2023年11月時点では、232個のテーマが公開されています。1テーマあたりの価格は、19ドル～100ドル（2023年11月時点の為替レートで約2,880～15,170円）ほどです。
ThemeForestからテーマをインストールし、設定する方法は以下の通りです。
はじめに、ThemeForest Marketplaceの「HubSpot CMS Hub」ページに移動し、必要なテーマを購入します。
テーマの購入コードが含まれたEメールを受信できたら、そのコードをコピーしましょう。
次に、HubSpotアカウントでウェブサイトページやランディングページを開き、新しいページを作成します。
作成したページでテーマを変更し、ThemeForestからテーマをインストールしましょう。
購入コードを貼り付けてテーマをインストールし、ThemeForest Marketplaceにログインして処理を完了させます。この時、HubSpotにテーマが利用可能になるまで数分かかる場合もあります。
Content Hubアカウントでは、ゼロから要素を作成し、テーマやテンプレートに適した独自のレイアウトを設定することができます。ここでは、いくつかの方法をご紹介します。
HubSpotダッシュボードにて、「マーケティング」→「デザインツール」の順に進みます。
左のサイドバーで「ファイル」→「新しいテーマ］を選択します。
「テーマの開始点」として「空のテーマ」を指定し、テーマの名前（ラベル）を入力して「作成」ボタンをクリックします。
完全にゼロからテーマを作成するのではなく、ベースとなるテンプレートやHubSpotの既定テーマを基に、子テーマを作成することも可能です。子テーマとは、親テーマの一部の設定を上書きして作成されるテーマです。
HubSpotで子テーマを作成するには、ダッシュボードで、「マーケティング」→「ファイルとテンプレート」→「デザインツール」を選択します。
左のサイドバーで、@hubspotフォルダー内のHubSpotの既定テーマを右クリックし、「子テーマに複製」を選択します。
子テーマの名前を入力したうえでテーマの場所を選択し、「子テーマを作成」をクリックします。作成が成功すると、「～theme child」という名称のフォルダが表示されるはずです。
フォルダ内のテンプレートやCSSファイルを編集することで、子テーマに反映されます。この時、各フォルダやファイルの名前もカスタマイズできます。
テーマやテンプレートの他に、アコーディオン、スライダー、タブなどのエフェクトや表現を実行するためのモジュールも作成できます。
モジュールの作成方法は、ダッシュボードで「マーケティング」→「デザインツール」→「新規ファイルを作成」を選択します。
テンプレート・モジュール・ファイルから作成する種類を選び、「次へ」をクリックします。
セットアップを行い、ファイル名を決めて「作成」をクリックします。
エディター画面が表示されます。作成した内容はプレビューで確認し、「変更を公開」でページへ反映されます。
モジュールを作成するには、HTML、CSS、HubL（HubSpot固有のマークアップ言語）の知識に加え、HubSpotデザインマネージャーについても理解しておく必要があります。
CMS Hubで、ゼロからコーディングを伴うモジュールを作成する場合は、プログラマーやデザイナーと協力して作業することがおすすめです。
こちらのHubSpot公式ページも参考にすると良いでしょう。
いずれかの方法でテーマを設定したら、実際にウェブサイトページを作成していきましょう。ここでは、作成から公開する方法まで解説します。
なお、作成にはHubSpotアカウントが必要です。無料版でも基本のCMS機能を利用できるため、使用感を試したい場合は、無料版から申込みをすると良いでしょう。
最初に、新しい基本ページを作成してみましょう。
HubSpotアカウントへアクセスし、上部メニューの「マーケティング」→「ウェブサイト」→「ウェブサイトページ」へ進みます。
右上の「作成」→「ウェブサイトページ」を選択します。
ページ名を入力し、「ページを作成」します。ページ名はあとから変更可能です。
次に、テンプレートを選択します。Content Hubの無料版（Starter）アカウントでは、Growthテーマに含まれる8つのテンプレートが使用可能です。有料版（Professional／Enterprise）以上のアカウントでは、493個（2023年11月時点）のテンプレートへアクセスできます。
作成するサイトのイメージに合わせて選定し、「テンプレートを選択」をクリックしましょう。テンプレートを選択すると、自動でエディター画面（コンテンツエディター）に移動します。
エディター画面で画像やテキストなどの編集したい箇所を選択すると、画面左側に各種編集項目が表示されます。
また、各種要素はドラッグアンドドロップで移動・編集することが可能です。
画面左側のツールバーのアイコンでは、以下を編集できます。
①メニューバー表示：「モジュール」「セクション」「レイアウト」から編集したい要素を選択できる
②ページのコンテンツを階層で表示
③SEO（検索エンジン最適化）の設定：タイトル、メタディスクリプション、ヘッダー、画像、リンク、モバイル対応、クロールとインデックス登録の各設定に対応
④A/Bテスト・適応型テスト（※Professional以上で利用可能）
⑤サイトナビゲーター：編集履歴を確認できる
⑥デスクトップとスマホのビューの切り替え
画面上部のメニューバーの「設定」から、下記のページ設定を行いましょう。
それぞれの詳細は以下の通りです。
【全般】
ページ名とはページの公開名であり、ブラウザのタイトルバーや検索結果に表示されます。ページURLは、ドメインの後の部分（コンテンツスラッグ）です。
メタディスクリプションは100〜120文字程度の記事概要のことで、検索エンジンの検索結果のスニペット（説明文）として表示されます。設定しない場合でも、検索エンジンが自動で本文内容をピックアップすることもありますが、適切に設定することで、検索エンジンのトラフィックをページへ誘導する役割を果たします。
【キービジュアル】
キービジュアルは、ソーシャルメディアでページを共有する際に表示される画像です。
スイッチをオンに切り替え、有効化しましょう。
画像をアップロードするか、「画像を参照」をクリックし、ファイルツールから画像を選択しましょう。
キービジュアルの設定では、画像のアクセシビリティを向上させるために、「画像のaltテキスト」欄に画像の説明を入力することをおすすめします。
【テンプレート】
現在選択しているテンプレートと異なるテンプレートを選択するには、「別のテンプレートを使用」をクリックします。
ただし、既存ページのテンプレートを変更する場合は、テンプレートの変更時にデータが失われるリスクを回避するために、「更新」→「今すぐ更新」をクリックし、一度未公開へ変更することを忘れずに行うようにしてください。
テーマやテンプレートを選択し、表示をプレビューしたら、「テンプレートを使用」を選択して変更を確定、または「戻る」をクリックして別のテンプレートを選択しましょう。
【言語】
ページ言語を設定するには、ダイアログボックスで左のサイドバーメニューの「言語」をクリックし、「ページ言語」ドロップダウンメニューから言語を選択します。
多言語ページの管理については、公式ページ「複数の言語でページを作成する」の詳細をご確認ください。
【詳細】
詳細の項目では、以下を設定できます。
<head>タグ内と、</body>タグの直前に挿入されるフッターHTMLへ、HTMLスニペット、埋め込みコード、トラッキングJavaScriptなどを追記・編集できます。
また、独自のcanonical URLも追加できます。canonicalは、「同じ」または「非常に似た」ページが存在する場合に、検索エンジンに正規のURL（代表となるページ）を示すためのタグです。
作成したページの公開は、右上の「公開」をクリックして即時公開するか、スケジュールして後で公開することができます。
すぐに公開する場合は「公開」→「今すぐ公開」を選択しましょう。
後でスケジュールする場合は「公開」→「公開オプション」→「公開を予定としてスケジュール」を選択して日時を設定します。
また、特定の時期に自動的に非公開にする場合は、「公開オプション」→「公開終了スケジュールを設定」を選択して終了日時を指定することも可能です。
すでにウェブサイトを運用中の方向けに、既存のウェブサイトをContent Hubに移行する方法を3パターンご紹介します。
HubSpot社ではウェブサイト移行サービスも提供しており、利用することで移行のサポートを受けられます。
移行先のテーマは、マーケットプレイスのテーマ、規定のテーマ、または移行支援チームが構築したテーマから選択できます。
専任の移行支援担当者による、外観や動作の再現や、新しいテーマでのデザインリニューアルにも対応しているため、移行のタイミングでサイトのリニューアルも検討している方におすすめです。
【移行サービスの条件】
HubSpotではパートナープログラムも用意されており、専門知識を持つソリューションパートナーに支援を依頼することが可能です。HubSpotパートナーへ依頼するメリットは、自社の要望に合わせて細かくカスタマイズされたサービスの提供です。
選定する上で重要なので、パートナー企業が今までにContent Hubの実績が豊富にあるのかを確認することです。現在日本においてHubSpotのパートナー企業は、2024年1月時点で157社存在していますが、それぞれのパートナが自社が得意とする領域があります。依頼をする前に必ず質問する場を設け、確認しましょう。
ウェブサイトの移行から運用戦略の構築まで、一連のサポートが必要な場合は、HubSpotに精通したパートナーへ依頼することも検討してみてください。
社内にエンジニアが在籍している場合は、自社での移行も可能です。ただし、基本のコーディング知識だけでなく、HubSpot CMSで使用されるHubL言語の理解も必要です。
社内移行の際のリスクやデメリットとして、専門知識の不足によるエラーや予期せぬ問題、作業時間の増加、セキュリティの懸念などがあげられます。
移行作業には高度な専門知識が求められるため、スムーズで安全な移行の実現に向けて、必要に応じて外部の専門家へ相談することをおすすめします。
Content Hubは、HubSpot社が提供するコンテンツ管理システムです。コーポレートサイトの構築からコンテンツの作成・管理・効果測定までを包括的に行えます。
使い方を理解し活用することで、企業のウェブサイトやオウンドメディア運用の成果の向上につながるでしょう。またCMS Hubを活用することで、マーケターは保守メンテナンスや複雑なUIに悩まされることも少なくなり顧客と向き合う時間を増やすことができるでしょう。
なお、Content Hubの強みとして、HubSpotのCRMツールやMAツールと連携できる点もあげられます。ウェブサイト運用とあわせて、顧客関係管理やマーケティングの自動化を検討している方は、外部サポートなども利用し、Content Hubをより効果的・多角的に活用してみてください。