HTMLメールの背景色とグラデーションをコーディングするための最良の方法

公開: 2021-04-22

背景色のコーディングは簡単な作業のように聞こえますか？真実？このちょっとしたスタイリングでさえ、いくつかの落とし穴があり、電子メールクライアント間で一貫したレンダリングを行うために行う必要のあるいくつかの考慮事項があります。

そして、受信トレイの神々をなだめる必要があるのは開発者だけではありません。ダークモードが勢いを増しているため、注意すべき環境はさらに多くなります。その中には、電子メールの設計者がデザインに背景色を適用する際に特別な注意を払う必要があるものもあります。

このブログ投稿では、次のことを学びます。

背景色の利点
単色の背景をコーディングする方法（+電子メールクライアントのサポート）
グラデーションの背景をコーディングする方法（+電子メールクライアントのサポート）
ダークモード用に最適化するためのヒント

メールで背景色を使用するのはなぜですか？

背景色戦略を導入することで、電子メールプログラムの向上に関するいくつかのニーズが満たされます。技術的な観点から、背景色を実装してもメールに読み込み時間が追加されることはなく、画像がオフになっていても表示されます。これらは、コンテンツを分離したり、メッセージングを呼び出したり、サブスクライバーの受信トレイで他のメールと区別したりするのに役立ち、視聴者のエンゲージメントを高める可能性があります。

受信トレイで目立つ

宣伝文句からのこのメールのように、インパクトのあるオープニング体験を作成できます。

ヒーローエリアはパンチを詰め込みます。大胆なオレンジ色の背景は、ロゴの青と対比することでインパクトを与え、ブランドアイデンティティを高めます。読者がヒーローエリアをスクロールすると、セカンダリコンテンツが白い背景に配置され、大量のコピーに理想的な読書体験を提供します。

セクションを分離する

長いメールを受け取っている場合、色はさまざまなコンテンツブロックを視覚的に分離するための優れた方法であるため、より消化しやすくなります。

コーヒーハウスの巨人スターバックスからのプロモーションメールは非常に長くなる可能性があり、1つのメールに複数のプロモーションが含まれます。セクションが互いに離れるのを助けるために、異なる背景色が使用されます。

ブランドアイデンティティを高める

グラデーションは、Marketing Agency 1973 Ltdのブランドアイデンティティの一部です。そのため、メールの背景に大胆な線形グラデーションがよく見られます。背景のグラデーションは、コンポジションをよりダイナミックに見せることができ、サブスクライバーにスクロールを促すことさえできます。

1973Ltdのグラデーションの背景の電子メールの例 — 出典：Really Good Emails

では、これらのテクニックをメール開発に取り入れるための最良の方法は何でしょうか？私は、チームメイトでありLitmusメールの開発者であるCarin Slaterに、ソリッドな背景とグラデーションの背景のコーディングについて説明してもらいました。

単色のHTMLメールの背景色をコーディングする方法

背景色は、複数の方法で複数の場所にコーディングできます。ただし、各方法は電子メールクライアント間で等しくサポートされていません。これは、トップの電子メールクライアントでどの背景スタイルコードとカラーコード方法が機能するかを示す簡単なグラフです。

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

スタイルコード	CSSプロパティ「背景」と「背景色」				HTML属性 'bgcolor'
カラーコード	6桁の16進数	3桁の16進数	RGB	RGBA	6桁の16進数	3桁の16進数	RGB	RGBA
Apple Mail 14	✓はい	✓はい	✓はい	✓はい	✓はい	✓はい	✘いいえ	✘いいえ
Outlook 2016（macOS 10.12.6）	✓はい	✓はい	✓はい	✓はい	✓はい	✓はい	✘いいえ	✘いいえ
Outlook 13、16、19（Windows 10）	✓はい	✓はい	✓はい	✘いいえ	✓はい	✘いいえ	✘いいえ	✘いいえ
Outlook Office 365（Windows 10）	✓はい	✓はい	✓はい	✘いいえ	✓はい	✘いいえ	✘いいえ	✘いいえ
Outlook Office 365（Mac OS 10.15）	✓はい	✓はい	✓はい	✓はい	✓はい	✓はい	✘いいえ	✘いいえ
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メール（エッジ）	✓はい	✓はい	✓はい	✘いいえ	✓はい	✘いいえ	✘いいえ	✘いいえ
Comcast（エッジ）	✓はい	✓はい	✓はい	✓はい	✓はい	✓はい	✘いいえ	✘いいえ
Gmail（Chrome）	✓はい	✓はい	✓はい	✓はい	✓はい	✓はい	✘いいえ	✘いいえ
Office 365	✓はい	✓はい	✓はい	✓はい	✓はい	✓はい	✘いいえ	✘いいえ
Outlook.com	✓はい	✓はい	✓はい	✓はい	✓はい	✓はい	✘いいえ	✘いいえ
Web.de	✓はい	✓はい	✓はい	✘いいえ	✓はい	✘いいえ	✘いいえ	✘いいえ
Yahoo! 郵便	✓はい	✓はい	✓はい	✘いいえ	✓はい	✘いいえ	✘いいえ	✘いいえ

私たちは皆、電子メールクライアントが少し厄介になる可能性があることを知っています。では、すべての電子メールクライアントで機能するように背景色をコーディングするための最良の方法は何でしょうか。私たちの推奨事項とその理由を説明します。

1.テーブルとテーブルセルを使用する

HTMLには、背景色を追加できる場所が4つあります。

<本体>
<div>
<表>
<td>

背景色を追加する最も安全な場所は、テーブルまたはテーブルセルです。

<body>タグはYahooとAOLで削除されるため、そこに適用された背景色はこれらの電子メールクライアントには表示されません。また、本文の後に折り返しの<div>に色を配置すると、メールの<div>タグがサポートされていないため、Outlookクライアントを除くすべての場所で機能します。

幅広い電子メールクライアントサポートを利用するには、電子メール全体を100％幅の<table>タグでラップし、そこに背景色を配置します。また、メールのセクションにテーブルセル<td>を使用すると、特定のコンテンツブロックの色付けをより柔軟に行うことができます。

2.CSSプロパティとHEXカラーコードまたはRGB値を使用して色を追加します

背景色は複数の方法でコーディングできます。

bgcolorHTML属性の使用
CSSプロパティbackground-colorを使用する
CSSの省略形のプロパティの背景を使用する
6桁の16進カラーコードを使用
3桁の16進カラーコードを使用
RGBカラー値の使用

テーブルまたはテーブルセルに背景色を配置する方法については、CSSプロパティを使用する必要があります。

2つのCSSプロパティメソッド（background-colorとbackground）をテストしたところ、色を追加するだけ（画像なし）である限り、どちらも同じ一貫した結果が得られることがわかりました。 caniemail.comによると、色を追加する以外の目的でbackgroundプロパティを使用すると、色が表示されない場合があります。

bgcolor HTML属性は、Outlookではうまく機能せず、3桁のHEXコードのサポートに一貫性がありませんでした。また、RGB値とRGBA値を使用すると、色が正しくないか、色が完全に削除されます。

Outlookのさまざまな方法を使用した背景色のテストを次に示します。これにより、自分で確認できます。

OutlookのHTMLメールで背景色がどのようにレンダリングされるかに関するLitmusテスト — リトマスでこのテストを見る→

他の電子メールクライアントでは、3桁のHEXコードは適切にレンダリングされましたが、RGBおよびRGBA値をbgcolorHTML属性に適用すると誤った色になりました。

Litmusは、AppleMailのHTMLメールで背景色がどのようにレンダリングされるかをテストします — リトマスでこのテストを見る→

すべてのテストの結果、1つの結論に達しました。CSSプロパティに固執し、3桁または6桁のHEXコードまたはRGB値を使用することです。それらはすべての電子メールクライアントで機能しました。

RGBA値のアルファを使用した不透明度の導入は、Outlook、Web.de、またはGMX.deではサポートされていませんでしたが、それ以外の場合は適切にサポートされていました。

したがって、テーブルの背景全体に色を付けるには、最終的なコードは次のようになります。

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #427CA9;">

または、特定のテーブルセルに色を追加します。

<td style="background-color: #427CA9;">

そして、それは本当にそれです！

メールの背景色などをQAテストします

あなたはそれを正しくしましたか？最も人気のある電子メールクライアントで電子メールがどのように表示されるかを確認して、ブランド上でエラーのないサブスクライバーエクスペリエンスを確保できます。

方法を学ぶ→

グラデーションの背景を作成する方法

背景色を一段高くしたい場合は、グラデーションを追加してみてください。

CSSグラデーションはどこでもサポートされているわけではありませんが、ほとんどすべての電子メールクライアントでグラデーションをレンダリングできるようにするフォールバックがあります。

グラデーションの背景に対する電子メールクライアントのサポート

メールクライアント	CSS線形グラデーションのサポート	CSS線形グラデーション、VMLグラデーション、および画像フォールバックのサポート
Apple Mail 14	✓はい	✓はい
Outlook 2016（macOS 10.12.6）	✓はい	✓はい
Outlook 13、16、19（Windows 10）	✘いいえ	✓はい
Outlook Office 365（Windows 10）	✘いいえ	✘いいえ
Outlook Office 365（Mac OS 10.15）	✓はい	✓はい
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メール（エッジ）	✘いいえ	✓はい
Comcast（エッジ）	✓はい	✓はい
Gmail（Chrome）	✓はい	✓はい
Office 365	✘いいえ	✓はい
Outlook.com	✘いいえ	✓はい
Web.de	✘いいえ	✘いいえ
Yahoo! 郵便	✘いいえ	✓はい

開始方法は次のとおりです。

1.CSS線形グラデーションの背景をテーブルまたはテーブルセルに適用します

単色の背景の場合と同じように、CSS線形グラデーションの背景をテーブルまたはテーブルセル、または含まれているdivに適用して（Outlookの回避策については後ほど詳しく説明します）、次のようなものを作成します。

CSS線形グラデーションの背景のLitmusメールの例 — LitmusBuilderでこのグラデーションを作成した方法をご覧ください

この例では、グラデーションには紫、マゼンタ、オレンジの3色が含まれています。スタイリングはHTML内で開始され、bgcolor属性に単色のフォールバックが適用されます。次に、インラインCSSスタイル内で、backgroundプロパティとRGBメソッドを使用してそのフォールバックを繰り返します。

線形グラデーションを作成するには、backgroundプロパティを再度含め、線形グラデーションスタイルを適用します。作成しているグラデーションは左上から右下に斜めにレンダリングされるため、グラデーション角度の構文（315度）から始めます。次に、色を表示する順序で、RGBAメソッドを使用して各色を宣言します。

RGBAカラースタイリングの後に、その色を表示する位置を含めます。これはあなたの色をうまく混ぜ合わせるのに役立ちます。色の位置を選択する方法を理解するには、CSSグラデーションオンラインジェネレーターを使用できます。

最終的には次のようなコードになります。

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#e37b46" style="background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);">

2.VMLグラデーションを使用してOutlookのフォールバックを作成します

多くのサブスクライバーがOutlookを使用していますか？次に、Vector Markup Language（VML）を使用して背景のグラデーションを追加する必要があります。

<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="gradient" color="#e37b46" color2="#56328b" />
</v:background>
<![endif]-->

VMLグラデーションは、2色で最適に機能します。 3つ以上の色を使用するオプションがありますが、1990年代初頭のものと非常によく似ており、それを飼いならすために何ができるかについてはあまり制御できません。 3つ以上のカラーグラデーションが必要な場合は、画像を使用するのが最適です（次のステップでその方法を説明します）。

画像ベースのVMLグラデーションの場合、画像サイズを試して、スペースを埋めるのに最適な方法を見つける必要があります。 type =” frame”またはtype =” tile”属性を使用できます。 type =” tile”の場合は非常に長い細いグラデーションが適切に機能しますが、type =” frame”の場合は短い幅の広いグラデーション画像の方が適切です。

何が機能するかを確認する最良の方法は、画像を挿入して、Litmusでどのように表示されるかを確認することです。

3. Outlook、Yahoo、およびAOLの画像ベースのフォールバックを作成します

Yahoo、AOL、Outlook（iOSおよびAndroid）、およびOutlook.comにサブスクライバーがいる場合は、イメージベースのフォールバックを作成できます。

グラデーションを適用するセルまたはテーブルに「グラデーション」のクラスを追加します。次に、さまざまなターゲティング方法を使用して、CSS背景画像を割り当て、グラデーションが表示されないグラデーションCSSスタイルを上書きできます。

Outlook.comをターゲットにするには、次のようなものを使用します。

[class~="x_gradient"] { 
url('https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg') !important; 
background-size: 100% 100% !important; 
background-repeat: repeat-x !important;
}

YahooとAOLをターゲットにするには、次を使用します。

.& .gradient { 
url('https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg') !important; 
background-size: 100% 100% !important; 
background-repeat: repeat-x !important;
}

両方のOutlookモバイルクライアントをターゲットにするには、次を使用します。

body[data-outlook-cycle] .gradient { 
url('https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg') !important; 
background-size: 100% 100% !important; 
background-repeat: repeat-x !important;
}

グラデーションの例では、画像ベースのフォールバックを作成しました。これを繰り返すには、グラデーションの角度に別れを告げ、上から下に表示するように色を調整する必要がありました。

フォールバック画像ベースのグラデーション背景のlitmusメールの例 — LitmusBuilderでこのグラデーションを作成した方法をご覧ください

4.他のすべての電子メールクライアントには単色のフォールバックカラーを使用します

どちらの修正もサポートしていない電子メールクライアントの場合は、必ずフォールバックカラーを指定してください。

この場合、6桁のHEXカラーでbgcolor属性を使用して、Windows10およびOffice365デスクトップクライアントにフォールバックカラーを提供します。 Web.deは、CSSのbackgroundプロパティをフォールバックとして使用します。

したがって、テーブルの背景全体に色を付けたい場合、メールでインラインで使用する最終的なコードは次のとおりです。

<table class="gradient" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#e37b46" style="background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="frame" color="#e37b46" src="https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg" />
</v:background>
<![endif]-->

または、特定のテーブルセルだけに色を付ける場合は、次のコードを使用します。

<td class="gradient" align="left" valign="top" bgcolor="#e37b46" style="background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:[width]px; height: [height]px;">
<v:fill type="frame" color="#e37b46" src="https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg" />
<v:textbox inset="0,0,0,0">
<![endif]-->

VMLに慣れておらず、正しく機能していることを確認したい場合は、キャンペーンモニターに、Stigが開発した便利なツールがあり、電子メールに背景画像を追加できます。同じツールを使用して、 v：fill type =” tile”をv：fill type =” gradient”に置き換えてグラデーションを作成できます。必ず、開始グラデーションと終了グラデーションの両方の色をcolor =””とcolor2 =””で宣言し、 src =””属性を削除してください。上記の例では、 v：fill type =” frame”を使用して、画像がフレーム全体に広がり、繰り返されないようにします。これは網膜の背景画像の優れた修正でもありますが、CourtneyFantinatoに任せます。

ダークモードを忘れないでください

背景色のサポートが改善されたちょうどその時、ダークモードがミックスに投入されました。

加入者のコントラストの好みに基づいてオーダーメイドの読書体験を作成するこの機会は、アクセシビリティにとって大きな勝利ですが、電子メールの設計者と開発者にとっては別のハードルです。

ダークモードメールの究極のガイド

ダークモード用にメールを最適化するのは難しい場合があります。最高のオンブランドダークモード電子メールサブスクライバーエクスペリエンスを作成するためのコーディングと設計のヒントに関する究極のガイドを確認してください。

ハウツーガイドを入手→

Apple Mail、iPad、iPhoneネイティブメールアプリ、HEY、Outlookアプリなどの電子メールクライアントは、組み込みのCSSスタイルでターゲットにできますが、独自のデフォルトレンダリングを使用してダークモードソリューションを提供する電子メールクライアントもあります。

iOSおよびAndroid用のOutlook.com、Office 365、およびGmailアプリはすべて、部分的または完全に色を反転してダークモードエクスペリエンスを作成し、場合によっては恐ろしい結果をもたらします。

この色の反転を上書きする方法はまだありません。 ただし、これらの環境での電子メールのレンダリングを改善するために検討できることがいくつかあります。

ヒント1：カラーテストで情報に基づいたデザインの選択を行う

あなたの色があなたが意図していなかった方法で調整されるのを見るのは少し悲痛かもしれません。また、色が変わらないのにフォントの色が変わる場合は少し心配です。アクセシビリティに関する考慮事項はすべてウィンドウの外に出ます。

ダークモードの色を反転する電子メールクライアントでブランドの色をテストして、それらがどのように変更されるかを確認することは価値があります。色がどのようにレンダリングされるかがわかったら、設計段階で情報に基づいた色の選択を行うことができます。

同様のテストを実行して、制御できない電子メールクライアント間で色とトーンの一部がどのように公平になるかを確認しました。

ダークモードでのLitmusHTMLメールの背景色テスト — リトマスでこのテストを見る→

明るい色調を使用すると、背景色とテキストの色が適度に反転することがわかりました。また、反転するとレンダリングされる色はカラーパレットの一部ではありませんが、これらの電子メールクライアントでアクセス可能な読書体験を提供できます。

ライトモードとダークモードの背景色のLitmusHTMLメールの例

ヒント2：Gmailアプリの部分的な修正を使用する

メールコミュニティの絶え間ない努力のおかげで、Gmailアプリ内で色の反転を抑える方法が明らかになりました。

macOS / iOSダークモードカラーのオーバーライド：
背景色には、1つのカラーグラデーションを使用します。
背景画像：linear-gradient（＃ffffff、＃ffffff）
私はこれがうまくいくとさえ信じることができません、しかしそれはそうします…私のボタンでさえブランドにあります。
@ ThiesBW＃emailgeeksに感謝します
— Annett Forcier（@The_Annett）2019年12月11日

背景色を含む線形グラデーションをコンテナ要素に適用することで、選択した色をGmailのライトモードとダークモードの環境に強制的に表示できます。

これを行うには、HEXカラーメソッドを使用して背景画像のCSSプロパティに線形グラデーションを追加する必要があります。次に、グラデーションの両方の色を、Gmailで尊重したい色にします。

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#e37b46" style="background-image: linear-gradient(#e37b46, e37b46);">

Remi Parmentierはこの回避策を拡張して、CSSブレンドモードを使用するGmailアプリでテキストの色が反転しないようにしました。

これらの修正を使用すると、反転レンダリングのいくつかの側面を制御するのに役立ちます。ただし、これはGmailでのみ可能であり、サブスクライバーが選択したコントラストモードに応じてメールの色を変更する柔軟性はありません。

色を反転させる電子メールクライアントをターゲットにできないのと同じくらいイライラしますが、カラーパレットをテストし、テスト結果に基づいて色を選択し、これらの部分的な修正を行うことで、少し制御を取り戻すことができます。

チャンネル登録者を色で驚かせましょう

色は、サブスクライバーエクスペリエンスに活気を与え、電子メールコンテンツを整理するための優れた方法です。また、画像よりも時間とリソースが少なくて済みます。それはすべての周りのwin-winです。

したがって、このガイドを開始してください。受信トレイにカラフルな背景が表示されるのを待ちきれません。

色が正しく表示されることを確認してください

購読者はあなたのEメールをあなたが意図したように見ていますか？ Litmus Email Previewsを使用して、90を超える電子メールクライアント、アプリ、およびデバイスで電子メールがどのように表示されるかをプレビューします。

リトマスの無料トライアルを開始→

もともとはジャスティンジョーダンによって2018年3月27日に公開されました。 最終更新日は2021年4月21日です。