Content Hubを活用したウェブサイトの作成方法は？メリット・移行方法など完全解説

Content Hubのウェブサイトページ作成機能

HubSpotのContent Hubは、ウェブサイト制作に必要な機能が充実しています。

ページの作成・編集を直感的に行えるビジュアルエディターが特徴で、テキストや画像の配置、レイアウトの選択などがすべてコードを書かずにドラッグ＆ドロップで可能です。

Content Hubのウェブサイトページ作成機能では、「テーマ」、「テンプレート」、「モジュール」、「セクション」、「レイアウト」などの機能名称があります。

以下では、それぞれについて解説していきます。

テーマ

テーマは、ウェブサイト全体のビジュアルやデザインの基本的なスタイルを定義する枠組みです。

1つのテーマの中に、後述する「テンプレート」「モジュール」「セクション」「レイアウト」などが包括されているイメージをもつと分かりやすいかと思います。

ウェブサイト制作時にこのテーマを利用することで、HTMLやCSSなどのコード知識がなくてもサイトを構築することができます。

HubSpotが用意しているテーマのほかにも、テーママーケットプレイスには500を超えるテーマが用意されています。

テーマをベースにカスタマイズすることで、企業のブランドカラーやデザインガイドラインに合わせた調整ができます。また、テーマに基づいた変更は一括して適用されるため、全ページで容易に一貫性を保つことが可能です。

テンプレート

テンプレートは、特定のページやコンテンツを作成する際の基本的なレイアウトや構造を提供するデザインの雛形です。

例えば、以下のように各ページの目的に応じたデザインのテンプレートを選ぶことができます。

・ホームページ
・ブログページ
・ランディングページ
・About Usページ
・サンクスページ　など

テンプレートには、あらかじめセクションや要素が配置されており、制作担当者はそのまま使用したり、カスタマイズして利用することが可能です。

モジュール

モジュールは、ウェブサイト上で表示される特定のコンテンツや機能などの要素です。

上記の画像は、一部のモジュールです。

HubSpotでは、テーマごとにさまざまな要素をモジュールとして追加できます。

〈モジュールの例〉
・画像
・テキスト
・ボタン（CTAボタン含む）
・フォーム
・動画
・SNS　
・Google Map　
・スケジュールカレンダー　など

Content Hubでは、これらのモジュールをドラッグ&ドロップで簡単にページに配置し、レイアウトを自由に編集することが可能です。モジュールは、一度設定したモジュールを他のページでも使い回すことができます。

セクション

セクションは、ページ内の大きな区切りを作る要素です。
1つのセクションの中には、複数のモジュールを含むことができます。

例えば、今村工務店さんのコーポレートサイトの場合、画像モジュール、テキストモジュール、CTA（Call to Action）モジュールのように、複数のモジュールが1セクションとしてまとめられます。

Content Hubでは、セクションごとに背景色や背景画像を変更したり、余白を設定することが可能で、デザインに変化を加えることで視覚的なアクセントをつけられます。

また、セクションはモジュール同様に再利用が可能で、他のページにコピーして使うことができるため、効率的なサイト運営をサポートしてくれます。

レイアウト

レイアウトは、ページ全体の構造や配置をどうならべるかデザインする機能です。

レイアウトでは、各モジュールやセクションをどこに配置するか、横並びにするか縦に積むかといったページ全体のデザインを設計します。

例えば、フルスクリーンのレイアウトや、二列レイアウトや三列レイアウトなど、さまざまなレイアウトを選択することができます。

その他、Content Hubではどのようなことができるのか、またContent Hubの機能についての解説は、下記の記事で解説していますので参考にしてみてください。

関連記事：
コンテンツマーケティングに強いContent Hubとは？CMS機能や導入効果などを解説

Content Hub のウェブサイト機能を活用するメリット

数多くのCMSツールがある中で、HubSpot Content Hubのウェブサイト機能を活用するメリットは何なのでしょうか。

下記でご紹介していきます。

ウェブサイト制作に必要なツールがワンストップで利用可能

Content Hubは、ウェブサイト制作をするために必要なさまざまな機能を一つにまとめた便利なプラットフォームです。
そのため、ユーザーは複数のサービスを併用することなく、フォーム作成やSEOの最適化、チャットボットの導入、さらにはウェブサイトのパフォーマンスを評価するレポート作成までを一貫して行うことができます。
すべての機能をワンストップで使用できるため、企業は効率的にサイトを作ることが可能です。

デザインの専門知識がなくても作成可能

Content Hubでは、デザインやプログラミングの専門知識がなくても、簡単にデザイン性と機能を搭載したウェブサイトを作成することができるようになっています。

あらかじめ用意されている豊富なテンプレートや、ドラッグ＆ドロップで直感的に操作できるエディターを使用することで、誰でも短時間で高品質なページを作成することができます。

例えば、季節ごとに新商品の特設ページを短期間で作成したいといった場合でも、専門的な知識を必要とせず、魅力的で機能的なページが作成できます。

結果的に、外部のデザイナーに依頼する時間やコストを削減することにも繋がります。

ローカル開発環境によるスムーズな作業進行

Content Hubには、ウェブサイトの構築や改善を滞りなく行うための「ローカル開発ツール」が搭載されています。

このツールを使用することで、実際の公開環境に影響を与えることなく、新しいページデザインのテストやカスタム機能の導入をローカル開発環境でテストすることができます。/

例えば、リニューアルするページが既存のユーザー体験にどう影響を与えるかを検証したい場合など、検証が完了するまでは公開サイトに変更を加えずに済むため、安定したウェブサイト運用が可能になります。

作業のたびに不具合やトラブルを気にする必要がないため、開発スピードも向上します。

ウェブサイトページの作成方法

ここからは実際にHubSpotのテンプレートを活用してウェブサイトを構築する手順をご紹介します。

例として、「今村工務店」のコーポレートサイトを作成してみます。

新規ページの作成

①HubSpot管理画面にログインし、[コンテンツ] > [ウェブサイト] > [作成]の順にクリックする

②テンプレート一覧より、サイトイメージに合うテンプレートを選択する
※あくまでデザインのベースとなるものなので、モジュールの追加や画像のサイズ変更なども後から編集することが可能です

③左サイドメニューの「モジュール」「セクション」「レイアウト」の項目から、
サイトに合わせて追加したい要素をドラッグ＆ドロップで追加していきます

▼モジュールを追加したい場合は[モジュール]をクリックし、追加したい要素を選択してドラッグ＆ドロップ

▼セクションを追加・変更したい場合は[セクション]をクリックし、ドラッグ＆ドロップ

▼レイアウト追加・変更したい場合は[レイアウト]をクリックし、選択してドラッグ＆ドロップ

ページ内の画像やテキストの編集

画像を差し替えたい場合

①該当の画像を一度クリックする

②クリックすると、左サイドメニューが表示されるので、画像差し替えをしたいアイテムをクリックする（カーソルを当てると「鉛筆マーク」が出るので、この鉛筆マークをクリックしても編集可能）

③画像の[置換]をクリックする

④右側にアップロード済の画像一覧が表示されるので、任意の画像をクリックする
（画像がまだアップロードされていない場合は、下の[アップロード]をクリックし、画像データをHubSpotにアップロードする）

⑤画像をクリックすると差し変わるため、最後に[変更を適用]をクリックすれば画像差し替えが完了する

テキストを編集したい場合

①編集したいテキスト部分をクリックする

②左サイドメニューに表示されるタイトルや文章を編集する

テキストの場合、自動更新となるため特に更新ボタンなどをクリックする必要はありません。こちらで編集は完了です。

ページの公開設定

①右上の[設定]をクリックする

②「ページ名」の内部ページ名とページタイトルを設定する
③「ページURL」のページURL、ドメイン、メタディスクリプションを設定する

④「キービジュアル」を設定する
※SNSなどでウェブサイトリンクを共有する際、投稿内ではここで設定した画像やロゴが表示されます。

⑤「言語」を設定する（例：日本語、英語など）

⑥「オーディエンスアクセス」を設定する（例：公開）

公開済みページの編集方法

公開済みのページも簡単に編集できます。

HubSpotの左サイドメニューから、[コンテンツ] > [ウェブサイト]と選択し、
公開中のウェブサイトページを選択し、編集モードに入ることで、画像やテキスト、レイアウトを自由に変更可能です。

編集後は、右上の[公開]ボタンをクリックすれば更新完了です。

Content Hubへのウェブサイト移行方法

既存のウェブサイトをHubSpotのContent Hubへ移行することで、コンテンツ管理、リード獲得、顧客データの蓄積などをHubSpot内で一元管理できるため、マーケティング効果を最大化できます。

移行方法には3つの方法があります。ここでは、それぞれの移行方法についてご紹介します。

HubSpotのWebサイト移行サービスで移行する

既存のウェブサイトをContent Hubに移行する場合、最も簡単な方法は、HubSpotの移行サービスを活用することです。

HubSpotの専門チームがウェブサイトのコンテンツやデザインを新しいプラットフォームに移行してくれるため、時間や手間を大幅に節約できます。

HubSpotのパートナーへ依頼し移行する

HubSpotのパートナー企業にウェブサイト移行を依頼することも可能です。

パートナー企業は、HubSpot製品に精通しているため、移行作業をスムーズに進められます。さらに、必要に応じてデザインや機能のカスタマイズにも対応してくれます。

わたしたちナウビレッジは、「HubSpot Solutions Partnerプログラム」の認定パートナーのため、移行支援のご相談も承っておりますので、もしご検討中という方は一度お気軽にご相談ください。

自社で移行する

自社で移行する方法も選択肢の一つです。

HubSpotは、ウェブサイト移行に関するガイドラインやサポートを提供しており、それを参考にしながら自社で移行を進めることが可能です。

ただし、技術的な知識が必要な場面もあるため、社内のエンジニアが居る場合は対応してもらうなどリソースやスキルに応じて判断することが大切です。

ウェブサイトページの活用でエンゲージメントを向上させるために

いかがでしたか？

ウェブサイトは単なる情報提供の場ではなく、訪問者との信頼関係を築き、エンゲージメントを高める重要な場でもあります。

Content Hubの機能を最大限活用して、ウェブサイトを顧客との効果的な接点に変えていきましょう。