電子メールの背景画像ですべてのサブスクライバーを簡単に驚かせる方法（+それを行うためのコード！）

公開: 2021-07-23

ここの画像、そこのテキストのブロックで、電子メールは少し予測可能に感じることができます…加入者の体験を活気づける1つの方法は？背景画像。それらは予想外であり、デザインに別の次元を追加して、メールを「ポップ」にします。うまくいけば、彼らはあなたの電子メールを百万ドルのように感じさせますが、信じられないほど簡単にやってのけることができます。

読み続けてください：

背景画像の利点
刺激的なメールの例
設計上の考慮事項
背景画像のコーディング方法

背景画像とは何ですか？（そして、ポイントは何ですか？）

背景画像は、要素の背景または背後に適用される画像です。ヒーローの画像のようにメールの主な焦点になる代わりに、キャンペーンの他のコンテンツを補完する微妙なものになることがよくあります。

背景画像を使用する主な利点は、その上に追加のHTMLコンテンツを配置できることです。そのスペースに画像自体のみが存在できる他の画像とは異なり、背景画像はレイヤー化の可能性を提供するため、同じスペース内に追加の画像、テキスト、または召喚状（CTA）を存在させることができます。

ライブHTMLテキストと背景画像上の防弾ボタンの例

画像の一部としてそのテキストを含める代わりに、背景画像の上にライブHTMLテキストを使用することは、画像がオフになっているときにメッセージが読みやすくなることを意味します。これは、より優れた、よりアクセスしやすいHTMLメールを作成するための優れた手法です。

背景画像は、より良い読書体験を提供するキャンペーンの作成を支援するだけでなく、キャンペーンを競合他社と一線を画す、豊富なデザインの可能性も提供します。

ブランドが背景画像を使用している創造的な方法

ミロは、ヒーローセクションの後ろに図形を含む背景画像を配置し、ライブテキストを使用してオーバーレイされたメールのメインの見出しとメッセージに注目しました。

Uplersは、背景画像を使用してサービスの割引を強調し、クーポン画像をクーポンコードの後ろに配置しました。

Uplersはクーポンコードの背景画像をメールで送信します — 出典：Really Good Emails

Figmaは、このメールの本文に微妙な繰り返しの背景パターンを追加し、新しいホワイトボード製品を紹介しました。 それらが特徴とするパターンは、製品に見られる背景を反映しています。

メールのFigma背景画像 — LitmusBuilderでこのメールを表示する

チポトレは、このインパクトのあるジャンボヒーローとボディエリアの背後に、製品の写真やラインパターンなどのジャンボ背景画像を配置しました。この画像の上に、背景が透明なアニメーションGIFがあり、本文領域にライブテキストがあります。

微妙な背景画像を含むChipotleFriendsgivingメール — 出典：Really Good Emails

アニメーションGIFは、 Adobe Stockのこの例のように、背景画像として使用することもでき、アニメーションの背景の上に配置されたライブテキストやCTAボタンなどのヒーローコンテンツでお祝いのコレクションを宣伝します。

アニメーションGIFの背景画像を含むAdobeストックメール — 出典：Really Good Emails

設計上の考慮事項

背景画像の実装を検討する際には、考慮に値する設計上の考慮事項がいくつかあります。

対比

すべての読者が背景画像にオーバーレイされたコンテンツの価値を確実に得られるようにするには、コントラストに注意することが重要です。フラットカラーとほぼ同じ方法で画像を処理し、コンテンツの色に対して画像の色をテストします。

Figmaを使用して設計する場合は、色覚異常やコントラストなどのプラグインを追加して、Webコンテンツアクセシビリティガイドライン（WCAG）を満たしているかどうかを確認できます。 WebAimのコントラストチェッカーなど、デザインの色をテストできるWebアプリも多数あります。

シンプルさ

読みやすさを確保するもう1つの方法は、物事をシンプルに保つことです。背景が忙しいと、画像に配置したライブテキストの価値を得るのが難しくなる可能性があります。そのため、背景画像を機能ではなく拡張機能と見なすと役立つことがよくあります。

単色フォールバック

すべての電子メールクライアントが背景画像を尊重するわけではないため、単色のフォールバックを設計します。画像をサポートしない電子メールクライアントを使用しているサブスクライバーは、無地で素晴らしい体験をすることができます。デザインに一致し、前景の要素とよく対照的なフォールバックカラーを選択してください。

メールで背景画像をコーディングする方法

コードを説明する前に、どのクライアントがバックグラウンドCSSスタイルをレンダリングし、どのクライアントがVMLフォールバックの助けを必要としているかを見てみましょう。

良いニュース：インラインバックグラウンドCSSのサポートが改善され、ウェブメールクライアントがこのメソッドを完全にサポートするようになりました。つまり、バックグラウンドHTML属性は不要になりました。

悪いニュース：残念ながら、Windows 10Mailは背景画像が好きではありません。インラインCSSまたは非推奨のHTML背景属性はレンダリングされません。また、VMLを適用すると、「画像を表示できません」というエラーメッセージが表示されてレンダリングの問題が発生します。

Windows 10 Mailサブスクライバーのエクスペリエンスが心配な場合は、VMLを除外することを検討してください。これにより、フォールバックの背景色により、余分な装飾を行うことなく、Microsoft OutlookSuiteの対象者に優れた電子メールの閲覧体験を提供できます。

メールの背景画像がWindows10Mailでどのように表示されるか

背景画像の電子メールクライアントサポート

メールクライアント	インラインCSSの使用	VMLの使用
Apple Mail 14	✓✓	✘
Office 365（Mac）	✓✓	✘
Office 365（Windows）	✘	✓✓
Outlook 2016（macOS 10.12.6）	✓✓	✘
Outlook 2013、2016、2019（Windows 10）	✘	✓✓
Windows10メール	✘	✘
Gmailアプリ（Android 10）	✓✓	✘
Gmailアプリ（iOS 13.4.1）	✓✓	✘
Outlook（Android 7.0）	✓✓	✘
Outlook（iOS 12.0）	✓✓	✘
Samsung Mail（Android 7.0）	✓✓	✘
iPad 11 Air（Gen 4 iOS 14.2）	✓✓	✘
iPhone 12（iOS 14.2）	✓✓	✘
AOLメール（エッジ）	✓✓	✘
Gmail（Chrome）	✓✓	✘
Office 365	✓✓	✘
Outlook.com	✓✓	✘
Yahoo! 郵便	✓✓	✘

サブスクライバーはどの電子メールクライアントを使用しますか？

Litmus Email Analyticsを使用して、独自の電子メールクライアントの市場シェアを確認してください。背景画像を最適化する必要がある電子メールクライアントを確認します。（ヒント：Windows 10 Mailが低い場合は、汗を流さないでください。）

詳細→

それが邪魔になったので、コードについて話しましょう！

背景画像をメールに取り込むことの楽しい点の1つは、これを実現する方法がいくつかあることです。小さなセクションを埋めたり、メールの本文を覆ったり、単一の画像や繰り返しパターンを使用したり、リーダーがデスクトップ、モバイル、ライトモード、ダークモードのいずれであるか、またはいつでも背景画像を切り替えることができます。画像にカーソルを合わせるか、ロールオーバーします。

それぞれの手法には異なるアプローチが必要なので、これらをコーディングするための最良の方法を見てみましょう。

幅定義または固定の背景画像

固定幅の背景

背景画像を適用するときは、含まれているテーブルのセルにコードを追加するのが常に最善です。 <table>や<body>などの他のHTML要素に適用しても、一部の電子メールクライアントからサポートが得られる可能性はほとんどありません。これは次のようになります。

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

ここでは、インラインCSSスタイルにbackground-size：coverを含めて、セルの幅と高さに合わせて画像を作成し、中央に配置します。これらのスタイルを追加すると、2倍の画像を使用できるようになります。つまり、Retinaディスプレイで鮮明なレンダリングが表示され、さまざまなデバイスでレンダリングするためにコンテナーのサイズが変更された場合でも、コンテナー内にきちんと収まるようにサイズが変更されます。

ただし、これは、画像が小さすぎるか、コンテナに比例したサイズになっていない場合、ピクセル化または引き伸ばされて見える可能性があることも意味します。特に写真の場合。

背景画像は機能しますか？

GmailやOutlookなどの最も人気のあるメールアプリ全体で、背景画像のコードが自分のメールでどのように機能するかをご覧ください。

詳細→

現在、ほとんどの電子メールクライアントはインラインCSS背景スタイルをサポートしているため、背景の省略形CSSプロパティを使用して背景画像とフォールバックカラーを追加できます。つまり、これらを「背景」スタイルに適用するだけです。残念ながら、インラインでコーディングする場合、それ以上の背景スタイルは速記ではうまく機能しないため、ポジショニングやサイズ設定は個別のスタイルとして記述する必要があります。たとえば、 background-position：center;を使用します。背景サイズ：80％; 背景の代わりに：中央/ 80％; 。

VMLフォールバックを使用してOutlookでこれを機能させる

OutlookとOffice365 for Desktopも、CSSの背景スタイルをレンダリングしないため、背景画像を表示するために少し助けが必要です。これらの電子メールクライアントに背景画像を表示するには、キャンペーンモニター用にStig Morten Myreによって普及している手法を活用し、MicrosoftのVector Markup Language（VML）を適用する必要があります。

すでに作成したコードを使用して、必要なVMLとそれを含む<div>をテーブルセル内に配置します。

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
           <v:fill type="frame" src="fixed-background.jpg" />
           <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
           <![endif]-->
           <div>
<!--add your content here-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

    </td>
</tr>
</table>

繰り返さずにコンテナを埋める必要がある画像の場合、vml：fillタグ内で「frame」を使用する必要があります。このようにして、このタグ内で2倍の画像を使用できます。 v：rectタグでインラインスタイルを使用してコンテナの幅を設定していることを確認してください（上記の例では、600pxに設定されています）。

コンテナにパディングが必要な場合は、VMLをコンテナ内に配置すると、パディングが折りたたまれます。これを修正する方法は、VMLをコンテナーにラップすることです。したがって、コンテナーを次のように別のテーブル内にネストする必要があります。

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
<v:fill type="frame" src="fixed-background.jpg" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--add your content here-->
    </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>

背景画像を繰り返す

配置したコンテナ内で繰り返す背景を追加することもできます。良い例は、電子メールの本文全体でパターンを繰り返すことです。

背景画像を繰り返す例

コンテナセルに配置する画像がコンテナよりも小さい場合は、水平方向と垂直方向の両方で自動的に繰り返されます。一方向にのみ繰り返すには、「background-repeat」CSSでスタイルを設定し、値repeat-xを追加して水平方向に繰り返すか、repeat-yを追加して垂直方向に繰り返します。

コンテナ全体を完全に繰り返すパターンで埋めるには、コードは非常に単純です。

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
    <td style="background: url(repeat-background.png) #B5CFE3;">
        <!--add your content here-->
    </td>
</tr>
</table>

VMLフォールバックを使用してOutlookでこれを機能させる

繰り返しになりますが、Outlookクライアントでバックグラウンドレンダリングを確認したい場合は、VMLを適用できます。今回はコードが少し異なり、VMLがコンテナの前に配置されています。

<div>
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="repeat-background.png" color="#ffffff"/>
  </v:background>
  <![endif]-->
  <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;">
     <tr>
        <td align="center" style="background-image: url(repeat-background.png);">
       </td> 
    </tr>
</table>
</div>

背景を繰り返すには、v：fillタグに「タイル」タイプを入力します。当然のことながら、Windows 10 Mailにはレンダリングの問題がいくつかあり、背景が繰り返されると、レンダリングの問題がはるかに見苦しくなります。したがって、Windows 10 Mailサブスクライバーがいる場合は、VMLを除外するのが最も安全なアプローチである可能性があります。

高度な技術

固定された繰り返しの背景画像は、メールのデザインをレベルアップする多くの機会を提供しますが、それだけではありません。

コントラスト画像の交換

ダークモードが複数の電子メールクライアントで利用できるようになり、サブスクライバーの設定を尊重することで、より多くのユーザーにリーチし、信頼を築くことができます。背景画像を切り替えることは、ライトモードまたはダークモードのデザインを補完する優れた方法です。そして、それは楽しくてシンプルな拡張機能でもあります。

コントラストモード

これを実装するには、ダークモードメディアクエリに埋め込みCSSを追加する必要があります。これにより、ダークモードの背景画像がこのタイプのメディアクエリをサポートする電子メールクライアント内で確実に提供されます。

.darkmode-switch {
            background-image:url(background-dark.png) !important;
            background-color:#111111 !important;
        }

暗いフォールバックカラーを追加する価値があります。これは、リーダーがアクションを実行しないと画像を読み込まない電子メールクライアントに役立ち、画像が読み込まれていないときにメッセージを確実に読み取ることができます。

次に、HTMLで、ライトモードの背景画像を含むセルにクラスを適用します。単純！

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class= "darkmode-switch" style="background: url(background-light.png) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

注意：ダークモード環境でメールの色を反転させ、ダークモードメディアクエリの作成に費やしたすべてのハードワークを完全に見落としているメールクライアントは、設計が難しく、コーディングがさらに難しいものです。

これらの電子メールクライアントをオンサイドにすることはほぼ不可能です。ただし、ある程度の透明度のある背景画像を試して、ライトモードの場合は白、ダークモードの場合は黒などの高コントラストの背景色をコンテナに適用することができます。これにより、背景色を反転させることができます。私は次の例でこれを試しました：

さまざまなダークモードシナリオでのメールの背景画像

私のシェブロンの背景画像は、矢印の不透明度が30％で、矢印の間が完全に透明です。これは、問題のある電子メールクライアントが私のダークモードレンダリングを制御するときに、コンテンツが読み取り可能であることを意味します。

ダークモードのコーディングと電子メールクライアントサポートの詳細については、ダークモード電子メールの究極のガイドをご覧ください。

インタラクティブな背景

双方向性で加入者を喜ばせるのはどうですか？単純なホバーまたはロールオーバー効果で少し喜びを広めることができ、リーダーがコンテンツ上にカーソルを移動すると、コンテナーの背景が変更されます。

ホバーまたはロールオーバーの電子メール背景画像スイッチ

これを機能させるには、少し埋め込まれたCSSが必要です。これを<style>タグ内に配置します。

.background-rollover:hover{ 
        background-image: url(background-rollover-b.png) !important; 
        background-color:#020203 !important;
}

これで、次のように、このクラスをテーブルセルに適用するだけで済みます。

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class="background-rollover" style="background: url(background-rollover-a.png) #DBE8F0; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

デザインをレベルアップする

機会が豊富なため、背景画像を使用してメールデザインを強化することは、限界を押し広げ、群衆の中でメールを目立たせるための優れた方法です。これらのテクニックを実践するのに役立つように、この投稿で取り上げられているコードを入手できる便利なリソースを作成しました。

メールで背景画像をどのように使用しているかを確認したいと思います。以下のコメントで例を共有してください。

Litmusを使用して、背景画像が機能することを確認します

うまくいきましたか？ Litmusを使用して、100を超える電子メールクライアント、アプリ、およびデバイスで背景画像（および残りの電子メール）をプレビューします。そして、ブランド上のエラーのないメールに挨拶してください。

無料トライアルを開始→

2019年5月24日に、JasonRodriguezによって最初に公開されました。 最終更新日は2021年7月21日です。

電子メールの背景画像ですべてのサブスクライバーを簡単に驚かせる方法（+それを行うためのコード！）

背景画像とは何ですか？ （そして、ポイントは何ですか？）

ブランドが背景画像を使用している創造的な方法

設計上の考慮事項

対比

シンプルさ

単色フォールバック

メールで背景画像をコーディングする方法

幅定義または固定の背景画像

VMLフォールバックを使用してOutlookでこれを機能させる

背景画像を繰り返す

VMLフォールバックを使用してOutlookでこれを機能させる

高度な技術

コントラスト画像の交換

インタラクティブな背景

デザインをレベルアップする

背景画像とは何ですか？（そして、ポイントは何ですか？）