ContentHubで簡単にサイト構築！ページ制作の基本ガイド

HubSpot, デジタルマーケティング施策, MA 24/11/03 21:23

HubSpotのContentHubは、無料プランでもテンプレートを活用して、簡単にウェブサイトを立ち上げられるのが魅力のひとつです。この記事では、ContentHubでのページ制作における基本的な流れを紹介します。

ContentHubの概要

ContentHubは、HubSpotの提供するWebサイト構築ツールで、直感的な操作でページを作成できる点が大きな特徴です。マーケティングや営業をサポートする機能が組み込まれており、簡単にデザインやSEO設定も行えます。特に、無料プランでも利用可能な「Growthテンプレート」を活用すれば、初めての方でもスムーズにサイトを作成できます。

【関連記事】HubSpotのContentHub（無料版）の特徴
少しの専門知識でサイトが構築できます。CRMとも連携しているのでパーソナライズの精度もUP。

ContentHubのテンプレート

ContentHubでは、ウェブサイト、ランディングページ、ブログの3つのテンプレートが準備されています。
ここでは、無料プランで提供されている『Growth』テンプレートで紹介させていただきます。

テンプレートの設定までまではこちらをご確認ください。
【関連記事】HubSpotのContentHub無料版の設定方法と使い心地
HubSpotアカウントの作成からテンプレートの設定までを解説しています。

『Growth』テンプレートは、基本的なページデザインが整っているため、サイトの立ち上げがスムーズです。初期段階でこのテンプレートを選択することで、デザインやレイアウトの構成に頭を悩ませることなく、コンテンツ作成に集中できます。

有料版テンプレートについて

「アプリマーケットプレイス」から様々なテンプレートを購入することもできます。

ContentHubでのページの制作について

ContentHubの編集画面を開くと、右側に編集メニューが配置されており、作成画面の左の「＋」をクリックすると、編集ツールがでてきます。「モジュール」「セクション」「レイアウト」で構成されおり、それぞれ以下のような役割を持っています。

ページの制作と編集

モジュール

モジュールは、ページに配置する「テキスト」「画像」「CTAボタン」などの基本要素を指します。HubSpotには、あらかじめ設定された標準モジュールが多数用意されており、簡単にドラッグ＆ドロップでページに追加できます。これにより、専門的なコーディングスキルがなくても、必要な要素を瞬時に配置することができます。

セクション

セクションは、複数のモジュールをまとめて一つのグループとして管理するための大枠です。例えば、セクションを使えば「見出しテキスト」「画像」「説明文」をまとめて一つのまとまりとして扱い、その背景色や配置、余白などを一括で設定できます。これにより、ページ全体に統一感を持たせつつ、セクションごとに異なるデザインやコンテンツの特徴を持たせることが可能です。

セクションは他のページやテンプレートにも再利用可能なため、一度作成したセクションを他のページに活用することも容易です。これにより、デザインや構成を統一しやすく、管理もシンプルになります。

レイアウト

レイアウト全体の幅や配置を調整することで、スマートフォンやタブレットなど異なるデバイスでの表示にも柔軟に対応できるレスポンシブデザインを実現できます。HubSpotでは、デスクトップ、タブレット、スマートフォンそれぞれに合わせたレイアウトを設定する機能も備わっており、より高いデザイン精度を求める場合に活用可能です。

コンテンツの階層表示

ページのコンテンツは階層化されており、各モジュールやセクションの位置関係が視覚的にわかりやすく表示されます。階層表示をうまく活用することで、ページ構成を一目で把握でき、編集がスムーズになります。

パソコン／モバイルで非表示の指定がもできまうｓ。

最適化（SEOの設定）

ページごとのSEO設定が可能です。メタディスクリプションやページタイトルなど、設定漏れや不備があるとアラートがでてきます。

ページの設定

各ページには設定項目があり、サイト内外での表示に影響を与えます。それぞれの設定方法とポイントを解説します。

内部ページ名

内部的なページ名は、管理者にとっての識別用で、サイトの訪問者には表示されません。名前をわかりやすく設定しておくと、後のページ管理が楽になります。

ページタイトル

ページタイトルは、検索エンジンの結果やソーシャルメディアで表示されるため、SEOやクリック率にも影響を与えます。短く、わかりやすいタイトルを心がけましょう。

コンテンツスラッグ

URLに反映されるスラッグは、訪問者にも検索エンジンにもわかりやすいものにしましょう。例えば「/services」や「/about-us」のような簡潔なスラッグが理想的です。

メタディスクリプション

メタディスクリプションは、検索エンジンでのページ概要として表示される文章です。ページ内容を簡潔に表現し、訪問者が興味を持ちやすい内容にすることがポイントです。

ContentHubの使い心地

操作について

ContentHubは基本的にドラッグ＆ドロップでページ制作が進められるため、直感的に操作ができてスムーズに感じます。ただ、初めのうちは少し戸惑う部分もあります。たとえば、縦方向への整列や行単位での一括削除など、便利な機能があるものの、気づかずに個別で削除してしまうこともありました。使い込むうちに偶然見つかる機能も多く、操作に慣れてくるとさらに効率が上がる印象です。

デザインについて

デザインの自由度はとても高いです。無料の『Growth』テンプレートでもカスタマイズ機能が充実していて、オリジナリティのあるデザインが可能です。さらに「デザインマネージャー」を使えば、CSSやJavaScriptの追加もでき、より高度なカスタマイズやモジュールの新規作成にも対応しています。

【関連記事】HubSpotは無料でどこまでできるか？
無料で使える機能一覧についてまとめてあります。

HubSpot, デジタルマーケティング施策, MA