更新日時 2021年 4月 30日
ブログ記事、ウェブサイトページ、ランディングページ、またはEメールをHubSpotで編集中に、さまざまなデバイスタイプでコンテンツがどのように表示されるかをプレビューできます。。コンテンツを特定のコンタクトとしてプレビューすることで、パーソナライゼーションやスマートコンテンツをテストすることもできます。
レスポンシブデザインを理解する
すべてのHubSpotドラッグ＆ドロップテンプレートは、既定でレスポンシブです。コンテンツは、さまざまな画面サイズに合わせて調整されます。たとえば、背景全体に表示されるように設定された画像は、小さい画面ではそのサイズに合わせてトリミングされます。レスポンシブデザインに関するよくある質問の詳細を確認してください。
スターターテンプレート、テーマテンプレート、またはドラッグ＆ドロップエリアがあるテンプレートで作業している場合は、コンテンツエディターで、ページがモバイルデバイスに表示される方法をカスタマイズできます。
ドラッグ&ドロップテンプレートとは違って、カスタムコードテンプレートは、既定でレスポンシブではありません。開発者は、CMS開発者ドキュメントを使用してレスポンシブテンプレートを作成できます。
ページまたはブログ記事をプレビューする
- HubSpotアカウントで、ウェブサイトページ、ランディングページ、またはブログ記事に移動します。
- ページまたは投稿の上にカーソルを置き、［編集］をクリックします。
- コンテンツエディターの右上にある［プレビュー］をクリックして、ページまたは投稿が訪問者にどのように表示されるかを確認します。
-
- ブラウザーの新しいタブでページのライブプレビューを表示するには、［新しいウィンドウで開く］をクリックします。
- プレビューのURLをクリップボードにコピーするには、［共有可能なリンクをコピー］をクリックします。アカウントにサインインしているHubSpotユーザーのみが共有可能なリンクにアクセスできるようになります。
- モバイル、タブレット、デスクトップのビューでページがどのように表示されるかを確認するには、デバイスアイコンをクリックします。
- 特定のコンタクトのページのパーソナライズをプレビューするには、［プレビュー動作］ドロップダウンメニューをクリックし、［コンタクト］を選択します。その後で、［プレビューするコンタクトを選択］ドロップダウンメニューをクリックし、コンタクトを選択します。
- 特定のルールのページのスマートコンテンツをプレビューするには、［プレビュー動作］ドロップダウンメニューをクリックし、［スマートルール］を選択します。その後で、［スマートルールを選択］ドロップダウンメニューをクリックし、スマートルールを選択します。
ナレッジベース記事をプレビューする
- HubSpotアカウントにて、［サービス］ > ［ナレッジベース］の順に進みます。
- 記事の上にカーソルを置き、［編集］をクリックします。
- 右上にある［プレビュー］をクリックします。ブラウザーの新しいタブにページのライブプレビューが表示されます。
別のデバイスでEメールをプレビューする
- HubSpotアカウントにて、［マーケティング］ > ［Eメール］の順に進みます。
- Eメールの上にカーソルを置き、［編集］をクリックします。
- 右上の［アクション］ドロップダウンメニューをクリックし、［プレビュー］を選択します。タブレットとモバイルデバイスにEメールのプレビューが表示されます。
- プレビュー画面の［デバイス］タブで、別のデバイス上のプレビューをカスタマイズできます。
-
- パーソナライゼーションまたはスマートコンテンツをテストするには、［特定のコンタクトとしてプレビュー］ドロップダウンメニューをクリックし、コンタクトを選択します。
- プレビューを共有するには、右上の［共有可能なリンクをコピー］をクリックします。アカウントにサインインしているHubSpotユーザーのみが共有可能なリンクにアクセスできるようになります。
- Eメールのプレーン テキスト バージョンをプレビューするには、［プレーンテキストのビュー］をクリックしてオンに切り替えます。
別のクライアントでEメールをプレビューする
- HubSpotアカウントにて、［マーケティング］ > ［Eメール］の順に進みます。
- Eメールの上にカーソルを置き、［編集］をクリックします。
- 右上の［アクション］ドロップダウンメニューをクリックし、［プレビュー］を選択します。タブレットとモバイルデバイスにEメールのプレビューが表示されます。
- プレビュー画面の［クライアント］タブで、EメールがさまざまなEメールクライアントにどのように表示されるかを確認できます。
-
- プレビュー画面の上部にある［クライアント］をクリックします。
- パーソナライゼーションまたはスマートコンテンツをテストするには、［特定のコンタクトとしてプレビュー］ドロップダウンメニューをクリックし、コンタクトを選択します。
- 特定のEメールクライアントを検索するには、検索バーにクライアント名を入力します。
- 特定のクライアントのEメールをプレビューするには、そのクライアントの横にあるチェックボックスをオンにします。
- 画像ブロックが有効になっているコンタクトのEメールがどのように表示されるかをプレビューするには、［画像ブロック］スイッチをクリックしてオンに切り替えます。
- 右上の［今すぐEメールをテスト］をクリックします。以前のテストの結果にアクセスするには、左下の［View results for your previous email here（以前のEメールの結果をここに表示）］ドロップダウンメニューをクリックし、テスト日を選択します。
