お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Landing Pages
モバイルデバイスでのコンテンツのプレビュー
更新日時 2021年 4月 1日
対象製品
すべての製品とプラン |
HubSpotのブログ記事、ウェブサイトページ、ランディングページ、またはEメールでの作業中、さまざまなデバイスタイプでコンテンツがどのように表示されるかをプレビューできます。コンテンツを特定のコンタクトとしてプレビューすることで、パーソナライゼーションやスマートコンテンツをテストすることもできます。
レスポンシブデザインの仕組み
すべてのHubSpotドラッグ&ドロップテンプレートには、コンテンツがさまざまな画面サイズに収まるように調整するメディアクエリが含まれています。レスポンシブコンテンツはすべてのデバイスタイプで同じように表示されるわけではありません。たとえば、背景全体に表示されるように設定された画像は、小さい画面ではそのサイズに合わせてトリミングされます。
ページエディター内で、モバイルデバイス上での各モジュールの外観をカスタマイズできます。レスポンシブデザインに関してよく寄せられる質問をご確認ください。
ご注意ください:カスタムコードテンプレートは、既定ではレスポンシブではありません。ウェブサイト開発者は、CMS開発者ドキュメントに従って、作成するテンプレートがレスポンシブなものになるようにできます。
ページまたはブログ記事をプレビューする
右上にある[プレビュー]をクリックして、訪問者にページがどのように表示されるかを確認します。
- デバイスプレビュー:[新しいウィンドウで開く]をクリックすると、ブラウザーの新しいタブでページのライブプレビューを表示できます。このプレビューリンクは、ページが実際に公開される前でも有効です。チームと共有するリンクをクリップボードにコピーするには、[共有可能なリンクをコピー]をクリックします。
- スマートプレビュー: [対象条件でプレビュー]ドロップダウンメニューをクリックし、データベース内のさまざまなコンタクトに対してページがどのように表示されるかをプレビューします。
- コンタクトを選択して、その特定のコンタクトのプロパティー値に基づいてパーソナライゼーションが表示されるかをプレビューします。2番目のドロップダウンメニューをクリックし、データベースから特定のコンタクトを選択します。
- スマートルールを選択して、条件を満たすコンタクトに対してページのスマートコンテンツがどのように表示されるかをプレビューします。2番目のドロップダウンメニューをクリックして、プレビューする特定のスマートルールを選択します。
- デバイスタイプ:[モバイル+タブレット]をクリックして、電話またはタブレットデバイス上でのページのライブプレビューを表示します。[デスクトップ]をクリックして、ウェブブラウザーでページがどのように表示されるかを確認します。
ドラッグ&ドロップエディターでEメールをプレビューする
- HubSpotアカウントにて、[マーケティング] > [Eメール]の順に進みます。
- Eメール下書きの名前をクリックします。
- 右上の[アクション]ドロップダウンメニューをクリックし、[プレビュー]を選択します。タブレットとモバイルデバイスでのEメールのプレビューが表示されます。
- パーソナライゼーションまたはスマートコンタクトをテストするには、[特定のコンタクトとしてプレビュー]ドロップダウンメニューをクリックし、データベースからコンタクトを選択します。
- プレビューを共有するには、右上の[共有可能なリンクをコピー]をクリックします。
- コンテンツのレビューが完了したら、左上の[戻る]をクリックしてEメールエディターに戻ります。
ドラッグ&ドロップエディターでEメールをプレビューしてテストする方法の詳細をご確認ください。
クラシックエディターで作成されたEメールのコンテンツをプレビューする
- HubSpotアカウントで、ブログ、Eメール、ランディングページ、またはウェブサイトページに移動します。
- ブログ記事、Eメール、またはページの名前をクリックします。
- 左側のサイドバーメニューで、目の形viewをしたアイコンをクリックします。
- デバイスタイプをクリックして、デスクトップ、タブレット、モバイルデバイスでコンテンツがどのようにレンダリングされるかを確認します。デバイスのプレビューオプションには、横向きと縦向きのモードがあります。
- [新しいウィンドウで開く]をクリックして、ブラウザーウィンドウで共有可能なバージョンのEメールを表示するか、[コピー]をクリックしてプレビューリンクを共有します。
- パーソナライゼーションまたはスマートコンタクトをテストするには、[特定のコンタクトとしてプレビュー]ドロップダウンメニューを使用して、データベースからコンタクトを選択します。
- コンテンツのレビューが完了したら、[プレビューモードを終了]をクリックしてコンテンツエディターに戻ります。
Landing Pages
Email
Blog
Website Pages
関連記事
-
GoogleタグマネージャーのコードをHubSpotページに追加する
GoogleタグマネージャーとHubSpotを統合して、一か所の複数のソースからのトラッキングを管理することができます。Googleタグマネージャーの詳細については、Googleのスタートガイド...
ナレッジベース -
HubSpotコンテンツに動画を追加する
HubSpot動画を使用すると、ファイルツールに動画をアップロードし、ページ、マーケティングEメール、ブログ記事、ナレッジベース記事に動画を追加できます。 HubSpot動画は、ドラッグ&ドロップ マーケティングEメール
ナレッジベース -
コンテンツをパーソナライズする
...
ナレッジベース