メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Landing Pages

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

更新日時 2021年 11月 25日

対象製品

すべての製品とプラン

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

始める前に

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

ページを作成する

  • コンテンツに移動します。

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

create-a-page-dialog-box

  • テンプレート選択画面では、有効なテーマのテンプレートがページの上部に表示され、それ以外のすべてのテンプレートは下部の[他のテンプレート]セクションに表示されます。テンプレートをクリックします。有効なテーマを選択していない場合は、テーマを選択するか、[スキップしてテンプレートに移動]をクリックして既存のテンプレートを選択するよう促されます。
  • 選択したテンプレートでページを作成するには、右上の[このテンプレートを選択]をクリックします。モバイルまたはデスクトップでのページプレビューを行うには、[プレビュー]をクリックします。 

select-a-template-to-create-page

  • テンプレートを選択すると、コンテンツエディターが表示されます。使用可能な編集オプションは、使用しているページのテンプレートタイプやモジュールによって異なります。Starterテンプレートやテーマテンプレート、複数のページにまたがるグローバルコンテンツドラッグ&ドロップエリアリッチテキストモジュールや画像モジュールを使ったページの編集について詳細をご確認ください。 
  • ページの設定をカスタマイズするには、コンテンツエディターの上部にある[設定]タブをクリックして、設定を編集します。 
    • ページの内部名を変更するには、[内部ページ名]フィールドに名前を入力します。この名前は訪問者には表示されません。 
    • [ページタイトル]フィールドに、ページの外部を入力します。この名前は、ページが読み込まれたときに、訪問者のウェブブラウザーの上部にあるタブに表示されます。 
    • ページの言語を設定するには、[ページの言語]ドロップダウンメニューをクリックして、言語を選択します。詳しくは、多言語ページの管理をご覧ください。 
    • [ページURL]セクションで、[コンテンツスラッグ]フィールドをクリックすると、ページのタイトルが自動的にURLスラッグになります。URLをカスタマイズするには、[コンテンツスラッグ]フィールドに新しいURLスラッグを入力します。詳しくは、ページのURLの編集をご覧ください。 
edit-page-name-title-language-and-url
    • [メタディスクリプション]フィールドに、検索結果でページタイトルの下に表示される、ページのコンテンツの説明を入力します。 
    • ページをHubSpotのキャンペーンに関連付けるには、[キャンペーン]ドロップダウンメニューをクリックし、キャンペーンを選択します。新しいキャンペーンを作成するには、[新規追加]を選択します。詳しくは、HubSpotでのキャンペーンの取り扱いをご覧ください。 
    • ソーシャルメディアでページが共有されたときに表示されるキービジュアルを追加するには、[キービジュアル]スイッチをクリックしてオンに切り替えます。[アップロード]をクリックしてコンピューターから画像を選択するか、[画像を参照]をクリックしてファイルツールから画像を選択します。

edit-meta-description-campaign-and-featured-image

    • ページテンプレート、表示の有無、head HTMLなど、より高度な設定をカスタマイズするには、[詳細オプション]セクションをクリックして展開します。詳しくは、詳細オプションのカスタマイズをご覧ください。 
  • ページにトピックまたはサブトピックのキーワードを付け、SEOの推奨事項を表示するには、[最適化]タブをクリックします。詳しくは、検索エンジン向けにページを最適化する方法をご覧ください。 
  • ページのコンテンツと設定をカスタマイズしたら、[公開オプション]タブをクリックして、公開オプションを設定します。
    • ページを今すぐ公開するには、[今すぐ公開]オプションを選択します。 
    • ページを将来公開するには、[後の予定としてスケジュール]オプションを選択します。表示されるフィールドで、ページを公開する日時を選択します。
    • 将来、自動的にページを非公開に設定するには、[特定の日付にページを非公開]チェックボックスを選択します。表示されるフィールドで、ページを非公開にする日時を設定し、ドロップダウンメニューを使ってこのページがリダイレクトされるページを選択します。
    • ページを公開する前に、右上の[プレビュー]をクリックしてプレビューすることができます。詳しくは、ページをプレビューする方法をご覧ください。 

publishing-options-tab

  • ページを公開、または公開をスケジュール設定する準備ができたら、右上の[公開]または[スケジュール]をクリックします。

既存のページを編集するには、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]または[マーケティング]>[ランディングページ]に移動します。ページにマウスを置いて、[編集]をクリックします。編集が完了したら、[更新]または[スケジュール]をクリックします。

edit-existing-page

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

コンテンツエディターの[最適化]タブでは、ページのSEO推奨事項を表示したり、ページをトピックに添付したりすることができます。 

  • コンテンツに移動します。

    • ウェブサイトページ:HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[マーケティング] > [ランディングページ]の順に進みます。
  • ランディングページにマウスを置いて、[編集]をクリックします。 
  • コンテンツエディターで、[最適化]タブをクリックします。 
  • ページがトピックやサブトピックに添付されている場合は、サイドバーエディターに表示されます。ページをトピックやサブトピックに添付する方法をご覧ください。  

topic-and-subtopic-menus

  • 未完成のSEO推奨事項を表示するには、サイドバーエディターで赤丸の付いたカテゴリーをクリックします。完了した各推奨事項は緑のチェックマークになります。未完了の各推奨はグレーのチェックマークになります。詳しくは、SEO推奨事項をご覧ください。 
optimize-tab-displaying-seo-recommendations

詳細ページオプションのカスタマイズ

[設定]タブの[詳細オプション]では、ページテンプレート、コードスニペット、スタイルシートなど、より詳細な設定をカスタマイズできます。

注:Starterテンプレートを使用したページでは詳細設定はできません。 

  • コンテンツに移動します。

    • ウェブサイトページ:HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[マーケティング] > [ランディングページ]の順に進みます。
  • ランディングページにマウスを置いて、[編集]をクリックします。 
  • コンテンツエディターで[設定]タブをクリックし、[詳細オプション]をクリックします。 
  • ページの表示の有無を変更するには、[ページのオーディエンスアクセスを管理]セクションでオプションを選択します。 
    • どの訪問者でもページのコンテンツを閲覧できるようにするには、[公開]を選択します。 
    • 訪問者がページコンテンツにアクセスするために必要なパスワードを追加するには、[非公開 - パスワードが必要]を選択します。
    • CMS Hub Enterpriseアカウントでは、[非公開 - 登録が必要]を選択して、このコンテンツを閲覧する訪問者にサイトへの登録を要求することもできます。
  • このページのheadまたはfooterのHTMLにコードスニペットを追加するには、[HeadのHTML]フィールドまたは[フッターHTML]フィールドをクリックして、コードスニペットを入力します。代わりに、あるドメインのすべてのページにコードスニペットを追加するには、ウェブサイトの設定にアクセスします。

edit-page-advanced-options

  • このページを動的なページにするには、[データソース]ドロップダウンメニューをクリックして、HubDBテーブルまたはプロパティーを選択します。詳しくは、動的ページの操作をご覧ください。
  • [テンプレート]セクションでは、このページが使用しているテンプレートを編集したり、ページ用に別のテンプレートを選択したりすることができます。
    • 別のテンプレートを選択するには、[別のテンプレートを使用]をクリックします。公開されているページのテンプレートを変更している場合は、必ず[更新]をクリックして、未公開の変更を反映させてください。そうしないと、テンプレートを切り替えたときに、その変更が失われる可能性があります。
    • テーマ選択画面で、テーマを選択します。 
    • テンプレート選択画面で、テンプレートを選択します。 
    • 新しいテンプレートでページがどのように見えるかをプレビューし、[テンプレートを使用]をクリックしてテンプレートの切り替えを完了するか、[戻る]をクリックして別のテンプレートを選択します。 

  • [スタイルシート]セクションでは、ページに添付されるスタイルシートを管理できます。詳しくは、HubSpotでのスタイルシートの取り扱いをご覧ください。 
    • ドメインスタイルシート:ウェブサイトの設定で、1つのドメインのすべてのページに添付されるスタイルシートを追加することができます。既定では、ドメインスタイルシートがページに適用されます。特定のページのドメインスタイルシートをオフにするには、ドロップダウンメニューをクリックして[無効]を選択します。詳しくは、ドメインスタイルシートの取り扱いをご覧ください。
    • テンプレートスタイルシート:ページのテンプレートに適用されているスタイルシートがここに表示されます。既定では、テンプレートスタイルシートがページに適用されます。特定のページのテンプレートスタイルシートをオフにするには、ドロップダウンメニューをクリックして[無効]を選択します。このセクションは、テーマテンプレートを使用しているページには表示されません。 
    • ページスタイルシート:[スタイルシートを添付]をクリックします。ドメインスタイルシートやテンプレートスタイルシートも使用されている場合は、それらのスタイル設定が優先されます。 
HubSpotのヘルプ記事のスクリーンショット
  • カスタムcanonical URLを追加するには、[canonical URLをカスタマイズ]フィールドにURLを入力します。詳しくは、canonical URLの使用をご覧ください。 

ページのプレビュー

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

  • コンテンツに移動します。

    • ウェブサイトページ:HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[マーケティング] > [ランディングページ]の順に進みます。
  • ランディングページにマウスを置いて、[編集]をクリックします。 
  • コンテンツエディターで、右上の[プレビュー]をクリックします。 
  • フル ページ プレビューを表示するには、右上の[新しいウィンドウで開く]をクリックします。このプレビューページをHubSpotアカウントの他のユーザーと共有するには、プレビューページの[共有可能なリンクをコピー]をクリックします。このプレビューを見るには、ユーザーがHubSpotにログインしている必要があります。
  • 別のデバイスでのプレビューを行うには、プレビューページの右上にあるmobile デバイスのアイコンをクリックします。  

select-device-to-preview

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

select-smart-rule-or-personalization