--- title: 初心者必見！レゴで理解するHubSpotのページ構造 description: HubSpotでのページ作成をレゴに例えて、テーマ・テンプレート・セクション・モジュール・グローバルコンテンツの違いと、Elevateテーマ活用のコツを初心者向けにわかりやすく解説します。 --- [気ままにInbound研究会 ](https://inbound-lab.blog) # [初心者必見！レゴで理解するHubSpotのページ構造](https://inbound-lab.blog/page_structure) 作成者: [Yuki](https://inbound-lab.blog/author/yuki)｜2026/03/16 7:59:38 HubSpotでページを作ろうとすると、カタカナ用語がたくさん出てきますよね。 **テーマ / テンプレート / セクション / モジュール / グローバルコンテンツ**など、、、　欧米か！？（そうなんだけど、、アメリカの会社なんだけど、、、） 直感的にページは作成できるものの、細かく作り込もうとすると「どれを触ると、何が起こるのか分からない！」と不安になる気持ちわかります。 そこで今回は、「HubSpotのページ作り = レゴ作品づくり」にたとえて、ページ構造の基本を分かりやすく解説します。   ### 目次： [その１：HubSpotのページの作りのいろは（全体像](https://inbound-lab.blog/page_structure?hs_amp=true#iroha)） [その２：レゴで理解する5つの概念](https://inbound-lab.blog/page_structure?hs_amp=true#part2) - [①テーマ](https://inbound-lab.blog/page_structure?hs_amp=true#part2_1) - [②テンプレート](https://inbound-lab.blog/page_structure?hs_amp=true#part2_2) - [③グローバルコンテンツ](https://inbound-lab.blog/page_structure?hs_amp=true#part2_3) - [④セクション](https://inbound-lab.blog/page_structure?hs_amp=true#part2_4) - [⑤モジュール](https://inbound-lab.blog/page_structure?hs_amp=true#part2_5) - [まとめ](https://inbound-lab.blog/page_structure?hs_amp=true#part2_matome) [その３：初心者におすすめの流れ](https://inbound-lab.blog/page_structure?hs_amp=true#part3) - [最初の一歩：Elevateでページを作る流れ](https://inbound-lab.blog/page_structure?hs_amp=true#part3_1) [ワンポイントアドバイス](https://inbound-lab.blog/page_structure?hs_amp=true#advice)   ### 🔶その１：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 は、**そのページにだけ適用**されます。 例えば、「このページだけボタンの色を変えたい」場合は、次のコードを追加します。 ``` ``` このコードを使うと、そのページ内でクラス名 `.hs-elevate-button--primary` が付いている「プライマリーボタン」だけ、背景色が赤 (#ff0000) に変わります。     - ポイント1：この設定は「そのページ限定」で反映されるので、他のページには影響しません。 - ポイント2：テーマやモジュールによってクラス名が異なる場合があるため、うまく効かないときはブラウザの開発者ツールで実際のクラス名を確認してから書き換えるのがおすすめです。 - ポイント3**：**CSS を触るので、レイアウトが崩れないかプレビューで必ず確認するようにしましょう。 最近はCSSのコードもAIが教えてくれるので、是非色々試して、自社だけのレゴ作品（ページ）づくりを楽しんでみてください！   ※なお、HubSpotサポートでは、個別のカスタムコード（CSS / JavaScript）の作成・調整は原則サポート対象外です。 トラブルが起きたときに元に戻せるよう、必ずバックアップやテスト用ページでの検証を行ってからお試しください。   注意：HubSpotは日々アップデートされているため、本記事の内容や画面イメージ、リセット手順が将来変更される可能性があります。最新の仕様・操作方法については、[ナレッジベースの記事](https://knowledge.hubspot.com/ja)をご確認ください。     [完全な記事を表示](https://inbound-lab.blog/page_structure) ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Yuki" }, "dateModified" : "2026-03-27T10:34:27.473Z", "datePublished" : "2026-03-16T07:59:38Z", "headline" : "初心者必見！レゴで理解するHubSpotのページ構造", "image" : { "@type" : "ImageObject", "height" : 1024, "url" : "https://39843487.fs1.hubspotusercontent-na1.net/hubfs/39843487/AI-Generated%20Media/Images/A%20caricaturestyle%20illustration%20of%20a%20single%20Japanese%20woman%20in%20business%20casual%20attire%20sitting%20at%20a%20desk%20in%20a%20modern%20office%20looking%20excited%20and%20curious%20a.png", "width" : 1536 }, "mainEntityOfPage" : "https://inbound-lab.blog/page_structure", "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "height" : 60.0, "url" : "https://39843487.fs1.hubspotusercontent-na1.net/hubfs/39843487/logo_beaker_20250507.png", "width" : 60.000004 }, "name" : "気ままにInbound研究会" } } ```