Website Pages

ページを作成して公開する

更新日時 2020年 10月 19日

対象製品

すべての製品とプラン

新しいページを作成して、検索エンジン向けに最適化してからウェブサイトで公開する方法を説明します。ランディングページを使用することにより、新しい訪問者をサイトに誘導するコンテンツオファーを提供することができます。ウェブサイトページのツールで、HubSpotのあらゆるサイトのコンテンツを管理できます。

始める前に

ページテンプレートのタイプ

ページのコンテンツ、レイアウト、スタイルの編集オプションは、使用するテンプレートのタイプによって異なります。

注:ページエディター[デザイン]タブ内で使用できるオプションは、すべての スターターテンプレートで共通しています。コード化されたテンプレート、レイアウトテンプレート、テーマテンプレート、およびアセットマーケットプレイスから購入したテンプレートには、開発者が任意のスタイルオプションを組み込むことができます。

ページエディターに移動する

新規ページを作成する

まったく新たにランディングページまたはウェブページを作成するには、次のようにします。

  • HubSpotアカウントで、[マーケティング]>[ウェブサイト]>[ランディングページ]または[ウェブサイトページ]の順に進みます。
  • 右上の[作成]ドロップダウンメニューをクリックし、ウェブサイトページまたはランディングページを選択します。
  • テンプレートの上にカーソルを置き、右上の[プレビュー]をクリックして、デスクトップまたはモバイルデバイスでの表示方法を確認します。このテンプレートを使用して新しいページを作成するには、右上の[テンプレートを使用]をクリックします。
  • ページに内部ページ名を付け、[ページを作成]をクリックします。

注:ページを公開する前にページ設定でページの公開タイトルを設定する必要があります。

既存のページを編集する

既存のページを編集するには、次の手順を実行します。

ページコンテンツを編集する

ページエディター内で、テンプレートに含まれる各モジュールのコンテンツを編集できます。ページエディター内でページのレイアウトの編集または新しいモジュールの追加を行うには、ページテンプレートにドラッグ&ドロップエリアを追加します。

モジュールのコンテンツを編集する

左側の[コンテンツ]タブで、ページテンプレートのすべてのモジュールを表示したり編集したりできます。ページにグローバルコンテンツ(ページヘッダーなど)が含まれている場合は、グローバル コンテンツ エディター内でそのコンテンツを編集します。

注:開発者がテンプレートをコード化した方法によって、各モジュールのコンテンツに使用できるオプションは異なります。

モジュールのコンテンツを編集するには、モジュールの上にカーソルを重ねてedit鉛筆アイコンをクリックします。 

edit-modules-in-page-editor

モジュールタイプによっては(見出しなど)、ページプレビューで直接編集できます。また、モジュールをクリックすると、左側のパネルに編集オプションが表示されます。モジュールタイプに共通のコンテンツの編集オプションについて詳細をご確認ください。

edit-module-options

ページ上のすべてのモジュールを網羅したリストを表示するには、左側のパネルの[コンテンツ]タブをクリックします。表示されるリストで、コンテンツを編集するモジュールをクリックします。

テンプレートにドラッグ&ドロップエリアまたはフレキシブルカラムが含まれている場合、ページエディターでモジュールを追加または再配置することができます。

ページエディターでアクションを元に戻す場合、またはやり直す場合は、左上の元に戻すアイコンundoまたはやり直しアイコンredoをクリックします。

注:元に戻したりやり直したりできるのは、ウェブブラウザーの現在のセッションで加えた編集のみです。ページエディターを更新すると、以前の編集内容は使用できなくなります。

モジュールに適用されるスタイルを編集する

ボタンや見出しなど、ページ上で何度も繰り返されるモジュールには、多くの場合、テンプレートのスタイルシートやウェブサイトのテーマ設定に基づく既定のスタイルがあります。これらのスタイルに変更を加えると、通常は同じテンプレートを使用している他のページにも影響します。

注:各モジュールで使用できるスタイル設定オプションは、ページテンプレートによって異なる場合があります。

エディターで、モジュールをクリックして選択します。左側のパネルで[スタイル]タブをクリックして、その特定のモジュールのスタイル設定オプションにアクセスします。ページテンプレート内のモジュールのスタイルを設定する方法の詳細をテンプレートのタイプごとにご確認ください。

edit-styles-in-page

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

上部のナビゲーションで、[最適化]タブをクリックしてSEOオプティマイザーツールを開きます。ここでは、ページをトピックのいずれかに添付したり、コンテンツを改善するための推奨事項を確認したりできます。

optimize-your-page-in-the-editor

ページ設定を編集する

ページ設定を編集し、基本的なページ情報をいくらか追加するには、ページエディターの一番上にある[設定]タブをクリックします。

  • 内部ページ名:内部ページ名は、最初にページを作成した時点、またダッシュボードで参照された時点で追加された名前です。訪問者には表示されません。
  • ページタイトル:ページが読み込まれる時点でウェブブラウザーの一番上のタブに表示されるタイトル。
  • ページURL:ページのURL。訪問者がこのページに移動すると、ブラウザー内のURLバーにこれが表示されます。公開された後であっても、ページURLは編集できます
  • メニューにページを追加:コンテンツ設定の新規または既存の詳細メニューに、現在作業中のウェブサイトページを追加します。
  • メタディスクリブション:ページタイトルの下で検索結果に表示されるコンテンツ。
  • キャンペーン:ページをHubSpotキャンペーンに関連付けます。新しいキャンペーンを作成するには、[新規追加]を選択します。
  • サムネイル画像:ソーシャルメディアでページが共有される際に特定の画像をサムネイル表示するには、このスイッチをクリックしてオンに切り替えます。[アップロード]をクリックしてコンピューターから画像を選択するか、[画像を参照]をクリックしてファイルツールから画像を選択します。

詳細オプション

注:[詳細オプション]セクションは、スターターテンプレートでは使用できません。

[詳細オプション]をクリックして、さらにページの設定をカスタマイズします。ページを公開する上で、これらの設定は不要です。

  • 特定の日にページを失効させる:このチェックボックスは、特定の日に失効してリダイレクトするようにページをスケジュールする場合に選択してオンにします。
  • ページのオーディエンスアクセスを管理:このページのオーディエンスアクセス管理のためのオプションを選択します。
    • 訪問者がページコンテンツにアクセスするために必要なパスワードを追加するには、[非公開 - パスワードが必要] を選択します。
    • ページを表示する前に訪問者がサイトに登録できるようにするには、[非公開 - 登録が必要]を選択します(CMS Hub Enterpriseのみ)。オーディエンスアクセスの制御について詳細をご確認ください。 
  • 追加のコードスニペット:[ヘッドHTML]フィールドまたは[フッターHTML]フィールドにコードスニペットを追加します。これは、未加工のHTMLまたはトラッキング コード をページの<head>タグまたは<footer>タグに追加する場合に便利です。

  • HubDB:ウェブ開発者が動的データベースコンテンツ用にHubDBテーブルをセットアップしている場合は、ここでHubDBテーブルにページを追加できます。[テーブルを選択]をクリックしてからテーブルを選択して、このページをデータベースに追加します。
  • テンプレート:ページに適用されているテンプレートを表示します。[別のテンプレートを使用]をクリックして新しいテンプレートをページに適用するか、または[このテンプレートを編集]をクリックしてテンプレートを編集します。

注:テンプレートの交換は、テンプレートタイプが同じ場合にのみ可能です。

  • スタイルシート:ページに添付されたスタイルシートを管理します。既定のスタイルシートを有効にするか、無効にするか、それとも既定の設定値に従うかを選択するには、ドロップダウンメニューをクリックしていずれかのオプションをクリックします。[スタイルシートを添付] をクリックし、ページに添付する既存のスタイルシートを選択します。スタイルシートはテーマテンプレートには適用されません。

HubSpotのヘルプ記事のスクリーンショット

  • 正規URL:ページの正規URLをカスタマイズします。

ページをプレビューする

右上の[プレビュー]をクリックして、ページが別のデバイスタイプ上でどう表示されるかを確認します。プレビューでパーソナライズとスマートコンテンツをテストすることもできます。

  1. デバイスプレビュー:[新しいウィンドウで開く]をクリックして、ブラウザーの新しいタブでページのライブプレビューを確認します。このプレビューリンクは、ページが実際に公開される前でも有効です。[共有可能なリンクをコピー]をクリックして、チームで共有するためのリンクをクリップボードにコピーします。
  2. スマートプレビュー:[対象条件でプレビュー]ドロップダウンメニューをクリックして、データベース内のさまざまなコンタクトに対してページがどう表示されるかをプレビューします。
    • コンタクトを選択して、その特定のコンタクトのプロパティー値に基づいてパーソナライズが表示される方法をプレビューします。2番目のドロップダウンメニューをクリックして、データベースから特定のコンタクトを選択します。
    • スマートルールを選択して、条件を満たすコンタクトに対してページのスマートコンテンツがどう表示されるかをプレビューします。2番目のドロップダウンメニューをクリックして、プレビューする特定のスマートルールを選択します。
  3. デバイスタイプ:[モバイル+タブレット]をクリックして、電話またはタブレットデバイス上でのページのライブプレビューを表示します。[デスクトップ]をクリックして、ウェブブラウザーでのページの表示方法を確認します。
preview-a-page

ページを公開またはスケジュールを設定する

コンテンツを追加して、検索エンジン用に最適化し、訪問者に対してどう表示されるかをプレビューしたら、ページ公開の準備完了です。

  • [公開またはスケジュール]タブをクリックし、今すぐ公開する場合は[今すぐ公開] を選択します。また後で特定の日時にこのページを公開する場合は[後の予定としてスケジュール]をクリックします。
  • ページの必須項目が欠落している場合は、[公開]ボタンの右上にアラートが表示されます。
  • ページの必須項目がすべて完了したら、[公開]をクリックします。

publish-a-landing-page