専門知識がなくても大丈夫。HubSpot CMS Hubを用いたWebサイトページの作成手順を紹介

2023.03.24

HubSpotが提供しているCMSである「CMS Hub」は、Webサイトの作成や管理に役立つさまざまな機能が備わっているツールです。その中でも最大のメリットはHTMLやCSSといった専門知識がなくとも、誰でも簡単にWebサイトページを作成することができるという点にあります。

今回はCMS Hubを用いて、Webの専門知識がなくても簡単にWebサイトページを作成できるのか、実際にWebサイトページを作ってみたいと思います。

今回は弊社の会社情報のページを作成していきます。

1.テンプレートを選ぶ

HubSpotのマーケティングウェブサイトウェブサイトページWebサイトページを新規作成の順番で新しくページを作成します。

ウェブサイト|HubSpot (1) (1)

そしてテンプレート一覧の中から、使用したいWebサイトページのテンプレートを選択します。

コンテンツクリエイター-HubSpot

2.コンテンツを作成する

ページの編集-テスト(マーケティングブログ用) (5)

上の画像にあるように、画面左側のモジュールエリアの中から画像やテキスト、見出しなどの要素を選び、画面右側の編集エリアにドラッグ&ドロップで配置することでコンテンツを作成していきます。

それでは実際に会社情報を入力してきます。
入力するテキストに合わせて、見出しのタイプやフォント、文字の大きさの変更も可能です。

HubSpot Video


画像やフォームを挿入できるのはもちろんのこと、GoogleマップのHTMLをコピーして、マップをページ内に埋め込むことも簡単にできます。

HubSpot Video


このように、直感的な操作だけで、15分程度でWebサイトページを作成することができました。

マーケティングブログ

3.Webサイトページの設定を行う

ページを作成できたら、設定画面からWebサイトページを公開するために必要な設定を行っていきます。

ページの編集-テスト(マーケティングブログ用)

①内部ページ名

このページを管理するためにわかりやすページ名をつけます。内部ページ名はユーザーには表示されません。

②ページタイトル

公開するWebサイトページのタイトルを入力します。ページタイトルはユーザーに表示されます。

③ページの言語

ページの言語を変更する場合に設定します。約40カ国の言語の翻訳が可能です。

④ページURL

ページURLを半角英数で入力します。

⑤メタディスクリプション

検索結果で表示されるページタイトルの下に表示されるテキストです。コンテンツの概要や説明文を入力します。

⑥キャンペーン

HubSpotで作成したキャンペーンと紐づける場合に設定します。
キャンペーンは、複数のコンテンツをグループ化して1つのマーケティング活動全体を分析するために使用されます。

⑦キービジュアル

画像をアップロードして、ソーシャルメディア(TwitterやFacebookなど)でページがシェアされた際に添付されるキービジュアルを設定できます。

4.ページの最適化の確認を行う

最適化画面から、作成したWebサイトページに対するHubSpot側からのSEO対策のアドバイスを確認することができます。

ページの編集-テスト(マーケティングブログ用) (6)

改善が必要な部分にはグレーのチェックマークが表示されます。アドバイスに沿って設定を行うことで、Webサイトページを公開する前にSEO対策を行うことができます。

公開スケジュールを設定する

公開オプション画面から、Webサイトページを公開するスケジュールを設定することができます。
スケジュールを設定すれば、忘れることなく正確な時間にWebサイトページを公開できます。

マーケティングブログ 公開オプション

まとめ

HubSpotのCMS Hubを使って実際にWebサイトページを作成してみました。
HTMLやCSSなどのWebの専門的な知識がなくても、必要な要素をドラッグ&ドロップすることで簡単にコンテンツを作成できるだけでなく、ブラウザに表示された状態に近い管理画面で、見た目を確認しながら効率的にページを作成することができました。

JBNでは 、 HubSpot CMS Hubを導入したWebサイトの構築支援を行っています。
JBNのWebサイト構築実績はこちら

HubSpotを導入したWebサイト構築に興味のある方や、お困りごとがある方はぜひお問い合わせください。

お問い合わせやご相談はこちらから

関連するおすすめのブログ記事