ページを作成および公開集する

ページコンテンツ、レイアウト、スタイルのオプションは、使用するテンプレートのタイプによって異なります。新しいランディングページを短時間で簡単に作成するには、スターターテンプレートを使用します。ページテンプレートをもっとカスタマイズされたものにするには、ウェブ開発者と協力し、デザイン管理ツールでテンプレートを作成します。アセットマーケットプレイスには、さまざまな追加のページテンプレートがあります。

注: ページエディターと [デザイン] タブの中では、どのスターターテンプレートについてもオプションは同じです。コードテンプレート、レイアウトテンプレート、テーマテンプレート、およびアセットマーケットプレイスからのテンプレートには、そのテンプレートを作成した開発者が含めたスタイルオプションが含まれています。

• スターターテンプレート: スターターテンプレートには、ドラッグ＆ドロップによるあらゆるアカウントからアクセスできるため、ページレイアウトと背景スタイルは、コードを記述することなく簡単に更新できます。スターターテンプレートのスタイルは、会社のブランディングに一致する色、フォント、ボタンにマッチするように [デザイン] タブで更新することができます。
• ドラッグ＆ドロップエリアを伴うコードテンプレート: ページテンプレートをもっとカスタマイズされたものにするには、ウェブ開発者と協力し、ドラッグ＆ドロップエリアを伴うコードテンプレートを作成します。これによりドラッグ＆ドロップ編集ができるようになり、コードなしでコンテンツやスタイルを更新できます。チームにウェブ開発者がいない場合にドラッグ＆ドロップエリアを伴うテンプレートを使用するには、HubSpot の CMS の専門知識を持つ HubSpot パートナーに問い合わせてください。
• レイアウトテンプレート: HTML と CSS の基本的な知識があれば、デザインマネージャーツールで簡単なレイアウトテンプレートを作成できます。レイアウトテンプレートで作成したページを編集するのにコーディングの知識は不要ですが、ドラッグ＆ドロップ編集の特定の機能は利用できません。柔軟性を高めるには、テンプレートにフレキシブルカラムを含めるよう、デザイナーに依頼することができます。
• テーマテンプレート:CMS Hub アカウントには、ドラッグ＆ドロップ編集機能や一連のユニークなテーマモジュールが含まれているテーマテンプレートが含まれます。テーマのテンプレートのフォント、色、間隔は、一連のグローバルなテーマ設定によって制御されます。テーマテンプレートを使用したページの編集についてもっと詳しく。
• マーケットプレイステンプレート: どの種類のページテンプレートについても、アセットマーケットプレイスから購入できます。ページのデザインに関する質問については、マーケットプレイステンプレートのデザイナーに問い合わせることができます。

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

新規ページを作成する

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

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

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

既存のページを編集する

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

• HubSpot アカウントで、ランディングページまたはウェブサイトページに移動します。
• ダッシュボードで既存のページの上にカーソルを置き、[編集] をクリックします。

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

コンテンツエディターの中で、テンプレートに含まれる各モジュールの内容を編集できます。ページエディター内でページのレイアウトを編集したり新しいモジュールを追加したりする機能を利用するには、ウェブ開発者と協力して、ページテンプレートにドラッグ＆ドロップエリアを追加します。

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

左側の [コンテンツ] タブで、ページテンプレートのすべてのモジュールを表示したり編集したりできます。左側パネルで、どのタイプのモジュールコンテンツも完全にカスタマイズ可能です。ページにページヘッダーなどのグローバルコンテンツが含まれている場合、グローバルコンテンツエディターの中でそれを編集します。

モジュールのコンテンツを編集するには、モジュールの上にカーソルを置き、edit 鉛筆アイコンをクリックします。左側のパネルの [コンテンツ] タブをクリックして、ページのすべてのモジュールのリストを表示することもできます。リスト内の特定のモジュールをクリックして、そのコンテンツオプションを編集します。

どのタイプのモジュールも、左側のパネルの [オプション] タブで編集できます。表示されるコンテンツオプションは、ページテンプレートでモジュールが当初どのようにして作成されたかによって異なります。各モジュールタイプの一般的なコンテンツオプションについてもっと詳しく。

注: テーマテンプレートを使用してページを作成した場合、開発者がこのモジュールに含めたコンテンツオプションが表示されます。 

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

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

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

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

モジュールのスタイルは、ページに適用されるスタイルに基づいて設定されます。テンプレートの元々のデザイナーがこのテンプレートを作成した方法によっては、ページエディター内で追加のスタイルを編集することができます。

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

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

SEO に合わせてページを最適化する

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

ページ設定を編集する

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

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

詳細オプション

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

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

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

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

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

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

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

ページをプレビューする

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

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

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

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

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