Marketing Cloud アカウントエンゲージメント (Pardot) メールが壊れているように見え、その理由がわからない場合は、ここが正しい状況です。この投稿では、Marketing Cloud アカウントエンゲージメントでメールをコーディングするときに見つかる可能性のある一般的なエラーについて説明します。
画像が壊れて見える
マーケティング担当者が直面する一般的な問題の 1 つは、電子メール キャンペーン内の画像が壊れていることです。特に別のデバイスや電子メール クライアントで画像が適切に読み込まれないとイライラすることがあります。これに対処するには、画像の URL が正しく、HTML コード内で適切にリンクされていることを確認してください。さらに、読み込み時間を短縮するために画像を最適化し、画像の読み込みに失敗した場合にコンテキストを提供する代替テキストの使用を検討してください。
確認すべき事項のチェックリストは次のとおりです。
画像が大きすぎますか？
画像ファイルのサイズが大きいと、読み込み時間が遅くなったり、まったく表示されなくなる場合があります。品質を損なうことなく画像を圧縮して、Web 用に画像を最適化します。
画像は正しい形式ですか?
さらに、画像が正しい形式 (JPEG、PNG、GIF など) であることを確認してください。このブログの執筆時点では、すべての電子メール クライアントが .webp 形式をサポートしているわけではありません。
SSL/HTTPS に問題はありますか?
Account Engagement アカウントまたは Web サイトが SSL (Secure Sockets Layer) または HTTPS を使用している場合は、画像 URL も HTTPS を使用するように更新されていることを確認してください。安全な (HTTPS) ページ上の安全でない (HTTP) 画像 URL が原因で混合コンテンツの警告が表示される場合、ブラウザーがブロックしたり壊れた画像を表示したりすることがあります。
コードに「pardot-region」が正しく挿入されていますか?
WYSIWYG エディターを使用して Account Engagement の画像をカスタマイズまたは置換する場合は、HTML コード内の「pardot リージョン」に注意することが重要です。これらの領域は、画像を含むコンテンツを変更できる編集可能なセクションを定義します。
HTML コードを更新するときは、画像ホルダーに対応するコード内の「pardot-width」属性と「pardot-height」属性に注意することが重要です。これらの属性を画像ホルダーの寸法と明示的に一致させることで、Account Engagement によってサイズが自動的に調整され、画像ホルダーの意図したサイズが歪んだり超過したりする可能性がなくなります。以下の例では、「pardot-height」を auto に設定することで、モバイルデバイス上で画像が自動的に調整され、引き伸ばされなくなります。
テキスト エディターを使用して画像を追加すると、画像が切れて表示されます。
テンプレートでは、Outlook のテキストの行の高さを制御する属性mso-line-height-rule:exactlyを使用できます。これにより、画像をそのサイズにトリミングできます。属性をmso-line-height-rule:at-least に変更して、柔軟性を高めます。すべての属性を at-least に変更しても問題ありません。
ダークモード
ダーク モードの互換性も考慮すべきもう 1 つの課題です。ダーク モードの人気が高まっているため、この設定でメールが正しく表示されることを確認することが重要です。ライト モードとダーク モードの両方で電子メールをテストし、色や読みやすさの問題を特定します。CSS メディア クエリを使用してダーク モード専用のスタイルを調整し、購読者にシームレスなエクスペリエンスを確保します。
確認すべき事項のチェックリストは次のとおりです。
ダークモードのメタタグはありますか?
ダーク モード (またはライト モード) メタ タグは、Web サイトの視覚的なプレゼンテーションとユーザー エクスペリエンスを向上させる機会を提供します。これらのタグは、ユーザーがダーク モードのときにコンテンツをどのように表示するかに関するヒントをブラウザーまたは電子メール クライアントに提供します。
CSSメディアクエリはありますか?
ダーク モード固有の CSS メディア クエリは、特定の条件をターゲットにし、それに応じてさまざまなスタイルを適用できるという点で、モバイル レスポンシブ メディア クエリに似ています。モバイル対応メディア クエリは画面サイズに基づいてレイアウトとスタイルを調整することに重点を置いていますが、ダーク モード固有のメディア クエリはユーザーのダーク モードの好みをターゲットにしており、それに応じてコンテンツの外観を変更できます。(prefers-color-scheme: dark)や@media (prefers-color-scheme: dark)
などのダーク モード固有のメディア クエリを使用すると、ユーザーがブラウザまたはオペレーティング システムの設定でダーク モードを有効にしているかどうかを検出できます。 。この情報は、HTML および CSS コード内の色、背景、テキストを調整して、ダーク モードのユーザーにより適切で視覚的に魅力的なエクスペリエンスを提供するのに役立ちます。コード例を参照してください。
ダークモードとライトモードの間で画像を切り替えていますか?
特定の画像は、ライト モードではうまく機能する特定の色または色の組み合わせに大きく依存している場合がありますが、ダーク モードでは効果的または視覚的に魅力的ではない可能性があります。画像を交換することで、各配色に最適化された代替バージョンを作成し、電子メールのデザイン全体の美しさと一貫性を高めることができます。コード例を参照してください。
Outlook で白いテキストが黒くなりますか?
Outlook のダーク モードの実装により、テキストに設定した色のスタイルがオーバーライドされ、白いテキストが黒として表示される場合があります。ダーク モードでは、Outlook は視認性を高めるために配色を調整しようとするため、電子メールの外観に予期しない変更が生じる可能性があります。Microsoft Outlook 電子メールのみを対象とする以下のコードを head タグに追加できます。
このコードを利用すると、Microsoft Outlook の電子メールにのみ影響する特定の CSS スタイルを適用できます。提供されたstyleブロック内で希望のスタイルを調整します。
要素内でクラスを使用する方法の例を次に示します。ダーク モードでの Outlook 電子メール
に対処する Nicole Merlin による完全なチュートリアルは次のとおりです。次のリソースを参照して、ダーク モードをサポートする電子メール クライアントの完全なリストと、電子メールのダーク モードを最適化するための追加のヒントにアクセスしてください。
プリヘッダーテキスト
プリヘッダー テキストはプレビュー スニペットとも呼ばれ、受信者にメールを開かせるために不可欠です。ただし、場合によっては切れてしまったり、正しく表示されない場合があります。これを回避するには、プリヘッダー テキストを簡潔にし、推奨される文字数制限内に保つようにしてください。さまざまな電子メール クライアントでテストして、意図したとおりに表示されることを確認します。
確認すべき事項のチェックリストは次のとおりです。
これを隠す必要がありますか？
電子メールのプリヘッダー テキストを非表示にするか表示するかの決定は、デザイン設定、マーケティング戦略、電子メール キャンペーンの特定の目標など、いくつかの要因に基づいて変わる場合があります。電子メール全体の外観上、これを非表示にする必要があると判断した場合は、HTML コードの<head>セクション内に<style>タグを含めることができます。CSS セレクターを使用して目的の要素をターゲットにし、適切なスタイルを適用して非表示にします。以下の例「A」を参照してください。この例では、CSS コードは#emailContentsコンテナー内のクラス名.previewを持つ要素をターゲットにし、画面幅が少なくとも 600 ピクセルの場合に特定のスタイルを適用します。#emailContents ID は Account Engagement に固有であり、編集者がWYSIWYG エディターを使用してコンテンツを編集できるようにする必要があります。それ以外の場合、要素内のコンテンツはstyle=”display: none;で非表示になります。mso-hide: all」インライン スタイルは表示プロパティをnoneに設定します
プリヘッダーテキストから不要な文字を削除する
プリヘッダー テキストは短く簡潔にする必要があり、理想的には 80 ～ 100 文字の範囲内である必要があります。受信者がメールを開いたくなるような、明確で説得力のあるメッセージを配信することに重点を置きます。
プリヘッダー テキストを表示したくない場合は、プリヘッダーの内容を空のままにすることができます。ただし、一部の電子メール クライアントでは、電子メール本文のテキストの最初の行など、デフォルトのコンテンツがプリヘッダーに自動的に入力される場合があることに注意してください。これを軽減するには、プリヘッダーにスペースまたは非改行スペース ( ) を追加して、自動入力されたテキストをオーバーライドすることを検討してください。上記の例「C」を参照してください。
リンクが機能しません
壊れたリンクは購読者にとってイライラする可能性があり、クリックスルー率に悪影響を与える可能性があります。これを回避するには、メール内のすべてのリンクを徹底的に確認してテストしてください。URL が正確であることを再確認し、適切な形式であることを確認してください。
確認すべき事項のチェックリストは次のとおりです。
正しい形式で書きましたか?
リンクの URL が正確で、適切な形式であることを再確認してください。リンクに必要なプロトコル (例: 「http://」または「https://」) が含まれており、タイプミスや文字の欠落が含まれていないことを確認してください。
リンクが切れていませんか?
リンク先のページが利用できなくなっているか、移動または削除されている場合、リンクは機能しません。ターゲット Web ページがアクティブでアクセス可能であることを確認します。
URLエンコードの問題
特殊文字またはスペースを含む URL では、エンコードの問題が発生する可能性があります。
URL エンコード標準を使用してリンクが正しくエンコードされていることを確認してください (スペースを「%20」に置き換えたり、特殊文字を対応するエンコード値に置き換えたりするなど)。
クリックできないリンク
リンクが適切な href 属性を持つアンカー タグとして正しくコーディングされていない場合、クリック可能なリンクとして機能しません。リンクが タグ内にラップされていること、および href 属性に正しい URL が含まれていることを確認してください。
電子メール クライアントによってブロックまたはフィルタリングされている
一部の電子メール クライアントでは、セキュリティ上の理由から特定のリンクをブロックまたはフィルタリングする場合があります。他の環境でテストしたときにリンクが機能しているように見える場合は、特定の電子メール クライアントの設定またはポリシーが原因である可能性があります。
モバイルデバイスとの非互換性
モバイル対応ではない方法でデザインまたはフォーマットされたリンクは、モバイル デバイスまたは特定の電子メール クライアント内では正しく機能しない可能性があります。リンクが意図したとおりに機能するように、モバイルの応答性を最適化します。
URL リダイレクトの問題
リンクに URL リダイレクトが含まれる場合は、リダイレクト設定が正しく、適切に機能していることを確認してください。リダイレクト設定が正しくないと、リンクが失敗する可能性があります。
カスタムフォントを使用したい
Account Engagement はフォント ホスティングを提供しませんが、Web セーフ フォントを使用するか、外部でホストされているフォント ファイルにリンクすることで、電子メール キャンペーンにカスタム フォントを組み込むことができます。独自のサーバー上でフォント ファイルをホストすることも、サードパーティのフォント ホスティング サービスを利用して、@font-faceルールを使用して電子メールの CSS でそれらのファイルを参照することもできます。こうすることで、Account Engagement の制限内で作業しながら、フォントの選択をより詳細に制御できます。
確認すべき事項のチェックリストは次のとおりです。
Web セーフ フォントまたは電子メール クライアントをサポートするフォントを選択してください
電子メール クライアントではフォントのサポートが制限されているため、Web セーフ フォントまたは電子メール用に特別に設計されたカスタム フォントを使用することをお勧めします。一貫したレンダリングを確保するには、ほとんどのオペレーティング システムで利用可能で、電子メール クライアントで広くサポートされているフォントを選択します。
フォント ファイルをホストする
フォント ファイルを Web サーバーまたはフォント ホスティング サービスにアップロードします。通常、電子メール クライアント間の互換性を最大限に高めるには、WOFF、WOFF2、TTF、EOT などのさまざまな形式のフォント ファイルが必要になります。
CSS でフォントフェイスのルールを定義する
CSS コードでは、@font-faceルールを使用してフォント ファミリを宣言し、フォント ファイルの URL を指定します。さまざまなフォント形式を含めて、より幅広い電子メール クライアントをカバーします。「YourCustomFont」を
目的のフォント名に置き換え、フォント ファイルの場所を反映するようにurl()関数のファイル パスを調整します。
フォントリンクがクリックとしてカウントされます
アカウント エンゲージメントでは、通常、リンクが追跡され、クリック数としてカウントされ、電子メール キャンペーンに貴重なエンゲージメント指標と洞察が提供されます。ただし、メールにフォント リンクを含めると、アカウント エンゲージメントによるリンク インタラクションの追跡方法により、意図せずクリックとしてカウントされる場合があります。
これは、Account Engagement の追跡メカニズムがデフォルトですべてのリンクをクリック可能な要素として扱うために発生する可能性があります。受信者が電子メールを開き、電子メール クライアントがリンクされたソースからフォント ファイルを取得すると、Account Engagement の追跡システムはこれをクリック イベントとして登録します。
確認すべき事項のチェックリストは次のとおりです。
カスタム フォントをどのように使用していますか?
アカウント エンゲージメントでフォント リンクがクリック数としてカウントされるのを回避するには、従来のメソッドの代わりに@importメソッドを使用して、メールにカスタム フォントを含めることができます。@importメソッドの使用例を次に示します。
背景画像
HTML 電子メール テンプレートの背景画像は、独特のレイアウトを作成し、奥行きを加え、製品を紹介する創造的な可能性を提供します。デザイン要素として人気を集めています。ただし、Account Engagement 電子メールのデザインに背景画像を組み込む場合は、特定の要素を考慮することが重要です。
確認すべき事項のチェックリストは次のとおりです。
すべての電子メール クライアントが背景画像をサポートしているわけではありません
一部のクライアントは背景画像をブロックまたは無視するため、電子メールに意図したデザインが表示されない場合があります。さまざまな電子メール クライアントで電子メールをテストし、一貫したレンダリングを確保します。
インラインCSS
互換性を最大限に高めるために、通常、HTML メールの背景画像にはインライン CSS を使用することをお勧めします。style属性を HTML 要素内で直接使用して、背景画像と関連プロパティを定義します。
この例には、Microsoft Outlook および最も一般的な電子メール クライアントで背景画像を表示するために必要なコードが含まれています。
画像サイズと最適化
許容可能な品質を維持しながら、背景画像を圧縮してファイル サイズを削減し、背景画像を最適化します。画像ファイルが大きいと、電子メールのサイズが増加し、読み込み時間が増加し、受信者のエクスペリエンスに悪影響を及ぼす可能性があります。電子メールの推奨ファイル サイズを超えないように最適化された画像を目指します。
フォールバック背景色
背景画像が読み込まれない場合、またはサポートされていない場合に備えて、デザインを補完する代替背景色を提供します。これにより、背景画像がなくても電子メールが視覚的に魅力的に見えるようになります。
アクセシビリティ
背景画像を使用する場合は、アクセシビリティのガイドラインを考慮してください。背景画像の代替テキストを含めると、背景画像が表示されないスクリーン リーダーや電子メール クライアントを使用するユーザーでも電子メールのコンテキストを理解できるようになります。そしてもちろん、背景画像にテキストを使用することはお勧めできませんし、ベストプラクティスでもありません。
Outlook のボタン
ボタンが折りたたまれたり、正しく表示されなかったりすることは、HTML 電子メールのコーディングにおけるもう 1 つの課題です。これを回避するには、ボタンにテーブルベースのレイアウトを使用し、幅と高さの値を明示的に設定します。さまざまな電子メール クライアントでボタンをテストし、一貫性がありクリック可能であることを確認します。
確認すべき事項のチェックリストは次のとおりです。
Outlook の角を丸くしたいです。
VML (Vector Markup Language) を使用すると、特に丸い枠線 ( border-radius )などの最新の CSS 機能を完全にはサポートしていない古いバージョンの Outlook で、角の丸いボタンを作成できます。VML を使用すると、カスタム形状を作成し、要素に丸い角を適用できます。
VML を使用した角の丸い HTML ボタンの例を確認してください。
この方法を Account Engagement 内の HTML 電子メール テンプレートで使用しないことを強くお勧めします。2 つの別々の場所でリンクを置き換える必要があり、注意して取り組まないと見落とされやすいためです。
ボタンのパッドが剥がれてしまったのはなぜですか?
ボタンのパディングが削除または剥ぎ取られているように見える状況に直面している場合は、Outlook の折りたたみの問題が原因である可能性があります。この問題をトラブルシューティングするには、「#」などのプレースホルダーやダミー リンクを単に使用するのではなく、テストしているリンクがアクティブで有効なリンクであることを確認してください。非アクティブなリンクまたはプレースホルダー リンクを使用すると、問題の根本原因となり、ボタンからパディングが予期せず削除される可能性があります。