Eメールのプレビューと最適化

マーケティングEメールをデザインする際、さまざまなデバイスタイプやEメールクライアントでの見え方をプレビューすることができます。Eメールが特定のクライアントで期待通りに表示されない場合は、以下のベストプラクティスと一般的な問題の解決策をご覧ください。 

モバイルデバイスやデスクトップクライアントでEメールをプレビューできます。

Eメールを送信する前に、さまざまなクライアントやデバイスでどのように表示されるかをプレビューできます。

• HubSpotアカウントにて、［マーケティング］＞［マーケティングEメール］の順に進みます。
• 下書きした既存のEメールの名前をクリックします。
• Eメールエディタの右上で、プレビューをクリックし、受信トレイのプレビューを選択します。
• Eメールがデスクトップ画面とモバイル画面の両方でどのように見えるかを確認する。
• Eメールが特定のEメールクライアントでどのように表示されるかをプレビューするには、プレビュー画面の上部にあるクライアントをクリックします。
• 左側のペインで、プレビューしたいEメールクライアントの横にあるチェックボックスを選択します。
• 右上の［今すぐEメールをテスト］をクリックします。HubSpotは選択した各クライアントのプレビューを生成します。
  • < or >ボタンをクリックすると、クライアントのプレビュー間を移動できます。
  • デフォルトでは、多くのクライアントはEメールを最初に読み込んだときに画像を無効にします。画像なしでEメールがどのように表示されるかを確認するには、画像ブロックスイッチを切り替えてください。

Gmailのクリッピング問題を修正

メールのマークアップに埋め込まれたコードを含むEメールの合計サイズが102KBを超えると、Gmailはメールをクリップします。Eメールの全内容を表示するには、受信者はメッセージ全体を表示リンクをクリックする必要があります。これは送信先の評価に悪影響を及ぼす可能性があり、またHubSpotがEメールとのやり取りを追跡する妨げにもなります。

下書きしたEメールがGmailでクリップされる危険性がある場合、確認と送信パネルに警告が表示されます。この警告は、EメールのHTMLと関連付けされたトラッキングリンクに基づいて、Eメールのサイズを概算したものです。 

GmailがEメールをクリップしないようにするには、以下の手順に従ってください（No）：

• Eメール内のリンク数を減らす： Eメール内の各トラッキングリンクには、URLの末尾にHubSpotのトラッキングパラメーターが含まれています。これらのリンク先の長さはさまざまですが、1つ1つが数百文字になることも多く、Eメールのサイズを大きくする一因となります。
• 余分なコンテンツを削除する：受信者が読む必要のないコンテンツを削除するためにEメールを修正しましょう。また、別のエディターからコンテンツをコピーした場合、コードやスタイル設定が含まれていないかチェックする必要があります。大きな画像はEメールのコンテンツとは別に読み込まれるため、削除してもEメールのサイズを大幅に小さくすることはできません。
• 同じ件名のEメールを複数送信しないようにする:同じ件名のEメールを複数送信すると、たとえ新しい内容のEメールが含まれていたとしても、Gmailはそれらを自動的に1つのスレッドにまとめます。
• Eメールを変更した後、テストしてみてください。、Eメールのサイズを小さくするためにEメールを変更した後、テストメールをご自分のGmailアカウントに送信し、Eメールが切り取られることなく期待通りに表示されることを確認してください。

Eメールをモバイルフレンドリーにする

パソコンとモバイルの両方でEメールを完璧に表示させることは難しいですが、以下のヒントをフォローすることで、一貫したモバイル体験を提供することができます。

レスポンシブEメールテンプレートを使用する。

全てのHubSpot ドラッグ＆ドロップテンプレートはデフォルトでレスポンシブです。つまり、テンプレートは表示される画面に合わせて調整されます。HubSpotはコンテンツエディターの画像にも最大幅を追加するので、ソースコードを編集して最大幅を追加する心配はありません。

HubSpotでコード化されたEメールテンプレートを作成する場合は、必ずレスポンシブEメールテンプレートマークアップをご利用ください。テンプレートマーケットプレイスからレスポンシブEメールテンプレートを購入することもできます。

画像のサイズ設定を小さくする

ほとんどの場合、モバイル機器のダウンロード速度はパソコンよりも遅い。小さい画像ファイルを使用すると、Eメールの読み込み時間を短縮できます。HubSpotは、<img>タグにwidth属性を含む画像のサイズを自動的に変更します。FastStone Photo ResizerやJPEGminiなどのサービスも、画像の品質を落とすことなく、ファイルサイズを80％も削減できます。

リンク先やCTAボタンのサイズを大きくする

コンテンツは、モバイル端末ではっきり読めるような大きさにしましょう。配信登録者がコンテンツを見てクリックできるように、テキストリンクやCTAボタンは、縦幅が57x57ピクセル以上であることを確認してください。

Eメールプレビューテキストのトラブルシューティング

Eメールが受信トレイに表示される際、GmailやOutlookなどのEメールクライアントは、件名やプレビューテキストの後に、メール本文の追加コンテンツを表示することがあります。この動作により、プレビュー後に意図しないテキストが表示されることがあります。例えば、Eメールの上部にバナーやロゴなどの画像を掲載した場合、その画像の代替（Alt）テキストがEメールのプレビューに含まれることがあります。

この問題を防ぐには、Eメールの上部に画像の代替（Alt）テキストとしてEメールの内容の要約を記載するか、altテキストを完全に省略する方法があります。完全なプレビュー・テキストが期待通りに表示されることを確認するには、テストEメールを送信してください。

JavaScriptやインラインフレームの使用箇所を避ける

クラシックEメールエディタを使用してEメールを作成している場合、<script>または<iframe>要素は、ほとんどの主要Eメールクライアントでレンダリングされないため、テンプレートでの使用は避けるべきです。Eメールに動画を挿入するためにHTML要素に<iframe>を追加する場合は、の代わりに video モジュールを使用してを選択する必要があります。