Landing Pages

ランディングページおよびウェブサイトページ|よくある質問

更新日時 2020年 10月 19日

対象製品

Marketing Hub  Starter, Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Basic(旧製品)

ページデザイン、ページの公開、ページアナリティクスに関してよく寄せられる質問への回答がすばやく見つかります。HubSpotテンプレートまたはスタイルシートを変更する最適な方法は、元のテンプレートデザイナーと連携して変更することです。

注:アセットマーケットプレイスから購入したテンプレートを使用している場合は、ページのデザインに関する質問についてはそのテンプレートのデザイナーにお問い合わせください。

ページデザイン

デザインについての質問がある場合はどうすればよいですか?

注:ウェブサイトのデザインに関する質問がある場合は、ページテンプレートのオリジナルのデザイナーに問い合わせることが最適です。

HTMLとCSSを読み、記述することに慣れている場合:

  • CMSフレームワークのチュートリアル、ガイド、概要については、CMSリファレンスドキュメントを参照してください。
  • コードに関するヒント、アドバイス、トラブルシューティングが必要な場合は、コミュニティーのCMS開発フォーラムを検索し、メッセージを投稿してください。
  • CMS開発者コミュニティーSlackで、HubSpotのプロダクトチームやHubSpotのその他の開発者とつながります。

HTMLとCSを読み、記述することに慣れていない場合:

ページがモバイル向けレスポンシブにならないのはなぜですか?

レスポンシブコンテンツはすべてのデバイスタイプで同じように表示されるわけではありません。すべてのHubSpotドラッグ&ドロップテンプレートは既定でレスポンシブになっていますが、いくつかの理由でコンテンツがレスポンシブならない可能性があります。モバイルデバイスでのコンテンツのプレビュー方法をご確認ください。

  • 画像が切り捨てられる:レスポンシブ画像は表示されている画面サイズに合わせてサイズ変更されます。つまり、小さなデバイスタイプに合わせてトリミングされる可能性があります。これにより、画像の伸長や歪みが防止されます。
  • テキストがサイズ変更されない:Photoshopなどの写真編集ツールで画像にテキストを追加した場合、そのテキストは画像とは別にサイズ変更されません。オーバーレイテキストがレスポンシブであることを確認するには、背景画像をセクション、行、または列の背景画像として追加し、テキスト用にリッチテキストモジュールまたはヘッダーモジュールを含めます。
  • テーブルがレスポンシブではない:これらの要素のページ上での正確なサイズに関するルールは、テーブルによって設定されます。最適な結果を得るには、テーブルではなくドラッグ&ドロップ列を使用してページの構造を定義します。

ヒーロー背景画像を作成するにはどうすればよいですか?

ヒーロー画像を作成する最適な方法は、使用しているページテンプレートのタイプに応じて異なります。

  • ヒーロー画像を使用したページを作成する最も簡単な方法は、スターターテンプレートを使用し、ページ全体のセクションの背景画像を選択することです。スターターテンプレートにはナビゲーションメニューは含まれておらず、ソースコードへのアクセス権限もないことに注意してください。
  • ヒーロー背景画像を使用してウェブサイトページを作成する場合に、デザインにヒーロー画面が含まれているテーマテンプレートを使用するには、CMS Hub ProfessionalおよびEnterpriseのアカウントが必要です。テーマテンプレートではドラッグ&ドロップによる編集も可能であり、ページ全体のセクションの背景画像を選択できます。
  • デザインマネージャーで作成されたレイアウトテンプレートにヒーロー画像を追加するには、テンプレートで一部のカスタムコードを編集する必要があります。レイアウトテンプレートでヒーロー画像を設定する方法について詳しくは、CMS開発コミュニティーフォーラムをご覧ください。

注:コードの編集に慣れていない場合は、パートナーディレクトリからCMS開発の専門知識を持つデザイナーに連絡できます。

ナビゲーションメニューの色とフォントを管理するにはどうすればよいですか?

ナビゲーションメニューのメニュー項目とリンクは、アカウント設定のナビゲーション設定で管理します。ただしメニューのデザインはページテンプレートに基づいています。メニューの色、フォント、間隔、全般的な表示形式は、ページテンプレートに適用されるスタイルによって制御されます。

CTAを中央に配置するにはどうすればよいですか?

CTAを中央に配置する手順は、使用しているページテンプレートのタイプに応じて異なります。

ドラッグ&ドロップエリアを伴うスターターテンプレートテーマテンプレート、またはコードテンプレートでCTAを中央に配置するには、モジュールの[位置合わせ]の設定でCTAモジュールを中央に配置できます。

  • ページエディターでCTAをクリックして、そのCTAを選択します。
  • 左側のパネルで[スタイル]タブをクリックします。
  • [位置合わせとスペース]をクリックしてそのオプションを展開します。
  • [位置合わせ]セクションでblockAlignmentCenter中央寄せアイコンをクリックします。

center-a-cta

デザインマネージャーで作成されたレイアウトテンプレートでCTAを中央に配置するには、CTAをリッチテキストモジュールに追加し、このモジュール内で中央に配置すると最適な結果を得ることができます。

  • ページエディターでリッチテキストモジュールをクリックして、そのモジュールを選択します。
  • 上部ナビゲーションバーの[挿入]>[CTA]をクリックします。
  • CTAをクリックして選択し、[挿入]をクリックします。
  • リッチテキストモジュール内でCTAをクリックします。[CTAオプション]ダイアログボックスがアクティブになります。
  • [レイアウト]セクションでblockAlignmentCenter中央寄せアイコンをクリックします。これにより、ページのリッチテキストモジュール内の中央にCTAが配置されます。

CSSの編集になれている場合は、このモジュールのコンテンツを常に中央にハイツするようにレイアウトテンプレートをカスタマイズできます。

ページテンプレートを編集するにはどうすればよいですか?

ページのテンプレートを編集するには、ページエディターの[設定]タブからテンプレートにアクセスできます。

注:既存のページに適用されるテンプレートを変更する場合は、現在のテンプレートと同じタイプのテンプレートのみを選択できます。ドラッグ&ドロップエディターを使用しているページでは、ドラッグ&ドロップ編集が有効になっているテンプレートのみに切り替えることができます。

  • HubSpotアカウントで、ランディングページ、ウェブサイトページ、ブログ、またはEメールに移動します。
  • ダッシュボードで、テンプレートを編集するページ、投稿、またはEメールにカーソルを合わせて[編集]をクリックします。
  • コンテンツエディターの一番上にある[設定]タブをクリックし、下にスクロールして[詳細オプション]をクリックします。
  • テンプレートを編集するには、[テンプレート]セクションで[このテンプレートを編集]をクリックします。

    editor-edit-this-template

このページに使用されているテンプレートを変更する場合は、[別のテンプレートを使用] をクリックします。

ページのソースコードで編集できますか?

ほとんどのタイプのテンプレートではリッチテキストモジュールでソースコードにアクセスできます。ソースコードにアクセスするには、リッチテキストモジュールをクリックしてエディターツールバーを有効にします。右上の[詳細]>[ソースコード]をクリックします。編集を行い、左下の[保存]をクリックします。

注:スターターテンプレートのソースコードにはアクセスできません

フローティング画像の周囲にテキストの回り込み効果を入れるには、どうすればよいですか?

リッチテキストモジュールの整列オプションを使用して、任意の画像をフローティング画像にすることができます。それにはまず、ページ上に配置する画像を挿入します。次に、コンテンツエディター内で画像をクリックして書式設定オプションを開きます。

ページに動画やオーディオファイルを埋め込むにはどうすればよいですか?

  • すべてのタイプのページテンプレートでは、サポートされているプロバイダーからの動画URLを埋め込むことができます。
  • Vidyardを利用したHubSpot動画の場合、Marketing Hub ProfessionalおよびEnterpriseのアカウントとCMS Hub ProfessionalおよびEnterpriseのアカウントでは、動画コンテンツをリッチテキストモジュールに追加し、HubSpotで動画アナリティクスをトラッキングできます。この機能はスターターテンプレートでは使用できません。
  • また、HuSpot向けのVidyard連携が利用可能です。

特定のページだけ背景色を変更するにはどうすればよいですか?

ドラッグ&ドロップエリアを伴うスターターテンプレートテーマテンプレート、コードテンプレートには、背景スタイルオプションがあるページセクションがあります。セクションの背景に適用されるスタイルを編集する方法を参照してください。

レイアウトテンプレートの場合、個々のページの背景色を変更するには、ウェブサイトページまたはランディングページのヘッドHTMLにシンプルなCSSを追加します。

  • HubSpotアカウントで、ランディングページまたはウェブサイトページに進みます。編集するページの上にカーソルを置き、[編集]をクリックします。
  • [設定]タブをクリックし、下にスクロールして[詳細オプション]をクリックします。
  • [ヘッドHTML]セクションに次のコードを貼り付けます。色の名前またはHTML 16進数の値を使用して、赤色を好みの色に置き換えます。
<style>
body {
background-color: red;
}
</style>

注:CSSの編集に慣れていない場合は、テンプレートのオリジナルのデザイナーに連絡するかCMS開発フォーラムでアドバイスを得てください。

ページ公開

以前のバージョンのページを復元できますか?

変更履歴ツールを使用すると、ぺージの保存済みバージョンを確認できます。ページの下書きを作成する際は、右上にある[保存]ボタンをクリックするたびに変更が保存されます。ページが公開されると、新しく公開されたバージョンも変更履歴に保存されます。

view-revisions-new-editors

ページでパーソナライズを使用できますか?

コンタクトプロパティーまたはカスタムプロパティー使用して、ページをパーソナライズできます。パーソナライズトークンを追加するときは必ず、新しい訪問者に適用する既定値も含めてください。パーソナライズトークンにコンタクトの値を表示するには、そのコンタクトのレコードがHubSpotアカウントに存在し、かつ、トークンとして使用されているプロパティーに既知の値が設定されていることが必須となります。

ランディングページで訪問者がフォームを送信後、PDF にリンクするにはどうすればよいですか?

訪問者が HubSpot フォームを送信した後、ゲートコンテンツ (PDF ファイルや動画など) にリダイレクトするには、次の 2 つの方法があります。

プロモーションの終了後またはイベント日が過ぎた後に、ページを期限切れとして、訪問者を新しいURLにリダイレクトすることができます。ページエディターの[設定]タブで、[ページの有効期限が切れたら、訪問者を次のページにリダイレクトする]ドロップダウンメニューをクリックして、このページが期限切れになった後のリダイレクト先を選択します。公開済みHubSpotページの1つを選択するか、[+外部URLを入力]をクリックして、HubSpotページをリダイレクトする外部ページのURLを入力します。

ページを公開できないのはなぜですか?

HubSpotのページやブログ記事では、内部ページページタイトルページURLの各フィールドに値が設定されていなければ、編集インターフェイスに[公開]オプションは表示されません。公開するページにはいずれも一意のURLが必要です。

ページで必要なフィールドが1つでも欠落している場合、右上にある[公開]ボタンにカーソルを置くと、アラートと必須フィールドのリストが表示されます。

required-fields-for-publishing

1 つのランディングページを複数のキャンペーンに関連付けることはできますか?

各個別のランディングページとウェブサイトページは、HubSpot の 1 つのキャンペーンにのみ関連付けることができます。すでに別のキャンペーンに関連付けられているアセットやコンテンツを新しいキャンペーンに追加すると、現在のキャンペーンから削除されます。

削除済みページを復元できますか?

現時点では、削除した HubSpot ページをアプリで復元する方法はありません。誤って削除したHubSpotページを復元する必要がある場合は、サポートにご連絡ください

ページアナリティクス

ランディングページのダッシュボードに表示されるデータはどのくらいの頻度で更新されますか?

ページダッシュボードとウェブサイトアナリティクスツールのアナリティクスと指標は、20~30分ごとに更新されます。

ランディングページのURLを変更すると、ランディングページのアナリティクスは削除されますか?

ページのURLを変更しても、ページダッシュボードからデータが削除されることはありません。HubSpotでは各ページに独自の識別番号を使用して、パフォーマンスを追跡しています。これにより、データに影響を及ぼすことなくページのURLを変更できます。

注:ランディングページのダッシュボードとは異なり、ページレポートではURLに基づいてページを一意のものとみなします。ランディングページのURLを変更すると、それ以降は古いURLではなく新しいURLでページの閲覧数が追跡されます。

特定の期間のアナリティクスを確認するにはどうすればよいですか?

特定の期間のページのアナリティクスを確認するには、ランディングページまたはウェブサイトページに移動します。目的のページの上にカーソルを置いて[続き]ドロップダウンメニューをクリックし、[詳細]を選択します。

[パフォーマンス]タブで[日付範囲]ドロップダウンメニューをクリックし、日付範囲を指定することで、アナリティクスをセグメント化できます。

「送信数」と「新規コンタクト数」の違いは何ですか?

  • 送信数とは、ページのフォームが送信された回数を意味します。
  • 新規コンタクト数とは、ページでフォームを送信してコンタクトになった訪問者の数を意味します。たとえば、既存のコンタクトがランディングページでフォームを送信する場合、このコンタクトは新規コンタクトとは見なされません。

コンタクトが複数のフォームを送信してお客様になった場合、それらのランディングページのすべてでお客様としてカウントされるのですか?

コンタクトは、最初にフォームを送信したランディングページでのみ、お客様としてアナリティクスに反映されます。フォームの送信はすべてのランディングページで「送信数」に計上されますが、コンタクトが表示されるのは、最初にフォームを記入したランディングページの「新規コンタクト数」と「お客様」のみです。

自分のランディングページを表示してテストとして送信する場合、そのテストは送信数に計上されますか?

IPアドレスがレポート設定でアナリティクスから除外されている場合、テストビューと送信の回数はランディングページのデータに計上されません。

最近のフォーム送信がページのアナリティクスにすぐに反映されないのはどうしてですか?

コンタクトがフォームを送信してからその送信がページのアナリティクスに反映されるまでに20~30分の遅れが出る場合があります。フォームの最新の送信数を確認するには、フォームダッシュボードに移動します。HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [フォーム]の順に進みます。ランディングページのフォームの上にカーソルを置いて、[アクション]ドロップダウンメニューをクリックし、[送信数を表示] を選択します。

重複したフォーム送信はどのように処理されますか?

すべてのフォーム送信は、ページパフォーマンスで「送信数」の合計に計上されます。同じコンタクトがランディングページでフォームを複数回送信すると、そのたびに送信数に計上されます。