HubSpotでページを作ろうとすると、カタカナ用語がたくさん出てきますよね。
テーマ / テンプレート / セクション / モジュール / グローバルコンテンツなど、、、 欧米か！？（そうなんだけど、、アメリカの会社なんだけど、、、）
直感的にページは作成できるものの、細かく作り込もうとすると「どれを触ると、何が起こるのか分からない！」と不安になる気持ちわかります。
そこで今回は、「HubSpotのページ作り = レゴ作品づくり」にたとえて、ページ構造の基本を分かりやすく解説します。
全体のイメージ「1ページ ＝ 1つのレゴ作品」 です。
ざっくり分解すると、HubSpotのページは次の 5つ でできています。
この後、それぞれをレゴにたとえて詳しく見ていきます。
「テーマ」は、ページ全体の世界観と、使えるパーツ一式をまとめたセットです。
▶ レゴでいうと：シリーズ・世界観セット
👉 ポイント：テーマは「この世界観でサイトを作る」という土台になるパッケージです。
「テンプレート」は、ページの「骨組み」や「配置」のルールを決めるマニュアルです。
▶ レゴでいうと：作品の設計図（マニュアル）
👉 ポイント：設計図を変えると、それを使っている作品すべてに影響します。
ページの役割（例：セミナー募集用途、資料ダウンロード用途）や見せたい雰囲気ごとにテンプレートを分ける、と考えておくのがおすすめです。
同じテンプレートで作ったページは「兄弟ページ」のような関係なので、テンプレート自体を編集すると、それらのページ全体のレイアウトが一気に変わります。
イメージとしては、学校の校則（マニュアル）が変わると、翌日から全校生徒に一気に反映される感じです。例えば「キャラクター文具禁止」という校則の廃止が決まったら、翌日からみんな一斉にキャラクター文具を持ってきますよね？！
グローバルコンテンツは、複数ページで共通して使うコンテンツの塊です。
代表例はヘッダー（ナビゲーション）やフッターです。
▶ レゴでいうと：完成済みの共通パーツ（取り外し可能な大きなブロック）
特徴：
👉 ポイント：グローバルコンテンツは「便利だけど、触ると全体に影響するパーツ」 です。
レゴたとえで言うと…
これが、HubSpotでよくある 「フッター消えた！」事故 の正体です。
「このページだけ変えたい」ときにグローバルコンテンツを直接いじると、他のページも巻き込まれてしまいます。
セクションは、ページの中を「どんな配置の箱で区切るか」を決める単位です。
▶ レゴでいうと：部屋の枠・箱
👉 ポイント：どんな大きさ・形の部屋かを決める部分
セクションは「部屋ごとに丸ごとコピーできる箱」です。
たとえば「お客様の声セクション」「料金表セクション」を保存しておけば、別ページでもワンクリックで同じレイアウトを呼び出せます。
テンプレートやグローバルをいじらなくても、よく使うパターンをセクションとしてストックしておくだけで、ページ作成が一気に早く＆キレイに揃うのでとても便利です。
モジュールは、実際にページ上に表示されるコンテンツそのものです。
▶ レゴでいうと：部屋の中の家具や小さなブロック
HubSpotなら：
👉 ポイント：実際に目に見えて、意味を持つパーツ
モジュールを入れ替えたり編集したりすることで、ページの「中身」を作っていきます。
また、自分自身で手作りの家具をDIYで作るように、作る意欲と技術があれば、カスタムモジュールを作成することもできます！
ひとつの完成したレゴ作品（= ページ）はこんな構造です。
このイメージを持っておくと、
「今自分は世界観セットを選んでいるのか？ 設計図をいじっているのか？ それとも家具を置き換えているだけか？」
が分かりやすくなり、事故も減らせます。
ここまでで構造は分かったけれど、
「じゃあ、最初はどんなテーマを使えばいいの？」という方におすすめなのが、「Elevate」テーマです。
Elevate は HubSpot公式テーマなので、テーマまわりの質問やトラブルも含めて、細かいところまでHubSpotサポートで承ることができます。
なお、マーケットプレイスからダウンロードしたテーマは、テーマ固有のデザインやコードの不具合は提供元に問い合わせていただく必要があり、HubSpotサポートでは基本操作、HubSpot側の不具合切り分けといった「限定的なサポート」になります。
▶ レゴでいうと：「公式レゴセット」のようなイメージです。
テーマ（世界観）→ テンプレート（設計図）→ セクション（部屋）→ モジュール（家具）
という順番で、「完成済みの公式レゴセットを、自社用にカスタマイズする」イメージで進めてくださいませ！
キャンペーンLPなどが複数あり、特定のページだけ、ちょっとした演出（背景・動き）を足したいとき追加のコードスニペットという技が使えます。
設定場所は、ページ編集画面の ［設定］タブ → ［詳細設定］→「追加のコードスニペット」。
ここに書いた CSS / JavaScript は、そのページにだけ適用されます。
例えば、「このページだけボタンの色を変えたい」場合は、次のコードを追加します。
<style>
.hs-elevate-button--primary {
background-color: #ff0000; /* プライマリーボタンの背景色を赤に変更 */
}
</style> このコードを使うと、そのページ内でクラス名 .hs-elevate-button--primary が付いている「プライマリーボタン」だけ、背景色が赤 (#ff0000) に変わります。
最近はCSSのコードもAIが教えてくれるので、是非色々試して、自社だけのレゴ作品（ページ）づくりを楽しんでみてください！
※なお、HubSpotサポートでは、個別のカスタムコード（CSS / JavaScript）の作成・調整は原則サポート対象外です。
トラブルが起きたときに元に戻せるよう、必ずバックアップやテスト用ページでの検証を行ってからお試しください。
注意：HubSpotは日々アップデートされているため、本記事の内容や画面イメージ、リセット手順が将来変更される可能性があります。最新の仕様・操作方法については、ナレッジベースの記事をご確認ください。