ページを作成し、カスタマイズする
更新日時 2023年 4月 11日
以下の 製品でご利用いただけます(別途記載されている場合を除きます)。
|
HubSpotでは、ウェブサイト用のウェブサイトページとランディングページを作成できます。ページのコンテンツや設定をカスタマイズしたり、検索エンジン向けにページを最適化したりできます。
始める前に
- 作成するページタイプの書き込み権限があることを確かめます。ページを公開するには、公開権限も必要になります。
- 公開用のページドメインがHubSpotに接続されていることを確かめてください。HubSpotの無料ツールを使用する場合は、公開に利用可能なHubSpotブランドのドメインがアカウントに含まれています。
- HubSpot上で利用可能なさまざまなタイプのページテンプレートについて確認します。
-
- スターターテンプレートには、ドラッグ&ドロップ操作による編集機能と、フォント、色、ボタンのスタイルをカスタマイズするためのオプションが組み込まれています。
- テーマテンプレートには、ドラッグ&ドロップ操作による編集機能、専用のテーマモジュール、カスタマイズ可能なテーマのスタイル設定があります。
- カスタムテンプレートは、デザインマネージャー内でレイアウトエディターまたはカスタムコードのいずれかを使って作成します。ドラッグ&ドロップ編集機能は、ドラッグ&ドロップエリアのあるカスタムテンプレートでのみ使用できます。
- ランディングページやウェブサイトページの作成可能数、使用可能なテンプレートなどをご確認ください。これはMarketing HubおよびCMS Hubのご契約内容に応じて決まります。
Marketing Hubのご契約なし | Marketing Hub Starter | 「Marketing Hub Professional/Enterprise」 | ||
CMS Hubのご契約なし |
ランディングページ:20ページまで(HubSpotロゴあり)、スターターテンプレートのみ ウェブサイトページ:25ウェブサイトページまで(HubSpotロゴあり)、全てのテンプレート |
ランディングページ:10,000ページまで、スターターテンプレートのみ ウェブサイトページ:25ウェブサイトページまで(HubSpotロゴあり)、全てのテンプレート |
ランディングページ:10,000ページまで、全てのテンプレート ウェブサイトページ:25ウェブサイトページまで(HubSpotロゴあり)、全てのテンプレート |
|
CMS Hub Starter |
ランディングページ:20ページまで(HubSpotロゴあり)、スターターテンプレートのみ ウェブサイトページ:50ページまで、全てのテンプレート |
ランディングページ:10,000ページまで、スターターテンプレートのみ ウェブサイトページ:50ページまで、全てのテンプレート |
ランディングページ:10,000ページまで、全てのテンプレート ウェブサイトページ:50ページまで、全てのテンプレート |
|
CMS Hub Professional/Enterprise |
ランディングページ:10,000ページまで、全てのテンプレート ウェブサイトページ:10,000ページまで、全てのテンプレート |
ランディングページ:10,000ページまで、全てのテンプレート ウェブサイトページ:10,000ページまで、全てのテンプレート |
ランディングページ:10,000ページまで、全てのテンプレート ウェブサイトページ:10,000ページまで、全てのテンプレート |
ページを作成する
-
コンテンツを開きます。
- ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
- 右上の[作成]ドロップダウンメニューをクリックし、[ウェブサイトページ]または[ランディングページ]を選択します。
- ダイアログボックスで、ページの名前とドメインを指定します。
- [ウェブサイト]ドロップダウンメニューをクリックし、ページのURLのドメインを選択します。接続済みのドメインが特にない場合は、アカウントの既定ドメインが唯一の選択肢となります。
- [ページ名]フィールドに、ページの内部名を入力します。
- [ページを作成]をクリックします。
- テンプレート選択画面では、有効なテーマのテンプレートがページの上部に表示され、その他の全てのテンプレートは下部の[他のテンプレート]セクションに表示されます。有効なテーマを選択していない場合は、テーマにカーソルを合わせ、[有効なテーマに設定]をクリックします。
- テンプレートにカーソルを合わせ、[テンプレートをプレビュー]をクリックしてプレビューを開くか、[テンプレートを選択]をクリックしてコンテンツエディターに進みます。
- コンテンツエディターの編集オプションは、使用しているページのテンプレートタイプやモジュールによって異なります。スターターテンプレートやテーマテンプレート、複数のページにまたがるグローバルコンテンツ、ドラッグ&ドロップエリア、リッチテキストモジュールや画像モジュールを使ったページの編集について詳細をご確認ください。
- ページの設定をカスタマイズするには、コンテンツエディターの上部にある[設定]タブをクリックして、設定を編集します。
-
- ページの内部名を変更するには、[内部ページ名]フィールドに名前を入力します。この名前は訪問者には表示されません。
- [ページタイトル]フィールドに、ページの外部名を入力します。この名前は、ページが読み込まれると、訪問者のウェブブラウザーの最上部にあるタブに表示されます。
- ページの言語を設定するには、[ページの言語]ドロップダウンメニューをクリックし、言語を選択します。詳しくは、多言語ページの管理をご確認ください。
- [ページURL]セクションで、[コンテンツスラッグ]フィールドをクリックすると、ページのタイトルが自動的にURLスラッグになります。URLをカスタマイズするには、[コンテンツスラッグ]フィールドに新しいURLスラッグを入力します。詳しくは、ページのURLの編集をご確認ください。

-
- [メタディスクリプション]フィールドに、検索結果でページタイトルの下に表示される、ページのコンテンツの説明を入力します。
- ページをHubSpot上のキャンペーンに関連付けるには、[キャンペーン]ドロップダウンメニューをクリックし、キャンペーンを選択します。または、新しいキャンペーンを作成するには、[新規追加]を選択します。詳しくは、HubSpotでのキャンペーンの使い方をご確認ください。
- ソーシャルメディアでページがシェアされた際に添付されるキービジュアルを追加するには、[キービジュアル]スイッチをクリックしてオンに切り替えます。[アップロード]をクリックしてご使用のコンピューターから画像を選択するか、[画像を参照]をクリックしてファイルツールから画像を選択します。
-
- ページテンプレート、表示対象、HeadのHTMLなど、高度な設定をカスタマイズするには、[詳細オプション]セクションをクリックして開きます。詳しくは、詳細オプションのカスタマイズをご確認ください。
- ページにトピックまたはサブトピックのキーワードを付け、SEOの推奨事項を表示するには、[最適化]タブをクリックします。詳しくは、検索エンジン向けにページを最適化する方法をご覧ください。
- ページのコンテンツと設定のカスタマイズが完了したら、[公開オプション]タブをクリックし、公開オプションを設定します。
- ページを今すぐ公開するには、[今すぐ公開]オプションを選択します。
- ページを後で公開するには、[後の予定としてスケジュール]オプションを選択します。表示されたフィールドで、ページを公開する日時を選択します。
- 特定の時期が来たら自動的にページを非公開にするには、[特定の日付にページを非公開]チェックボックスを選択します。表示されたフィールドで、ページを非公開にする日時を設定し、ドロップダウンメニューを使ってこのページのリダイレクト先(転送先)ページを選択します。
- ページを公開する前に、右上の[プレビュー]をクリックしてプレビューすることができます。詳しくは、ページをプレビューする方法をご確認ください。
- ページを公開、または公開スケジュールを設定する準備ができたら、右上の[公開]または[スケジュール]をクリックします。
- HubSpotアカウントで、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]または[マーケティング]>[ランディングページ]の順に進みます。
- ページの上で、[編集]をクリックします。
- コンテンツエディターで、編集が完了したら右上の[更新]または[スケジュール]をクリックします。
検索エンジン向けにページを最適化する
コンテンツエディターの[最適化]タブでは、ページのSEO推奨を表示したり、ページをトピックに添付したりできます。
-
コンテンツを開きます。
- ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
- ページの上で、[編集]をクリックします。
- コンテンツエディターで、[最適化]タブをクリックします。
- ページがトピックやサブトピックに添付されている場合は、サイドバーエディターに表示されます。ページをトピックやサブトピックに添付する方法をご確認ください。
- 未対応のSEO推奨を表示するには、サイドバーエディターで赤丸の付いたカテゴリーをクリックします。完了した各推奨事項には緑のチェックマークが付きます。未完了の各推奨にはグレーのチェックマークが付きます。詳しくは、SEO推奨をご確認ください。

ページの詳細オプションのカスタマイズ
[設定]タブの[詳細オプション]では、ページテンプレート、コードスニペット、スタイルシートなど、詳細な設定をカスタマイズできます。
注:スターターテンプレートを使用したページには詳細はありません。
-
コンテンツを開きます。
- ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
- ページの上で、[編集]をクリックします。
- コンテンツエディターで、[設定]タブをクリックし、[詳細オプション]をクリックします。
- ページの表示対象を変更するには、[ページのオーディエンスアクセスを管理]セクションでオプションを選択します。
- どの訪問者でもページのコンテンツを閲覧できるようにするには、[公開]を選択します。
- 訪問者がページコンテンツにアクセスするために必須となるパスワードを追加するには、[非公開 - パスワードが必要]を選択します。
- CMS Hub Enterpriseをご利用の場合は、[非公開 - 登録が必要]を選択して、このコンテンツの閲覧に際し、訪問者にサイトへの登録を求めることもできます。
- このページのHeadまたはフッターのHTMLにコードスニペットを追加するには、[HeadのHTML]フィールドまたは[フッターHTML]フィールドをクリックして、コードスニペットを入力します。または、特定のドメインの全てのページにコードスニペットを追加するには、ウェブサイトの設定にアクセスします。
- このページを動的なページにするには、[データソース]ドロップダウンメニューをクリックし、HubDBテーブルまたはプロパティーを選択します。詳しくは、動的ページの使い方をご確認ください。
- [テンプレート]セクションでは、このページに使用しているテンプレートを編集したり、ページ用に別のテンプレートを選択したりすることができます。
- 別のテンプレートを選択するには、[別のテンプレートを使用]をクリックします。公開中のページのテンプレートを切り替える場合は、未公開の変更を反映させるために必ず[更新]をクリックしてください。この操作を行わないと、テンプレートの切り替え時に変更が失われる可能性があります。
- テーマ選択画面で、テーマを選択します。
- テンプレート選択画面で、テンプレートを選択します。
- 新しいテンプレートを使ったページの表示をプレビューしたら、[テンプレートを使用]をクリックしてテンプレートの切り替えを完了するか、[戻る]をクリックして別のテンプレートを選択します。
- [スタイルシート]セクションでは、ページに添付するスタイルシートを管理できます。詳しくは、HubSpotでのスタイルシートの使い方をご確認ください。
- ドメインスタイルシート:ウェブサイト設定では、特定のドメイン内の全ページに添付するスタイルシートを追加できます。既定で、ドメインスタイルシートがページに適用されます。特定のページについてドメインスタイルシートをオフにするには、ドロップダウンメニューをクリックし、[無効]を選択します。詳しくは、ドメインスタイルシートの使い方をご確認ください。
- テンプレートスタイルシート:ページのテンプレートに適用されているスタイルシートがここに表示されます。既定で、テンプレートスタイルシートがページに適用されます。特定のページについてテンプレートスタイルシートをオフにするには、ドロップダウンメニューをクリックし、[無効]を選択します。このセクションは、テーマテンプレートを使用しているページには表示されません。
- ページスタイルシート:[スタイルシートを添付]をクリックします。ドメインスタイルシートやテンプレートスタイルシートも使用されている場合は、そのスタイルが優先されます。

- カスタムのcanonical URLを追加するには、[canonical URLをカスタマイズ]フィールドにURLを入力します。詳しくは、canonical URLの使用をご確認ください。
ページのプレビュー
ページを公開する前に、さまざまなデバイスタイプでのプレビューや、スマートコンテンツとパーソナライズのテストができます。詳しくは、モバイルデバイス用にページの表示をカスタマイズする方法をご確認ください。
-
コンテンツを開きます。
- ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
- ページの上で、[編集]をクリックします。
- コンテンツエディターで、右上の[プレビュー]をクリックします。
- ページをウィンドウ全体でプレビューするには、右上の[新しいウィンドウで開く]をクリックします。このプレビューページをHubSpotアカウントの他のユーザーと共有するには、プレビューページの[共有可能なリンクをコピー]をクリックします。ユーザーはこのプレビューを表示するために、HubSpotにログインしている必要があります。
- 別のデバイスでのプレビューを行うには、プレビューページの右上にあるmobile デバイスのアイコンをクリックします。
- パーソナライズやスマートコンテンツをプレビューするには、[プレビュー動作]ドロップダウンメニューをクリックします。