---
title: ウェブサイトページの作り方。｜Hubspot CMS Hub
description: よくあるタイプのQA用アコーディオンのモジュールの作り方。CMS Hub（Hubspot CMS）：レベル1
---

[Hub研 Lab.（ハブケン ラボ）](https://www.hub-ken.net/lab)

# [ウェブサイトページの作り方。｜Hubspot CMS Hub](https://www.hub-ken.net/lab/simple-websitepage)

 作成者: [Shinobu Minabe](https://www.hub-ken.net/lab/author/shinobu-minabe)｜2022年1月月6日

モジュール表示テスト用のWebサイトページの作り方をご説明します。  
あくまでもテスト表示用なので、最低限の設定の説明に留まる内容となっています。

## ウェブサイトページ作成手順

Hubspot管理画面ヘッダー【マーケティング】→【ウェブサイト】→【ウェブサイトページ】を開きます。

「作成」ボタンから【ウェブサイトページ】を選択します。

ページ名を入力し「ページを作成」ボタンを押下します。

このウェブページで使うテンプレートを選びます。  
今回は、[Hub研Lab.内の関連記事](https://www.hub-ken.net/lab/simple-template)で作成したドラッグアンドドロップできるシンプルなテンプレート「Implement」を選択します。

ウェブサイトページの編集画面が表示されました。

【設定】に切り替えます。  
内部ページ名は上記で入力した文字情報が自動的に入力されていると思います。  
ページタイトルも任意の内容を入力します。  
コンテンツスラッグはURLの末尾にくるページのアドレスです。わかりやすいものにしましょう。  
メタディスクリプションも入力します。ページタイトルとメタディスクリプションは、SEO的に重要なのでしっかりと書くようにしましょう。

キービジュアル（OGP画像）は設定しないと公開ができませんので、画像を用意し設定します。  
Hubspot CMS Hubには、ブラウザ上でデザインができる「Canva」が付属されています。デザインテンプレートも多数用意されているので、画像を作る際は利用してみるといいと思います。

【コンテンツ】に切り替えます。

## モジュールを入れてみる。

共通のモジュールからお好きなモジュールを入れてみましょう。  
この記事では、[Hub研Lab.の記事内で作成したモジュール「accordion-level-1」](https://www.hub-ken.net/lab/accordion-1)を配置してみます。

モジュール「accordion-level-1」が配置された状態です。  
公開または更新ボタンを押下します。

今すぐページを更新ボタンを押下します。

URL箇所に書かれたテキストリンクから実際のページを確認してみます。  
[https://www.hub-ken.net/accordion-module](https://www.hub-ken.net/accordion-module)

任意のモジュールが表示されていれば、成功です。

[完全な記事を表示](https://www.hub-ken.net/lab/simple-websitepage)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Shinobu Minabe"
  },
  "dateModified" : "2022-01-28T00:57:47.138Z",
  "datePublished" : "2022-01-06T23:00:00Z",
  "headline" : "ウェブサイトページの作り方。｜Hubspot CMS Hub",
  "image" : {
    "@type" : "ImageObject",
    "height" : 1260,
    "url" : "https://f.hubspotusercontent30.net/hubfs/20691636/Canva%20images/websitepage.png",
    "width" : 2240
  },
  "mainEntityOfPage" : "https://www.hub-ken.net/lab/simple-websitepage",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "Hub研 Lab."
  }
}
```