HubSpotでページを作ろうとすると、カタカナ用語がたくさん出てきますよね。

テーマ / テンプレート / セクション / モジュール / グローバルコンテンツなど、、、　欧米か！？（そうなんだけど、、アメリカの会社なんだけど、、、）

直感的にページは作成できるものの、細かく作り込もうとすると「どれを触ると、何が起こるのか分からない！」と不安になる気持ちわかります。

そこで今回は、「HubSpotのページ作り = レゴ作品づくり」にたとえて、ページ構造の基本を分かりやすく解説します。

目次：

その１：HubSpotのページの作りのいろは（全体像）

その２：レゴで理解する5つの概念

• ①テーマ

• ②テンプレート

• ③グローバルコンテンツ

• ④セクション

• ⑤モジュール

• まとめ

その３：初心者におすすめの流れ

• 最初の一歩：Elevateでページを作る流れ

ワンポイントアドバイス

🔶その１：HubSpotのページの作りのいろは（全体像）

全体のイメージ「1ページ ＝ 1つのレゴ作品」 です。

• 1つ1つのページは、レゴで作った「家」や「お城」のような完成作品
• その作品を形作るのが、設計図・部屋・家具・共通パーツ…というイメージです

ざっくり分解すると、HubSpotのページは次の 5つ でできています。

1. テーマ：世界観・使えるパーツ一式のセット
2. テンプレート：作品全体の設計図
3. グローバルコンテンツ：どの作品にも共通で使う、大きめの完成パーツ
4. セクション：部屋の枠・レイアウトの箱
5. モジュール：家具や小物など、中身そのもの

この後、それぞれをレゴにたとえて詳しく見ていきます。

🔶その２：レゴで理解する5つの概念

① テーマ = レゴシリーズ一式（世界観セット）

「テーマ」は、ページ全体の世界観と、使えるパーツ一式をまとめたセットです。

▶ レゴでいうと：シリーズ・世界観セット

• 「レゴ・シティ」「レゴ・お城シリーズ」のようなイメージ
• そのシリーズごとに：
  • よく使う色（カラーパレット）
  • 雰囲気（ポップ / 落ち着いた / 和風 など）
  • 用意されているパーツの種類（車多め・お城パーツ多め など） が決まっています。

👉 ポイント：テーマは「この世界観でサイトを作る」という土台になるパッケージです。

② テンプレート = 作品全体の設計図（マニュアル）

「テンプレート」は、ページの「骨組み」や「配置」のルールを決めるマニュアルです。

▶ レゴでいうと：作品の設計図（マニュアル）

• どんな形の作品を作るか（1カラム？2カラム？ヒーロー画像あり？）
• どこに何を置くか（メイン画像、テキスト、CTAボタンの位置など）
• 土台や骨組みがどうなっているか（ヘッダー・フッターの有無、幅など）

👉 ポイント：設計図を変えると、それを使っている作品すべてに影響します。

ページの役割（例：セミナー募集用途、資料ダウンロード用途）や見せたい雰囲気ごとにテンプレートを分ける、と考えておくのがおすすめです。

同じテンプレートで作ったページは「兄弟ページ」のような関係なので、テンプレート自体を編集すると、それらのページ全体のレイアウトが一気に変わります。

イメージとしては、学校の校則（マニュアル）が変わると、翌日から全校生徒に一気に反映される感じです。例えば「キャラクター文具禁止」という校則の廃止が決まったら、翌日からみんな一斉にキャラクター文具を持ってきますよね？！

③ グローバルコンテンツ = 共通で使う完成パーツ

グローバルコンテンツは、複数ページで共通して使うコンテンツの塊です。
代表例はヘッダー（ナビゲーション）やフッターです。

▶ レゴでいうと：完成済みの共通パーツ（取り外し可能な大きなブロック）

• いつも同じ形の「玄関」
• どの家にも付いている「屋根」
• まとめて「ガチッ」とはめられるような大きなブロック

特徴：

• 1か所直すと、それを使っている作品全部が変わる
• 便利だけれど、個別ページ用にいじるときは注意が必要

👉 ポイント：グローバルコンテンツは「便利だけど、触ると全体に影響するパーツ」 です。

💥 よくある事故：フッター削除事故

レゴたとえで言うと…

• フッター = 共通の屋根（グローバルパーツ）
• 「この家だけ屋根いらないな」と思って、1つの家で屋根を外した
• すると、同じ屋根パーツを使っている他の家の屋根も全部なくなった…

これが、HubSpotでよくある 「フッター消えた！」事故 の正体です。
「このページだけ変えたい」ときにグローバルコンテンツを直接いじると、他のページも巻き込まれてしまいます。

④ セクション = 部屋の枠・レイアウトの箱

セクションは、ページの中を「どんな配置の箱で区切るか」を決める単位です。

▶ レゴでいうと：部屋の枠・箱

• 「この部屋は6マス × 4マス」
• 「ここは横に広いリビング」
• 壁の色や床の色を決めるイメージ

👉 ポイント：どんな大きさ・形の部屋かを決める部分

セクションは「部屋ごとに丸ごとコピーできる箱」です。
たとえば「お客様の声セクション」「料金表セクション」を保存しておけば、別ページでもワンクリックで同じレイアウトを呼び出せます。
テンプレートやグローバルをいじらなくても、よく使うパターンをセクションとしてストックしておくだけで、ページ作成が一気に早く＆キレイに揃うのでとても便利です。

⑤ モジュール = 家具・小物（中身そのもの）

モジュールは、実際にページ上に表示されるコンテンツそのものです。

▶ レゴでいうと：部屋の中の家具や小さなブロック

• ベッド
• 机
• ソファ
• 観葉植物　など

HubSpotなら：

• テキスト
• 画像
• ボタン
• フォーム
• アイコン　など

👉 ポイント：実際に目に見えて、意味を持つパーツ
モジュールを入れ替えたり編集したりすることで、ページの「中身」を作っていきます。
また、自分自身で手作りの家具をDIYで作るように、作る意欲と技術があれば、カスタムモジュールを作成することもできます！

レゴ風構造まとめ

ひとつの完成したレゴ作品（= ページ）はこんな構造です。

• 完成したレゴ作品（ページ）
  ├ 世界観セット（テーマ）
  ├ 設計図（テンプレート）
  ├ 共通で使う完成パーツ（グローバルコンテンツ）
  └ 部屋の枠（セクション）
  　　└ 家具・小物（モジュール）

このイメージを持っておくと、

「今自分は世界観セットを選んでいるのか？　設計図をいじっているのか？　それとも家具を置き換えているだけか？」

が分かりやすくなり、事故も減らせます。

🔶その３：初心者におすすめの流れ

ここまでで構造は分かったけれど、
「じゃあ、最初はどんなテーマを使えばいいの？」という方におすすめなのが、「Elevate」テーマです。

Elevateをおすすめする理由

• Elevate は HubSpot公式テーマなので、テーマまわりの質問やトラブルも含めて、細かいところまでHubSpotサポートで承ることができます。

  • なお、マーケットプレイスからダウンロードしたテーマは、テーマ固有のデザインやコードの不具合は提供元に問い合わせていただく必要があり、HubSpotサポートでは基本操作、HubSpot側の不具合切り分けといった「限定的なサポート」になります。

• よく使うページタイプ（トップ、サービス紹介、ブログ一覧など）のテンプレートがあらかじめ用意されている
• ドラッグ＆ドロップでセクションやモジュールを入れ替えやすく、ノーコードでも形になりやすい

▶ レゴでいうと：「公式レゴセット」のようなイメージです。

• 設計図（テンプレート）も、必要なパーツ（セクション・モジュール）も最初からセットになっていて、
• 色を変えたり、家具（モジュール）を入れ替えたりするだけで、自社らしいサイトに近づけやすいのが特徴です。

最初の一歩：Elevateでページを作る流れ

1. ランディングページ/ウェブページを開き、左上の「作成」を押す
2. テーマギャラリーから Elevate テーマを選ぶ
3. 使いたいページタイプ（トップページ、ランディングページなど）のテンプレートを元にドラフトを作成　
   
4. セクションを増減しつつ、モジュールのテキストや画像を自社用に書き換え

テーマ（世界観）→ テンプレート（設計図）→ セクション（部屋）→ モジュール（家具）
という順番で、「完成済みの公式レゴセットを、自社用にカスタマイズする」イメージで進めてくださいませ！

🔶ワンポイントアドバイス：見た目を変えたいときの小ワザ

キャンペーンLPなどが複数あり、特定のページだけ、ちょっとした演出（背景・動き）を足したいとき追加のコードスニペットという技が使えます。

設定場所は、ページ編集画面の ［設定］タブ → ［詳細設定］→「追加のコードスニペット」。
ここに書いた CSS / JavaScript は、そのページにだけ適用されます。

例えば、「このページだけボタンの色を変えたい」場合は、次のコードを追加します。

<style>
.hs-elevate-button--primary {
background-color: #ff0000; /* プライマリーボタンの背景色を赤に変更 */ 
}
</style> 

このコードを使うと、そのページ内でクラス名 .hs-elevate-button--primary が付いている「プライマリーボタン」だけ、背景色が赤 (#ff0000) に変わります。

• ポイント1：この設定は「そのページ限定」で反映されるので、他のページには影響しません。
• ポイント2：テーマやモジュールによってクラス名が異なる場合があるため、うまく効かないときはブラウザの開発者ツールで実際のクラス名を確認してから書き換えるのがおすすめです。
• ポイント3：CSS を触るので、レイアウトが崩れないかプレビューで必ず確認するようにしましょう。

最近はCSSのコードもAIが教えてくれるので、是非色々試して、自社だけのレゴ作品（ページ）づくりを楽しんでみてください！

※なお、HubSpotサポートでは、個別のカスタムコード（CSS / JavaScript）の作成・調整は原則サポート対象外です。
トラブルが起きたときに元に戻せるよう、必ずバックアップやテスト用ページでの検証を行ってからお試しください。

注意：HubSpotは日々アップデートされているため、本記事の内容や画面イメージ、リセット手順が将来変更される可能性があります。最新の仕様・操作方法については、ナレッジベースの記事をご確認ください。