ページを作成し、カスタマイズする

HubSpotでは、ウェブサイトのページとランディングページを作成できます。ページのコンテンツや設定をカスタマイズしたり、検索エンジン向けにページを最適化したりできます。 

始める前に

• 作成するページタイプの書き込み権限があることを確かめます。ページを公開するには、公開権限も必要になります。 
• ページドメインが HubSpotに接続され、公開されていることを確認します。HubSpotの無料ツールを使用する場合は、公開に利用可能なHubSpotブランドのドメインがアカウントに含まれています。
• HubSpot上で利用可能なさまざまなタイプのページテンプレートについて確認します。 

• • スターターテンプレートには、ドラッグ＆ドロップ編集機能と、フォント、色、ボタンのスタイルをカスタマイズするオプションが含まれています。スターターテンプレートでは、スマートコンテンツ、カスタムモジュール、パーソナライズ、リッチ テキスト モジュール内のソースコードへのアクセス、パスワード保護されたページを使用できません、また、テンプレートスワッピング、ヘッダーHTMLへのアクセスといった高度なオプションもサポートしていません。
  • テーマテンプレートサポートドラッグ＆ドロップ編集機能、ユニークなテーマモジュール、カスタマイズ可能なテーマスタイル設定 .
  • カスタムテンプレートは、デザインマネージャー内でレイアウトエディターまたはカスタムコードのいずれかを使って作成します。ドラッグ＆ドロップ編集機能は、ドラッグ＆ドロップエリアのあるカスタムテンプレートでのみ使用できます。 
• 作成できるランディングページやウェブサイトページの数と、使用可能なテンプレートをご確認ください。作成可能なページ数と使用できるテンプレートは、Marketing HubおよびCMS Hubのご契約内容に応じて決まります。 

ページを作成する

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。
• 右上の［作成］ドロップダウンメニューをクリックし、ウェブサイトページまたはランディングページを選択します。
• ダイアログボックスで、ページの名前とドメインを指定します。 
  • ［ウェブサイト］ドロップダウンメニューをクリックし、ページのURLのドメインを選択します。接続ドメインがない場合、アカウントのデフォルトシステムドメインが唯一の選択肢となります。
  • ［ページ名］フィールドに、ページの内部名を入力します。 
  • ［ページを作成］をクリックします。 

• テンプレート選択画面では、アクティブテーマのテンプレートが上部に表示され、それ以外のテンプレートは、下部のその他のテンプレートのセクションに表示されます。有効なテーマを選択していない場合は、テーマにカーソルを合わせ、［有効なテーマに設定］をクリックします。
• テンプレートにカーソルを合わせ、［テンプレートをプレビュー］をクリックしてプレビューを開くか、［テンプレートを選択］をクリックしてコンテンツエディターに進みます。

• コンテンツエディターの編集オプションは、使用しているページのテンプレートタイプやモジュールによって異なります。スターターまたはテーマテンプレート、複数のページにまたがるグローバルコンテンツ、ドラッグ＆ドロップエリア、リッチテキストまたはイメージモジュールを使用したページの編集について詳しく説明します。 

ページの設定をカスタマイズする

ページのコンテンツを編集したら、URL、メタディスクリプション、言語などのページ属性をカスタマイズできます。 

基本的なページ設定をカスタマイズする

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。
• ページの上にカーソルを重ねて［編集］をクリックします。 

• ［設定］メニューをクリックし、［全般］を選択します。 
• ダイアログボックスで、［内部ページ名］フィールドに内部名を入力します。この名前は訪問者には表示されません。 
• ［ページタイトル］フィールドに、ページの外部名を入力します。この名前は、ページが読み込まれると、訪問者のウェブブラウザーの最上部にあるタブに表示されます。 
• ［ページURL］セクションで、［ドメイン］ドロップダウンメニューをクリックし、ページをホスティングするドメインを選択します。次に、［コンテンツスラッグ］フィールドにURLスラッグを入力します。詳しくは、ページのURLの編集をご確認ください。 
• ［メタディスクリプション］フィールドに、検索結果でページタイトルの下に表示される、ページのコンテンツの説明を入力します。 
• ページをキャンペーンに関連付けるには、［キャンペーン］ドロップダウンメニューをクリックし、キャンペーンを選択します。または、新しいキャンペーンを作成するには、［新規追加］を選択します。

キービジュアルを設定する

ソーシャルメディアでページがシェアされる場合に表示するキービジュアルを追加するには：

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。
• ページの上にカーソルを重ねて［編集］をクリックします。 
• ［設定］メニューをクリックし、［キービジュアル］を選択します。
• ダイアログボックスで、［キービジュアルを有効にする］スイッチをクリックしてオンに切り替えます。
• ［アップロード］をクリックしてご使用のコンピューターから画像を選択するか、［画像を参照］をクリックしてファイルツールで画像を選択します。
• アクセシビリティーを高めるには、［画像のaltテキスト］フィールドに画像の説明を入力します。

ページテンプレートを変更する

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。
• ページの上にカーソルを重ねて［編集］をクリックします。 
• ［設定］メニューをクリックし、［テンプレート］を選択します。
• ダイアログボックスで、別のテンプレートを選択するには［別のテンプレートを使用］をクリックします。公開中のページのテンプレートを切り替える場合は、未公開の変更を反映させるために必ず［更新］をクリックしてください。この操作を行わないと、テンプレートの切り替え時に変更が失われる可能性があります。
• テーマ選択画面で、テーマを選択します。
• テンプレート選択画面で、テンプレートを選択します。
• 新しいテンプレートを使ったページの表示をプレビューしたら、［テンプレートを使用］をクリックしてテンプレートの切り替えを完了するか、［戻る］をクリックして別のテンプレートを選択します。 

ページ言語を設定する

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。
• ページの上にカーソルを重ねて［編集］をクリックします。 
• ［設定］メニューをクリックし、［言語］を選択します。
• ダイアログボックスで、［ページ言語］ドロップダウンメニューをクリックし、言語を選択します。詳しくは、多言語ページの管理をご確認ください。 

ページの可視性を設定する

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。
• ページの上にカーソルを重ねて［編集］をクリックします。 
• コンテンツエディターで［設定］メニューをクリックし、［オーディエンスアクセス］を選択します。
• ダイアログボックスで、オーディエンス アクセス オプションを選択します。 
  • どの訪問者でもページのコンテンツを閲覧できるようにするには、［公開］を選択します。
  • 訪問者がページコンテンツにアクセスするために必須となるパスワードを追加するには、［非公開 - パスワードが必要］を選択します。
  • 「CMS Hub Enterprise」アカウントをご利用の場合は、［非公開 - 登録が必要］を選択して、このコンテンツの閲覧に際し、訪問者にサイトへの登録を求めることもできます。 
  • CMS Hub EnterpriseまたはMarketing Hub Enterpriseアカウントでは、［非公開 - シングルサインオン（SSO）が必要］を選択して、訪問者にGoogleやOktaなどのIDプロバイダーでのサインインを求めることができます。 

ページの詳細オプションを設定する

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。
• ページの上にカーソルを重ねて［編集］をクリックします。 
• ［設定］メニューをクリックし、［詳細］を選択します。
• このページを動的なページにするには、ダイアログボックスで［データソース］ドロップダウンメニューをクリックし、HubDBテーブルまたはプロパティーを選択します。詳しくは、動的ページの使い方をご確認ください。 
• ページのHeadまたはフッターのHTMLにコードスニペットを追加するには、［ヘッダーHTML］フィールドまたは［フッターHTML］フィールドをクリックして、コードスニペットを入力します。または、特定のドメインの全てのページにコードスニペットを追加するには、ウェブサイトの設定にアクセスします。
• カスタムのcanonical URLを追加するには、［canonical URLをカスタマイズ］フィールドにURLを入力します。カノニカルURLの使用について詳しくはこちらをご覧ください。
• ページに関連付けられる、されたさまざまなタイプのスタイルシートを管理します。 
  • ドメインスタイルシート：これらのスタイルシートは、ウェブサイト設定で指定されている1つのドメイン上の全てのページに関連付けられます。特定のページについてドメインスタイルシートをオフにするには、ドロップダウンメニューをクリックし、［無効］を選択します。ドメインスタイルシートの扱いについて詳しく説明します。
  • テンプレートスタイルシート：これらのスタイルシートは、ページのテンプレートで設定されます。特定のページについてテンプレートスタイルシートをオフにするには、ドロップダウンメニューをクリックし、［無効］を選択します。このセクションは、テーマテンプレートを使用しているページには表示されません。 
  • ページスタイルシート：これらのスタイルシートは、当該ページだけに適用されます。ページスタイルシートを添付するには、［スタイルシートを添付］ドロップダウンメニューをクリックし、関連付けるスタイルシートを選択します。ドメインスタイルシートやテンプレートスタイルシートも使用されている場合は、そのスタイルが優先されます。 

ページを公開する

ページのコンテンツと設定をカスタマイズしたら、ページをすぐに公開したり、後でページを公開するようにスケジュールしたりできます。

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。
• ページの上にカーソルを重ねて［編集］をクリックします。 
• ページをすぐに公開するには、右上の［公開］をクリックします。
• 後でページを公開するようにスケジュールするには： 
  • 右上の［公開］ボタンの隣にあるドロップダウンメニューをクリックし、［公開オプション］を選択します。
  • ダイアログボックスで、［公開を予定としてスケジュール］チェックボックスをオンにします。 

• • ［日付］フィールドをクリックし、ページを公開する日付を選択します。 
  • ［時刻］フィールドをクリックし、ページを公開する時刻を選択します。 

• • ［スケジュール］をクリックします。または、［スケジュールして編集を続ける］をクリックすると、ページの公開をスケジュールした上で、コンテンツエディターに戻ることができます。 

• 特定の時期が来たら自動的にページを非公開にするには：
  • 右上の［公開］ボタンの隣にあるドロップダウンメニューをクリックし、［公開オプション］を選択します。

• • ダイアログボックスで、［公開終了スケジュールを設定］タブをクリックします。 
  • ［公開終了スケジュールを設定］チェックボックスをオンにします。 
  • ［日付］フィールドをクリックし、ページの公開を終了する日付を選択します。 
  • ［時刻］ドロップダウンメニューをクリックし、ページの公開を終了する時刻を選択します。 
  • ［ページの公開が終了になると、訪問者を次の場所へリダイレクト（転送）：］ドロップダウンメニューをクリックし、リダイレクト先のページを選択します。外部宛先URLを使用するには、ドロップダウンメニューをクリックし、［外部URLを入力］を選択します。ダイアログボックスで、URLを入力し、［保存］をクリックします。 
  • ［今すぐ更新］をクリックします。

検索エンジン向けにページを最適化する

サイドバーエディターの［最適化］セクションで、ページのSEO推奨を表示したり、ページをトピックに関連付けしたりできます。 

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。
• ページの上で、［編集］をクリックします。 
• コンテンツエディターで、左のサイドバーにあるgauge ［最適化］アイコンをクリックします。 
• コンテンツをトピックと関連付けるには： 
  • 既存のトピックを追加するには、［トピック］ドロップダウンメニューをクリックし、ページのトピックを選択します。
  • 新しいトピックを作成するには、［トピック］ドロップダウンメニューをクリックし、［コアトピックを追加］を選択します。ダイアログボックスで、トピックを入力し、［保存］をクリックします。
• ページをサブトピックキーワードに関連付けるには：
  • ［これはサポートコンテンツですか？］チェックボックスを選択します。
  • ［サブトピックキーワード］ドロップダウンメニューをクリックし、サブトピックキーワードを選択します。
  • 新しいキーワードを作成するには、［サブトピックキーワード］ドロップダウンメニューをクリックし、［サブトピックキーワードを追加］をクリックします。ダイアログボックスで、サブトピックキーワードを入力し、［保存］をクリックします。 

• 不完全なSEOの推奨を表示するには、赤丸のついたカテゴリーをクリックします。完了した各推奨事項には緑のチェックマークが付きます。未完了の各推奨にはグレーのチェックマークが付きます。SEO推奨を利用する方法について詳細をご確認ください。 

ページのプレビュー

ページを公開する前に、さまざまなデバイスタイプでのプレビューや、スマートコンテンツとパーソナライズのテストができます。詳しくは、モバイルデバイス用にページの表示をカスタマイズする方法をご確認ください。 

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。
• ページの上で、［編集］をクリックします。 
• コンテンツエディターで、右上の［プレビュー］をクリックします。 
• ページ全体をプレビューするには、右上の［新しいウィンドウで開く］をクリックします。このプレビューページをHubSpotアカウントの他のユーザーと共有するには、プレビューページで［リンクをコピー］をクリックします。ユーザーはこのプレビューを表示するために、HubSpotにログインしている必要があります。
• 別のデバイスでの表示をプレビューするには、プレビューページの右上にあるmobileデバイスアイコンをクリックします。 

• パーソナライズやスマートコンテンツをプレビューするには、［プレビュー動作］ドロップダウンメニューをクリックします。 
  • ページのパーソナライズをプレビューするには、［コンタクト］を選択します。次に、2つ目のドロップダウンメニューをクリックし、特定のコンタクトを選択すると、そのコンタクトに対してページがどのように表示されるかをプレビューできます。 
  • ページのスマートコンテンツをプレビューするには、［スマートルール］を選択します。次に、2つ目のドロップダウンメニューをクリックし、1つ以上のスマートルールを選択すると、そのルールに適合した訪問者に対してページがどのように表示されるかをプレビューできます。
  • ページの既定の外観に戻すには、［リセット］をクリックします。