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

さまざまなデバイスでコンテンツをプレビューする

更新日時 2021年 4月 30日

対象製品

すべての製品とプラン

ブログ記事、ウェブサイトページ、ランディングページ、またはEメールをHubSpotで編集中に、さまざまなデバイスタイプでコンテンツがどのように表示されるかをプレビューできます。コンテンツを特定のコンタクトとしてプレビューすることで、パーソナライゼーションスマートコンテンツをテストすることもできます。

レスポンシブデザインを理解する

すべてのHubSpotドラッグ&ドロップテンプレートは、既定でレスポンシブです。コンテンツは、さまざまな画面サイズに合わせて調整されます。たとえば、背景全体に表示されるように設定された画像は、小さい画面ではそのサイズに合わせてトリミングされます。レスポンシブデザインに関するよくある質問の詳細を確認してください。
 
 
ドラッグ&ドロップテンプレートとは違って、カスタムコードテンプレートは、既定でレスポンシブではありません。開発者は、CMS開発者ドキュメントを使用してレスポンシブテンプレートを作成できます

ページまたはブログ記事をプレビューする

    1. ブラウザーの新しいタブでページのライブプレビューを表示するには、[新しいウィンドウで開く]をクリックします。
    2. プレビューのURLをクリップボードにコピーするには、[共有可能なリンクをコピー]をクリックします。アカウントにサインインしているHubSpotユーザーのみが共有可能なリンクにアクセスできるようになります。
    3. モバイル、タブレット、デスクトップのビューでページがどのように表示されるかを確認するには、mobileデバイスアイコンをクリックします。
    4. 特定のコンタクトのページのパーソナライズをプレビューするには、[プレビュー動作]ドロップダウンメニューをクリックし、[コンタクト]を選択します。その後で、[プレビューするコンタクトを選択]ドロップダウンメニューをクリックし、コンタクトを選択します。
    5. 特定のルールのページのスマートコンテンツをプレビューするには、[プレビュー動作]ドロップダウンメニューをクリックし、[スマートルール]を選択します。その後で、[スマートルールを選択]ドロップダウンメニューをクリックし、スマートルールを選択します。
  1.  

preview-a-page-2

ナレッジベース記事をプレビューする

  • HubSpotアカウントにて、[サービス] > [ナレッジベース]の順に進みます。
  • 記事の上にカーソルを置き、[編集]をクリックします。
  • 右上にある[プレビュー]をクリックします。ブラウザーの新しいタブにページのライブプレビューが表示されます。

別のデバイスでEメールをプレビューする

  • HubSpotアカウントにて、[マーケティング] > [Eメール]の順に進みます。
  • Eメールの上にカーソルを置き、[編集]をクリックします。
  • 右上の[アクション]ドロップダウンメニューをクリックし、[プレビュー]を選択します。タブレットとモバイルデバイスにEメールのプレビューが表示されます。
  • プレビュー画面の[デバイス]タブで、別のデバイス上のプレビューをカスタマイズできます。 
    1. パーソナライゼーションまたはスマートコンテンツをテストするには、[特定のコンタクトとしてプレビュー]ドロップダウンメニューをクリックし、コンタクトを選択します。
    2. プレビューを共有するには、右上の[共有可能なリンクをコピー]をクリックします。アカウントにサインインしているHubSpotユーザーのみが共有可能なリンクにアクセスできるようになります。
    3. Eメールのプレーン テキスト バージョンをプレビューするには、[プレーンテキストのビュー]をクリックしてオンに切り替えます。 

preview-your-email

別のクライアントでEメールをプレビューする

  • HubSpotアカウントにて、[マーケティング] > [Eメール]の順に進みます。
  • Eメールの上にカーソルを置き、[編集]をクリックします。
  • 右上の[アクション]ドロップダウンメニューをクリックし、[プレビュー]を選択します。タブレットとモバイルデバイスにEメールのプレビューが表示されます。
  • プレビュー画面の[クライアント]タブで、EメールがさまざまなEメールクライアントにどのように表示されるかを確認できます。  
    1. プレビュー画面の上部にある[クライアント]をクリックします。 
    2. パーソナライゼーションまたはスマートコンテンツをテストするには、[特定のコンタクトとしてプレビュー]ドロップダウンメニューをクリックし、コンタクトを選択します。
    3. 特定のEメールクライアントを検索するには、検索バーにクライアント名を入力します。 
    4. 特定のクライアントのEメールをプレビューするには、そのクライアントの横にあるチェックボックスをオンにします。 
    5. 画像ブロックが有効になっているコンタクトのEメールがどのように表示されるかをプレビューするには、[画像ブロック]スイッチをクリックしてオンに切り替えます。 
    6. 右上の[今すぐEメールをテスト]をクリックします。以前のテストの結果にアクセスするには、左下の[View results for your previous email here(以前のEメールの結果をここに表示)]ドロップダウンメニューをクリックし、テスト日を選択します。 

preview-your-email-in-different-clients-2