ページを作成し、カスタマイズする
更新日時 2023年 6月 16日
以下の 製品でご利用いただけます(別途記載されている場合を除きます)。
|
HubSpot では、ウェブサイトとランディングページを作成することができます。ページの内容や設定をカスタマイズしたり、検索エンジン向けにページを最適化することも可能です。
始める前に
- 作成するページタイプの書き込み権限があることを確かめます。ページを公開するには、公開権限も必要になります。
- ページドメインが HubSpotに接続され、公開されていることを確認します。HubSpotの無料ツールを使用する場合は、公開に利用可能なHubSpotブランドのドメインがアカウントに含まれています。
- HubSpot上で利用可能なさまざまなタイプのページテンプレートについて確認します。
-
- スターターテンプレートドラッグ&ドロップ編集機能と、フォント、色、ボタンのスタイルをカスタマイズするオプションが含まれています。
- テーマテンプレートサポートドラッグ&ドロップ編集機能、ユニークなテーマモジュール、カスタマイズ可能なテーマスタイリング .
- カスタムテンプレートは、デザインマネージャーで、レイアウトエディターまたは、カスタムコードを使って作成します。ドラッグ&ドロップ編集機能は、ドラッグ&ドロップエリアを持つカスタムテンプレートでのみ利用可能です。
- 作成できるランディングページやウェブサイトページの数、使用できるテンプレートを把握する。これは、Marketing HubおよびCMS Hubの契約内容によって決まります:
Marketing Hubの加入はありません。 | Marketing Hub Starter | 「Marketing Hub Professional/Enterprise」 | ||
CMS Hubの契約はありません。 | ランディングページ : HubSpotのブランディングを施した20ページまで、スターターテンプレートのみ。 ウェブサイトページ : HubSpotのブランディングを施したウェブサイトページを25ページまで、すべてのテンプレートを使用可能 | ランディングページ : 10,000ページまで、スターターテンプレートのみ。 ウェブサイトページ : HubSpotのブランディングを施したウェブサイトページを25ページまで、すべてのテンプレートを使用可能 | ランディングページ : 10,000ページまで、全テンプレート。 ウェブサイトページ : HubSpotのブランディングを施したウェブサイトページを25ページまで、すべてのテンプレートを使用可能 | |
CMS Hub Starter | ランディングページ : HubSpotのブランディングを施した20ページまで、スターターテンプレートのみ。 ウェブサイトページ : 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のドメインを選択します。接続ドメインがない場合、アカウントのデフォルトシステムドメインが唯一の選択肢となります。
- [ページ名]フィールドに、ページの内部名を入力します。
- [ページを作成]をクリックします。
- テンプレート選択画面では、アクティブテーマのテンプレートが上部に表示され、それ以外のテンプレートは、下部のその他のテンプレートのセクションに表示されます。アクティブテーマを選択していない場合は、テーマにカーソルを合わせて、Set asactive themeをクリックしてください。
- テンプレートにカーソルを合わせ、[テンプレートをプレビュー]をクリックしてプレビューを開くか、[テンプレートを選択]をクリックしてコンテンツエディターに進みます。
- コンテンツエディターの編集オプションは、使用しているページのテンプレートタイプやモジュールによって異なります。スターターまたはテーマテンプレート、複数ページにまたがるグローバルコンテンツ、ドラッグ&ドロップエリア、リッチテキストまたはイメージモジュールを使ったページの編集について詳しく説明しています。
ページ設定のカスタマイズ
ページコンテンツを編集したら、URL、meta description、言語などのページ属性をカスタマイズすることができます。
ページの基本設定をカスタマイズする
-
コンテンツを開きます。
- ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
- ページの上にカーソルを重ねて[編集]をクリックします。
- ファイル]メニューをクリックし、[ページ設定]を選択します。
- ダイアログボックスで、内部ページ名を内部ページ名のフィールドに入力します。この名前は訪問者には表示されません。
- ページタイトルの欄には、ページの外部名称を入力します。この名前は、ページが読み込まれると、訪問者のウェブブラウザーの最上部にあるタブに表示されます。
- ページのURL」セクションで、「ドメイン」ドロップダウンメニューをクリックし、ページがホスティングされるドメインを選択します。次に、「Content slug 」フィールドにURLスラッグを入力します。詳しくは、ページのURLの編集をご確認ください。
- Meta descriptionの欄には、検索結果でページタイトルの下に表示される、ページの内容の説明を入力します。
- ページをキャンペーンに関連付けるには、キャンペーンドロップダウンメニューをクリックし、キャンペーンを選択してください。代わりに新しいキャンペーンを作成するには、Add newを選択します。
フィーチャーイメージを設定する
ページがソーシャルメディアで共有されたときに含まれる特集画像を追加する場合:
-
コンテンツを開きます。
- ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
- ページの上にカーソルを重ねて[編集]をクリックします。
- ファイル]メニューをクリックし、[ページ設定]を選択します。
- ダイアログボックスで、左サイドバーメニューの「注目画像」をクリックします。
- クリックすると、Enabled featured imageスイッチがオンに切り替わります。アップロードをクリックしてコンピューターから画像を選択するか、画像の参照をクリックしてファイルツールから画像を選択します。アクセシビリティーを高めるために、画像の説明を「画像のaltテキスト」欄に入力してください。
ページテンプレートを変更する
-
コンテンツを開きます。
- ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
- ページの上にカーソルを重ねて[編集]をクリックします。
- ファイル]メニューをクリックし、[ページ設定]を選択します。
- ダイアログボックスで、左サイドバーメニューの「テンプレート」をクリックします。
- 別のテンプレートを選択する場合は、「別のテンプレートを使用する」をクリックします。公開ページのテンプレートを変更する場合は、必ず「更新」、「今すぐ更新」の順にクリックして、未公開の変更を本番に反映させてください。この操作を行わないと、テンプレートの切り替え時に変更が失われる可能性があります。
- テーマ選択画面で、テーマを選択します。
- テンプレート選択画面で、テンプレートを選択します。
- 新しいテンプレートでページがどのように見えるかをプレビューし、テンプレートの切り替えを完了する場合は「テンプレートを使用」を、別のテンプレートを選択する場合は「戻る」をクリックします。
ページの言語を設定する
-
コンテンツを開きます。
- ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
- ページの上にカーソルを重ねて[編集]をクリックします。
- ファイル]メニューをクリックし、[ページ設定]を選択します。
- ダイアログボックスで、左サイドバーメニューの「言語」をクリックします。
- Page language ドロップダウンメニューをクリックし、言語を選択します。詳しくは、多言語ページの管理をご確認ください。
ページの視認性を設定する
-
コンテンツを開きます。
- ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
- ページの上にカーソルを重ねて[編集]をクリックします。
- ファイル]メニューをクリックし、[ページ設定]を選択します。
- ダイアログボックスで、左サイドバーメニューの「Audience Access 」をクリックします。
- オーディエンスアクセスオプションを選択します:
- ページの内容をすべての訪問者が利用できるようにするには、「公開」を選択します。
- 非公開- パスワードが必要」を選択して、訪問者がページのコンテンツにアクセスする際に必要なパスワードを追加します。
- CMS Hub Enterpriseアカウントでは、Private - Registrationrequiredを選択して、訪問者にサイトへの登録を要求することもできますこのコンテンツを表示するために。
- CMS ハブ EnterpriseやMarketing Hub Enterpriseアカウントでは、非公開- シングルサインオン(SSO)必須を選択して、訪問者にGoogleやOktaなどのIDプロバイダーでのサインインを要求することができます。
ページオプションの詳細設定
-
コンテンツを開きます。
- ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
- ページの上にカーソルを重ねて[編集]をクリックします。
- ファイル]メニューをクリックし、[ページ設定]を選択します。
- ダイアログボックスで、左サイドバーメニューの[詳細設定]をクリックします。
- このページを動的ページにするには、データソースドロップダウンメニューをクリックし、HubDBのテーブルまたはプロパティーを選択します。ダイナミックページの操作について詳しく説明します。
- ページのヘッドまたはフッターHTMLにコードスニペットを追加するには、ヘッドHTML またはフッターHTML フィールドをクリックし、コードスニペットを入力します。代わりにドメイン上のすべてのページにコードスニペットを追加するには、、ウェブサイトの設定にアクセスします。
- カスタムのcanonical URLを追加するには、[canonical URLをカスタマイズ]フィールドにURLを入力します。カノニカルURLの使用について詳しくはこちらをご覧ください。
- ページに添付されているさまざまな種類のスタイルシートを管理するためです:
- ドメインスタイルシート:これらのスタイルシートは、ウェブサイト設定で単一ドメインの全ページに添付されます。特定のページのドメインスタイルシートをオフにするには、ドロップダウンメニューをクリックし、「Disabled」を選択します。ドメインスタイルシートの扱いについて詳しく説明します。
- テンプレートスタイルシート:これらのスタイルシートは、ページのテンプレートによって設定されます。特定のページのテンプレートスタイルシートをオフにするには、ドロップダウンメニューをクリックし、「Disabled」を選択します。このセクションは、テーマテンプレートを使用しているページには表示されません。
- ページスタイルシート:これらのスタイルシートは、このページにのみ適用されます。ページのスタイルシートを添付するには、「スタイルシートを添付する」ドロップダウンメニューをクリックし、スタイルシートを選択します。ドメインスタイルシートやテンプレートスタイルシートも使用されている場合は、そのスタイルが優先されます。
ページを公開する
ページのコンテンツと設定をカスタマイズしたら、ページを公開したり、将来の公開を予約したりすることができます:
-
コンテンツを開きます。
- ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
- ページの上にカーソルを重ねて[編集]をクリックします。
- ページをすぐに公開する場合:
- 右上の「Publish」をクリックします。
- ダイアログボックスで、「Publish now」をクリックします。
- ページを後で公開するためのスケジュールを設定する:
- 右上の、Publishボタンの隣にあるドロップダウンメニューをクリックし、Publishing options を選択します。
- ダイアログボックスで、「公開を後でスケジュールする」チェックボックスを選択します。
-
- 日付フィールドをクリックし、ページが公開される日付を選択します。
- 時間ドロップダウンメニューをクリックし、ページが公開される時間を選択します。
-
- スケジュールをクリックするか、スケジュールと編集の続きをクリックしてページの公開をスケジュールし、コンテンツエディターに戻ります。
- 将来、自動的にページが公開されないように設定すること:
- 右上の、Publishボタンの隣にあるドロップダウンメニューをクリックし、Publishing options を選択します。
-
- ダイアログボックスで、Schedule unpublishタブをクリックします。
- スケジュール公開解除チェックボックスを選択します。
- 日付フィールドをクリックし、ページが公開される日付を選択します。
- 時間ドロップダウンメニューをクリックし、お客様のページが公開される時間を選択します。
- ページ公開時に、訪問者をドロップダウンメニューにリダイレクトするページを選択するをクリックします。外部の宛先URLを使用するには、ドロップダウンメニューをクリックし、Enter an external URLを選択します。ダイアログボックスで、URLを入力し、Saveをクリックします。
- 今すぐ更新するをクリックするか、更新して編集を続けるをクリックすると、ページの公開を中止してコンテンツエディターに戻る予定です。
検索エンジン向けにページを最適化する
サイドバー エディターの [最適化] セクションでは、ページの SEO 推奨事項を表示するまたはトピックに添付することができます。
-
コンテンツを開きます。
- ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
- ページの上で、[編集]をクリックします。
- コンテンツエディターで、左サイドバーのgauge Optimizeのアイコンをクリックします。
- トピックにコンテンツを添付するには:
- 既存のトピックを追加するには、「トピック」ドロップダウンメニューをクリックし、ページ用のトピックを選択します。
- 新しいトピックを作成するには、「トピック」ドロップダウンメニューをクリックし、「コアトピックの追加」を選択します。ダイアログボックスで、トピックを入力し、[ 保存 ] をクリックします。
- サブトピックのキーワードにページを添付するには、 :
- [これはサポートコンテンツですか?]チェックボックスを選択します。
- サブトピック・キーワードドロップダウンメニューをクリックし、サブトピックキーワードを選択します。
- 新しいキーワードを作成するには、サブトピック・キーワードのドロップダウンメニューをクリックし、サブトピック・キーワードを追加するをクリックします。ダイアログボックスで、サブトピックのキーワードを入力し、[保存]をクリックします。
- 不完全なSEOの推奨を表示するには、赤丸のついたカテゴリをクリックします。完了した各推奨事項には緑のチェックマークが付きます。未完了の各推奨にはグレーのチェックマークが付きます。SEOのすすめで働くことについてもっと詳しく知ることができます。

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