エピソード4の配信：メールの背景画像を理解する

この配信のエピソードでは、メールデザイナーにとって不可欠なテクニック、つまり謙虚でありながら強力な背景画像について見ていきます。 背景画像が重要である理由、さまざまな手法を使用して背景画像をコーディングする方法、およびそれらのさまざまな方法をさまざまな電子メールクライアント間で比較する方法を学びます。 このエピソードは、最近更新された電子メールの背景画像の究極のガイドのコンパニオンです。 ヒント、コツ、コードをチェックしてください。

必ずiTunesまたはSpotifyで配信を購読して、将来のエピソードを聴き、ハッシュタグ#DeliveringPodcastを使用してTwitterの会話に参加してください。

エピソードのトランスクリプト

メールキャンペーンに興味深いビジュアルを追加する方法はたくさんあります。

CSSではさまざまなスタイルオプションを使用できますが、適切な画像が必要な場合もあります。 しかし、電子メールで画像を使用するための最良の方法は何ですか？ この配信のエピソードでは、メールデザイナーにとって不可欠なテクニック、つまり謙虚でありながら強力な背景画像について見ていきます。

私はジェイソン・ロドリゲスです。Eメールマーケティングとその世界での位置付けについてのポッドキャストであるDeliveringへようこそ。 配信は、Eメールマーケター向けの業界をリードするプラットフォームであるLitmusによって提供されます。 Litmusを使用して、より優れたEメールマーケティングキャンペーンを作成、レビュー、テスト、追跡する60万人を超えるEメールプロフェッショナルに参加してください。 Litmus.comで詳細を確認し、7日間の無料トライアルを入手してください。

画像はメールマーケティングキャンペーンの定番です。 これらは、製品のショット、かわいいイラスト、ロゴ、アイコン、および場合によってはメール全体に使用されます。 特に小売業界では、マーケターは完全にPhotoshopなどのツールでキャンペーンを設計し、それらの画像をスライスして、サブスクライバーに送信する前にHTMLにダンプする傾向があります。 見出し、コピー、召喚状など、すべての情報が画像内に存在します。

ブランドガイドラインを順守し、メールをすばやく作成するのは良い方法ですが、この方法で画像を使用することにはいくつかの大きな欠点があります。

1つ目は、多くの電子メールクライアントがデフォルトで画像を無効にしていることです。 電子メール内の画像（およびすべてのコンテンツ）は、文字通り電子メールクライアントによってアンロードされたままになり、多くのサブスクライバーにとって壊れているように見える空白のキャンペーンになります。

2つ目は、スクリーンリーダーソフトウェアなどの支援技術を使用しているサブスクライバーは、電子メールのコンテンツを体験できないことです。

どちらの場合も、メールキャンペーンに費やしたコピー、取引、価値のすべてが本質的に無駄になっています。 より良い解決策が必要ですよね？

背景画像を入力します。

背景画像は、他の電子メールと同様に、単なる画像です。 これらはサーバーにアップロードされ、コードでリンクされているファイルです。 違いは、背景画像がHTML画像タグではなく、他のHTML要素の属性またはCSSとして適用されることです。

背景画像をコーディングするには4つの方法があり、それぞれに長所と短所があります。

最初の、より伝統的な方法は、背景属性をテーブルセルに適用することです。 属性の値は、画像を指すURLだけです。 この方法は、電子メールクライアント全体でかなりよくサポートされているため、優れています。 ただし、主な欠点は、柔軟性があまり高くないことです。 背景画像のサイズを制御することはできません。デフォルトでは、画像は要素全体で繰り返されます。

CSSを使用して背景画像を読み込むこともできます。 次の2つの手法は同じ方法を使用しますが、適用方法が異なります。

CSSには、いくつかの背景プロパティがあります。特に、background-image、background-repeat、background-position、background-size、background-colorです。 非常に役立つ背景の速記プロパティもあります。

これらのプロパティを使用して、画像へのURLを含めたり、画像の配置方法や繰り返しの有無を制御したり、画像が読み込まれない場合のフォールバックカラーを含めたりすることができます。

CSSの背景を使用する最初の方法は、これらのプロパティをメールの先頭にあるスタイルブロックに埋め込むことです。 テーブルセルやdivなどのHTML要素をターゲットにして、それを使用するだけです。 この方法は、コーディング、読み取り、および保守が簡単ですが、埋め込みスタイルがすべての電子メールクライアントでサポートされているわけではありません。

より堅牢な方法は、これらのプロパティをHTML要素にインラインで含めることです。 複数の要素で背景画像を使用している場合、これは厄介になる可能性がありますが、私たちは電子メールオタクであり、インライン画像の使用に慣れているため、それでも完全に管理できます。

電子メールに背景画像を含める最後の方法は、「防弾背景」と呼ばれるものを使用することです。 防弾の背景は、コードにVML（またはVector Markup Language）も含めることにより、HTML属性メソッドの上に構築されます。 VMLは、OutlookなどのOffice製品で使用されるMicrosoft独自の言語です。 VMLで背景画像を適用することにより、Microsoft Outlookで機能しますが、これは前述の他の方法には必ずしも当てはまりません。

VMLを使用することの主な欠点は、VMLにアクセスしにくく、十分に文書化されていないことと、率直に言って理解しにくい多くのコードが追加されることです。 簡単にするために、キャンペーンモニターの友達は、防弾背景を生成するためのすばらしいツールを実際に作成しました。 あなたはそれを、便利に、backgrounds.cmで見つけることができます。

選択する方法に関係なく、従来のコード化された画像よりも電子メールで背景画像を使用することには驚くべき利点があります。

主な利点はアクセシビリティです。 背景画像を使用することで、すべてのコンテンツの画像ではなく、ライブのHTMLテキストに依存できます。 テキストは画像のようにブロックされることはないので、画像がオフになっている場合でも、メッセージはサブスクライバーにとって読み取り可能です。 また、スクリーンリーダーが必要なユーザーは、従来の画像とは異なり、読み上げられたコンテンツを聞くことができます。

CSSを使用してHTMLコンテンツのスタイルを設定し、Photoshopから出力される画像のようにデザインされているように見せることができます。また、そこにCTAボタンを含めることもできます。

したがって、背景画像は、単純なグラデーション、派手な製品ショット、繰り返しパターンなど、追加の視覚的なスタイリングを含めるために使用されます。 これらはHTMLテキストと連携して機能し、美しく使いやすい電子メールを作成します。

さらにクールなのは、アニメーションGIFを背景画像として含めたり、画面サイズやデバイスに基づいて画像を交換したり、数年前にLitmusLiveのお知らせメールで行ったようにビデオの背景をコーディングしたりできることです。

背景画像を最大限に活用するために必要なことはたくさんあります。 最近、Litmusブログで電子メールの背景画像の究極のガイドの更新を公開しました。これはチェックする価値があります。 これは、背景画像を強化するコードを確認したり、独自のキャンペーンを更新するためのインスピレーションを得たりするのに最適な方法です。 リンクについては、今日のショーノートにアクセスしてください。

また、iTunesまたはSpotifyで配信を購読して、より優れたHTMLメールを作成するためのより多くのテクニックを掘り下げる将来のエピソードを聞くようにしてください。