更新日時 2021年 4月 14日
HubSpotのブログ記事、ウェブサイトページ、ランディングページ、またはEメールでの作業中、さまざまなデバイスタイプでコンテンツがどのように表示されるかをプレビューできます。コンテンツを特定のコンタクトとしてプレビューすることで、パーソナライゼーションやスマートコンテンツをテストすることもできます。
レスポンシブデザインの仕組み
すべてのHubSpotドラッグ＆ドロップテンプレートには、コンテンツがさまざまな画面サイズに収まるように調整するメディアクエリが含まれています。レスポンシブコンテンツはすべてのデバイスタイプで同じように表示されるわけではありません。たとえば、背景全体に表示されるように設定された画像は、小さい画面ではそのサイズに合わせてトリミングされます。
ページエディター内で、モバイルデバイス上での各モジュールの外観をカスタマイズできます。レスポンシブデザインに関してよく寄せられる質問をご確認ください。
ご注意ください：カスタムコードテンプレートは、既定ではレスポンシブではありません。ウェブサイト開発者は、CMS開発者ドキュメントに従って、作成するテンプレートがレスポンシブなものになるようにできます。
ページまたはブログ記事をプレビューする
右上にある［プレビュー］をクリックして、訪問者にページがどのように表示されるかを確認します。
- デバイスプレビュー：［新しいウィンドウで開く］をクリックすると、ブラウザーの新しいタブでページのライブプレビューを表示できます。このプレビューリンクは、ページが実際に公開される前でも有効です。チームと共有するリンクをクリップボードにコピーするには、［共有可能なリンクをコピー］をクリックします。
- スマートプレビュー： ［対象条件でプレビュー］ドロップダウンメニューをクリックし、データベース内のさまざまなコンタクトに対してページがどのように表示されるかをプレビューします。
- コンタクトを選択して、その特定のコンタクトのプロパティー値に基づいてパーソナライゼーションが表示されるかをプレビューします。2番目のドロップダウンメニューをクリックし、データベースから特定のコンタクトを選択します。
- スマートルールを選択して、条件を満たすコンタクトに対してページのスマートコンテンツがどのように表示されるかをプレビューします。2番目のドロップダウンメニューをクリックして、プレビューする特定のスマートルールを選択します。
- デバイスタイプ：［モバイル+タブレット］をクリックして、電話またはタブレットデバイス上でのページのライブプレビューを表示します。［デスクトップ］をクリックして、ウェブブラウザーでページがどのように表示されるかを確認します。
ドラッグ＆ドロップエディターでEメールをプレビューする
- HubSpotアカウントにて、［マーケティング］ > ［Eメール］の順に進みます。
- Eメール下書きの名前をクリックします。
- 右上の［アクション］ドロップダウンメニューをクリックし、［プレビュー］を選択します。タブレットとモバイルデバイスでのEメールのプレビューが表示されます。
- パーソナライゼーションまたはスマートコンタクトをテストするには、［特定のコンタクトとしてプレビュー］ドロップダウンメニューをクリックし、データベースからコンタクトを選択します。
- プレビューを共有するには、右上の［共有可能なリンクをコピー］をクリックします。
- コンテンツのレビューが完了したら、左上の［戻る］をクリックしてEメールエディターに戻ります。
ドラッグ＆ドロップエディターでEメールをプレビューしてテストする方法の詳細をご確認ください。
クラシックエディターで作成されたEメールのコンテンツをプレビューする
- HubSpotアカウントで、ブログ、Eメール、ランディングページ、またはウェブサイトページに移動します。
- ブログ記事、Eメール、またはページの名前をクリックします。
- 左側のサイドバーメニューで、目の形をしたアイコンをクリックします。
- デバイスタイプをクリックして、デスクトップ、タブレット、モバイルデバイスでコンテンツがどのようにレンダリングされるかを確認します。デバイスのプレビューオプションには、横向きと縦向きのモードがあります。
- ［新しいウィンドウで開く］をクリックして、ブラウザーウィンドウで共有可能なバージョンのEメールを表示するか、［コピー］をクリックしてプレビューリンクを共有します。
- パーソナライゼーションまたはスマートコンタクトをテストするには、［特定のコンタクトとしてプレビュー］ドロップダウンメニューを使用して、データベースからコンタクトを選択します。
- コンテンツのレビューが完了したら、［プレビューモードを終了］をクリックしてコンテンツエディターに戻ります。
