ウェブサイトページの作成・更新手順

HubSpot CMS Hubではウェブサイトページを作成することができます。

編集は［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］から行います。

［ウェブサイトページ］をクリックすると既存のウェブサイトページ一覧画面が表示されます。

ウェブサイトページを「新規作成」する場合と、既存のウェブサイトページを「編集」する場合では編集画面に行くまでの手順が異なります。
それぞれ以下の手順で編集画面に進んでください。

ウェブサイトページを「新規作成」

ウェブサイトページを「編集」

ウェブサイトページの右上にある［作成］ボタンをクリック。

webpage_04

既存のウェブサイトページのタイトルにカーソルを乗せると表示される［編集］ボタンをクリック。

［ウェブサイト］では接続済みのドメインを選択してください。

［ページ名］には、内部ページ名を入力してください。（内部ページ名は管理用の名称となります。訪問者には表示されません）

ウェブサイト・ページ名を設定後、［ページを作成］をクリック。

webpage_05

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

webpage_07

テンプレート一覧画面が表示されますので、使用するテンプレートを選択してください。

webpage_06

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

webpage_07

HubSpotのウェブサイトページは「モジュールエリア」と「編集エリア」があります。

モジュールエリアには、ウェブサイトページを構成する「テキスト」「画像」「ボタン」などの要素（以降「モジュール」と呼びます）があります。

webpage_09

そのモジュールを、編集エリアにドラッグ＆ドロップで配置することでウェブサイトページを作ることができます。

webpage_08

（こちらの動画ではカーソルがうまく映っていませんが、見出しやテキストなどのモジュールをドラッグ＆ドロップして配置しています）

自社でカスタマイズした特殊なモジュールも、モジュールエリアに表示されます。

モジュールは横並びに設置することも可能です。

webpage_12

手動での配置もしくは、編集エリアに表示される緑色の＋ボタンをクリックすることで「レイアウト」が設定できます。レイアウトを選ぶと「ここにモジュールをドロップ」という枠が表示されますので、設置したいモジュールをドラッグ＆ドロップして配置します。

モジュールエリアにあるタブに「コンテンツ」タブがあります。

ここでは、編集エリアに配置したモジュールの並び（構造）がわかります。また、編集したいモジュールを直接指定できます。
（モジュールを設置した行・列をまとめた1つのブロックを「セクション」と呼びます）

webpage_13

配置したモジュールやセクションごと非表示にすることも可能です。
例えば一時的に非公開にしておきたいセクションなど、目のアイコンをクリックすることで表示・非表示を切り替えることができます。

コンテンツの中にグローバルアイコンが表示されている部分は、Webサイト全体で使用されている要素になります。
例えば下図の場合、ヘッダー・フッターはWebサイト全体で使用されています。

webpage_14

グローバルコンテンツエリアは、カーソルを乗せるとその範囲がオレンジ色になります。
クリックをすると「グローバルコンテンツエディターで開く」というボタンが表示されますので、グローバルコンテンツを編集する際は専用のページから編集を行ってください。

設定の画面では、ページのタイトルやURLなどを編集します。
「＊」マークは必須項目なので、必ず入力をしてください。

webpage_10

内部ページ名	管理用のページ名のため、訪問者には表示されません。管理しやすいページ名を設定してください。
ページタイトル	ページのタイトルになります。このページタイトルは、訪問者に表示されます。
ページの言語	ページの言語を変更する場合、設定してください。
ページURL	ページのタイトルは自動的に［URLスラッグ］に入力されますが編集できます。ページのURLは半角英数で入力してください。
メタディスクリプション	ページのコンテンツの説明を入力してください。メタディスクリプションは検索結果でページタイトルの下に表示されます。推奨文字数は155文字以内です。
キャンペーン	ページをHubSpotで作成したキャンペーンに関連付ける場合、該当のキャンペーンを設定してください。
キービジュアル	ソーシャルメディア（TwitterやFacebookなど）でページがシェアされた際に添付されるキービジュアルを設定できます。「キービジュアルの有効化」スイッチをオンに切り替え［アップロード］をクリックして画像をアップロード、もしくは［画像を参照］をクリックしてHubSpot上にアップロードされている画像から選択できます。