--- title: ContentHubで簡単にサイト構築！ページ制作の基本ガイド｜Life Marlety description: HubSpot ContentHubの無料版を活用したウェブサイト構築の基本ガイド。テンプレートの選び方からページ制作の流れ、SEO設定まで解説。初心者でも簡単に使えるドラッグ＆ドロップ機能や、デザインのカスタマイズ性の高さを紹介します。 image: https://lifemarkety.com/hubfs/Canva%20images/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Nov-25-2024-12-58-05-3168-PM.png --- [コンテンツまでスキップ](https://lifemarkety.com/blog/hubspot-free-cms-production#main-content) [![LifeMarketyロゴ](https://lifemarkety.com/hs-fs/hubfs/logo/logo-w-1.png?width=200&height=200&name=logo-w-1.png "LifeMarketyロゴ")](https://lifemarkety.com) **[ブログ](https://lifemarkety.com/blog)　[はじめてガイド](https://lifemarkety.com/btob)　[HubSpot活用ガイド](https://lifemarkety.com/hubspot)** [お問い合せ](https://lifemarkety.com/inquiry) - [HOME](https://lifemarkety.com) - [ブログ](https://lifemarkety.com/blog) - ContentHubで簡単にサイト構築！ページ制作の基本ガイド [ブログを読む](https://lifemarkety.com/blog) [BtoBマーケティング スターターガイド](https://lifemarkety.com/btob) ・実践ガイド  **HubSpot **利活用ガイド ・**HubSpot **機能別ガイド # ContentHubで簡単にサイト構築！ページ制作の基本ガイド [マーケティング施策](https://lifemarkety.com/blog/tag/マーケティング施策), [HubSpot](https://lifemarkety.com/blog/tag/hubspot) 2025年01月04日 [facebook-f icon](http://www.facebook.com/share.php?u=https://lifemarkety.com/blog/hubspot-free-cms-production) [X Twitter icon](https://twitter.com/intent/tweet?url=https://lifemarkety.com/blog/hubspot-free-cms-production) ![名称未設定のデザイン-Nov-25-2024-12-58-05-3168-PM](https://lifemarkety.com/hs-fs/hubfs/Canva%20images/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Nov-25-2024-12-58-05-3168-PM.png?width=960&height=540&name=%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Nov-25-2024-12-58-05-3168-PM.png)    HubSpotのContentHubは、無料プランでもテンプレートを活用して、簡単にウェブサイトを立ち上げられるのが魅力のひとつです。この記事では、ContentHubでのページ制作における基本的な流れを紹介します。 ## ContentHubの概要 ContentHubは、HubSpotの提供するWebサイト構築ツールで、直感的な操作でページを作成できる点が大きな特徴です。マーケティングや営業をサポートする機能が組み込まれており、簡単にデザインやSEO設定も行えます。特に、無料プランでも利用可能な「Growthテンプレート」を活用すれば、初めての方でもスムーズにサイトを作成できます。 [![HubSpotのContentHub（無料版）の特徴](https://lifemarkety.com/hs-fs/hubfs/Canva%20images/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Oct-20-2024-11-19-57-6390-PM.png?width=96&height=54&name=%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Oct-20-2024-11-19-57-6390-PM.png)](https://lifemarkety.com/blog/hubspot-free-cms) 【関連記事】[HubSpotのContentHub（無料版）の特徴](https://lifemarkety.com/blog/hubspot-free-cms) 少しの専門知識でサイトが構築できます。CRMとも連携しているのでパーソナライズの精度もUP。 ## ContentHubのテンプレート ContentHubでは、ウェブサイト、ランディングページ、ブログの3つのテンプレートが準備されています。 ここでは、無料プランで提供されている『Growth』テンプレートで紹介させていただきます。 [![名称未設定のデザイン-Oct-26-2024-07-58-44-8988-AM](https://lifemarkety.com/hs-fs/hubfs/Canva%20images/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Oct-26-2024-07-58-44-8988-AM.png?width=96&height=54&name=%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Oct-26-2024-07-58-44-8988-AM.png)](https://lifemarkety.com/blog/hubspot-free-cms) テンプレートの設定までまではこちらをご確認ください。 【関連記事】[HubSpotのContentHub無料版の設定方法と使い心地](https://lifemarkety.com/blog/hubspot-free-cms-set) HubSpotアカウントの作成からテンプレートの設定までを解説しています。 『Growth』テンプレートは、基本的なページデザインが整っているため、サイトの立ち上げがスムーズです。初期段階でこのテンプレートを選択することで、デザインやレイアウトの構成に頭を悩ませることなく、コンテンツ作成に集中できます。 有料版テンプレートについて ![](https://lifemarkety.com/hs-fs/hubfs/image-png-Nov-03-2024-10-52-14-0386-AM.png?width=498&height=72&name=image-png-Nov-03-2024-10-52-14-0386-AM.png) 「アプリマーケットプレイス」から様々なテンプレートを購入することもできます。 ## ContentHubでのページの制作について ContentHubの編集画面を開くと、右側に編集メニューが配置されており、作成画面の左の「＋」をクリックすると、編集ツールがでてきます。 「モジュール」「セクション」「レイアウト」で構成されおり、それぞれ以下のような役割を持っています。 ### ページの制作と編集 #### モジュール モジュールは、ページに配置する「テキスト」「画像」「CTAボタン」などの基本要素を指します。HubSpotには、あらかじめ設定された標準モジュールが多数用意されており、簡単にドラッグ＆ドロップでページに追加できます。これにより、専門的なコーディングスキルがなくても、必要な要素を瞬時に配置することができます。 ![](https://lifemarkety.com/hs-fs/hubfs/image-png-Nov-03-2024-09-33-59-9282-AM.png?width=889&height=573&name=image-png-Nov-03-2024-09-33-59-9282-AM.png) #### セクション  セクションは、複数のモジュールをまとめて一つのグループとして管理するための大枠です。例えば、セクションを使えば「見出しテキスト」「画像」「説明文」をまとめて一つのまとまりとして扱い、その背景色や配置、余白などを一括で設定できます。これにより、ページ全体に統一感を持たせつつ、セクションごとに異なるデザインやコンテンツの特徴を持たせることが可能です。 セクションは他のページやテンプレートにも再利用可能なため、一度作成したセクションを他のページに活用することも容易です。これにより、デザインや構成を統一しやすく、管理もシンプルになります。 ![](https://lifemarkety.com/hs-fs/hubfs/image-png-Nov-03-2024-11-20-59-8564-AM.png?width=781&height=436&name=image-png-Nov-03-2024-11-20-59-8564-AM.png) #### レイアウト セクションは、複数のモジュールをまとめて一つのグループとして管理するための大枠です。例えば、セクションを使えば「見出しテキスト」「画像」「説明文」をまとめて一つのまとまりとして扱い、その背景色や配置、余白などを一括で設定できます。これにより、ページ全体に統一感を持たせつつ、セクションごとに異なるデザインやコンテンツの特徴を持たせることが可能です。  ![](https://lifemarkety.com/hs-fs/hubfs/image-png-Nov-03-2024-11-24-47-1560-AM.png?width=609&height=295&name=image-png-Nov-03-2024-11-24-47-1560-AM.png) レイアウト全体の幅や配置を調整することで、スマートフォンやタブレットなど異なるデバイスでの表示にも柔軟に対応できるレスポンシブデザインを実現できます。HubSpotでは、デスクトップ、タブレット、スマートフォンそれぞれに合わせたレイアウトを設定する機能も備わっており、より高いデザイン精度を求める場合に活用可能です。 #### コンテンツの階層表示 ページのコンテンツは階層化されており、各モジュールやセクションの位置関係が視覚的にわかりやすく表示されます。階層表示をうまく活用することで、ページ構成を一目で把握でき、編集がスムーズになります。 パソコン／モバイルで非表示の指定がもできまうｓ。 ![](https://lifemarkety.com/hs-fs/hubfs/image-png-Nov-03-2024-11-50-46-6698-AM.png?width=829&height=505&name=image-png-Nov-03-2024-11-50-46-6698-AM.png) #### 最適化（SEOの設定） ページごとのSEO設定が可能です。メタディスクリプションやページタイトルなど、設定漏れや不備があるとアラートがでてきます。 ![](https://lifemarkety.com/hs-fs/hubfs/image-png-Nov-03-2024-11-51-48-0910-AM.png?width=339&height=480&name=image-png-Nov-03-2024-11-51-48-0910-AM.png) ### ページの設定 各ページには設定項目があり、サイト内外での表示に影響を与えます。それぞれの設定方法とポイントを解説します。  ![](https://lifemarkety.com/hs-fs/hubfs/image-png-Nov-03-2024-11-53-44-2977-AM.png?width=534&height=58&name=image-png-Nov-03-2024-11-53-44-2977-AM.png) #### 内部ページ名 内部的なページ名は、管理者にとっての識別用で、サイトの訪問者には表示されません。名前をわかりやすく設定しておくと、後のページ管理が楽になります。 #### ページタイトル ページタイトルは、検索エンジンの結果やソーシャルメディアで表示されるため、SEOやクリック率にも影響を与えます。短く、わかりやすいタイトルを心がけましょう。 #### コンテンツスラッグ URLに反映されるスラッグは、訪問者にも検索エンジンにもわかりやすいものにしましょう。例えば「/services」や「/about-us」のような簡潔なスラッグが理想的です。 #### メタディスクリプション メタディスクリプションは、検索エンジンでのページ概要として表示される文章です。ページ内容を簡潔に表現し、訪問者が興味を持ちやすい内容にすることがポイントです。 ![](https://lifemarkety.com/hs-fs/hubfs/image-png-Nov-03-2024-11-54-29-9303-AM.png?width=793&height=700&name=image-png-Nov-03-2024-11-54-29-9303-AM.png) ## ContentHubの使い心地 ### 操作について ContentHubは基本的にドラッグ＆ドロップでページ制作が進められるため、直感的に操作ができてスムーズに感じます。ただ、初めのうちは少し戸惑う部分もあります。たとえば、縦方向への整列や行単位での一括削除など、便利な機能があるものの、気づかずに個別で削除してしまうこともありました。使い込むうちに偶然見つかる機能も多く、操作に慣れてくるとさらに効率が上がる印象です。 ### デザインについて デザインの自由度はとても高いです。無料の『Growth』テンプレートでもカスタマイズ機能が充実していて、オリジナリティのあるデザインが可能です。さらに「デザインマネージャー」を使えば、CSSやJavaScriptの追加もでき、より高度なカスタマイズやモジュールの新規作成にも対応しています。 [![HubSpotは無料でどこまでできるか](https://lifemarkety.com/hs-fs/hubfs/Canva%20images/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Oct-06-2024-10-15-01-1173-AM.png?width=96&height=54&name=%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Oct-06-2024-10-15-01-1173-AM.png)](https://lifemarkety.com/blog/hubspot-free) 【関連記事】[HubSpotは無料でどこまでできるか？](https://lifemarkety.com/blog/hubspot-free) 無料で使える機能一覧についてまとめてあります。 この記事を書いた人［[ABOUT](https://lifemarkety.com/about)］ IT・デジタルマーケティング領域で20年以上の実務経験。現在は、デジタルマーケティングの組織浸透や業務効率化を担当しています。 「予算がない」「人が足りない」「MAツールを入れたけれど活用しきれない」「営業の協力が得られない」といった、理想通りにいかない実務の壁を数多く経験。今日も奮闘中です。 [マーケティング施策](https://lifemarkety.com/blog/tag/マーケティング施策), [HubSpot](https://lifemarkety.com/blog/tag/hubspot) タグ別の記事 - [全て](https://lifemarkety.com/blog) - [マーケティング施策](https://lifemarkety.com/blog/tag/マーケティング施策) - [マーケティング戦略](https://lifemarkety.com/blog/tag/マーケティング戦略) - [SEO](https://lifemarkety.com/blog/tag/seo) - [HubSpot](https://lifemarkety.com/blog/tag/hubspot) - [KPI](https://lifemarkety.com/blog/tag/kpi) - [MAツール](https://lifemarkety.com/blog/tag/maツール) - [コンテンツマーケティング](https://lifemarkety.com/blog/tag/コンテンツマーケティング) - [マーケティング組織](https://lifemarkety.com/blog/tag/マーケティング組織) - [AIで稼ぐ｜マーケティング](https://lifemarkety.com/blog/tag/aiで稼ぐマーケティング) - [BtoBマーケティング](https://lifemarkety.com/blog/tag/btobマーケティング) - [ペルソナ・ジャーニー](https://lifemarkety.com/blog/tag/ペルソナ-ジャーニー) - [メールマーケティング](https://lifemarkety.com/blog/tag/メールマーケティング) - [データ分析](https://lifemarkety.com/blog/tag/データ分析) - [AIで増やす｜投資](https://lifemarkety.com/blog/tag/aiで増やす投資) - [ROI](https://lifemarkety.com/blog/tag/roi) - [ファンダメンタルズ](https://lifemarkety.com/blog/tag/ファンダメンタルズ) - [予算管理](https://lifemarkety.com/blog/tag/予算管理) - [初心者向け](https://lifemarkety.com/blog/tag/初心者向け) - [日本個別株](https://lifemarkety.com/blog/tag/日本個別株) - [用語集](https://lifemarkety.com/blog/tag/用語集) - [転職・起業・副業](https://lifemarkety.com/blog/tag/転職-起業-副業) ## 関連記事 [![](https://lifemarkety.com/hs-fs/hubfs/Canva%20images/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Nov-25-2024-01-02-07-2814-PM.png?height=200&name=%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Nov-25-2024-01-02-07-2814-PM.png)](https://lifemarkety.com/blog/hubspot-free-cms-set) [マーケティング施策](https://lifemarkety.com/blog/tag/%E3%83%9E%E3%83%BC%E3%82%B1%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E6%96%BD%E7%AD%96), [HubSpot](https://lifemarkety.com/blog/tag/hubspot) ## [HubSpotのContentHub無料版の設定方法と使い心地](https://lifemarkety.com/blog/hubspot-free-cms-set) 24/10/27 7:00 HubSpot Content Hubの無料版を活用して、ウェブサイトの構築から公開までの流れを解説します。Content... [続きを読む](https://lifemarkety.com/blog/hubspot-free-cms-set) [![](https://lifemarkety.com/hs-fs/hubfs/Canva%20images/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Nov-25-2024-01-59-44-8758-PM.png?height=200&name=%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Nov-25-2024-01-59-44-8758-PM.png)](https://lifemarkety.com/blog/blog-launch) [マーケティング施策](https://lifemarkety.com/blog/tag/%E3%83%9E%E3%83%BC%E3%82%B1%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E6%96%BD%E7%AD%96), [HubSpot](https://lifemarkety.com/blog/tag/hubspot) ## [完全無料！ContentHubでのブログ立ち上げまでを解説](https://lifemarkety.com/blog/blog-launch) 24/11/10 8:38 費用をかけずにブログをスタートする方法について、ドメインの取得からブログの立ち上げ、運用のステップまでの手順を詳しく解説します。 無料でブログを立ち上げ・運用を行いたい方向けの記事です。... [続きを読む](https://lifemarkety.com/blog/blog-launch) [![](https://lifemarkety.com/hs-fs/hubfs/Canva%20images/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Nov-25-2024-01-38-49-8323-PM.png?height=200&name=%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Nov-25-2024-01-38-49-8323-PM.png)](https://lifemarkety.com/blog/hubspot-free) [マーケティング施策](https://lifemarkety.com/blog/tag/%E3%83%9E%E3%83%BC%E3%82%B1%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E6%96%BD%E7%AD%96), [HubSpot](https://lifemarkety.com/blog/tag/hubspot) ## [HubSpotは無料でどこまでできるか？](https://lifemarkety.com/blog/hubspot-free) 24/10/26 7:15 当サイトは、HubSpotで構築しています。個人ブログはWordPressで作られていることが多いですが、職場で利用しているため、HubSpotの無料版で構築してみました。... [続きを読む](https://lifemarkety.com/blog/hubspot-free) [facebook-f icon](http://www.facebook.com/share.php?u=https://lifemarkety.com/blog/hubspot-free-cms-production) [X Twitter icon](https://twitter.com/intent/tweet?url=https://lifemarkety.com/blog/hubspot-free-cms-production) [![Life Markety fotter logo](https://lifemarkety.com/hs-fs/hubfs/logo-bs-1-1.png?width=100&height=89&name=logo-bs-1-1.png "Life Markety fotter logo")](https://lifemarkety.com/) サイトマップ [HOME](https://lifemarkety.com) [はじめてガ](https://lifemarkety.com/btob)[イド](https://lifemarkety.com/btob) [HubSpot活用ガイド](https://lifemarkety.com/hubspot) [ブログ](https://lifemarkety.com/blog) LifeMarkety AIで稼ぎ、AIで増やす｜マーケティングと投資の思考の整理 [お問い合わせをする](https://lifemarkety.com/inquiry) [ABOUT](https://lifemarkety.com/about) [プライバシーポリシー](https://lifemarkety.com/privacy)      Copyright ©LifeMarkety  ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Life Marekty", "url" : "https://lifemarkety.com/blog/author/lifemarkety" }, "dateModified" : "2025-01-04T12:16:44.250Z", "datePublished" : "2024-11-03T12:23:23.000Z", "headline" : "ContentHubで簡単にサイト構築！ページ制作の基本ガイド｜Life Marlety", "image" : [ "https://lifemarkety.com/hubfs/Canva%20images/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-Nov-25-2024-12-58-05-3168-PM.png" ], "mainEntityOfPage" : { "@id" : "https://lifemarkety.com/blog/hubspot-free-cms-production", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://lifemarkety.com/hubfs/logo/logo-w-1.png" }, "name" : "LifeMarkety" } } ```