メールピクセルアート：最も希少でクールな防御設計戦術
公開: 2018-09-19画像のブロックは一般的であり、一部の電子メールクライアントはデフォルトで画像を無効にし、一部のサブスクライバーはモバイルデータを保存するためまたはその他の理由で画像をオフにします。 そのため、メールマーケティング担当者は、画像が無効になっているときにメッセージが確実に伝達されるように、防御的な設計手法を使用する必要があります。
電子メールのアクセシビリティにも役立つ防御設計は、次の3つの主要な戦術で構成されています。
- すべてのテキストを画像に埋め込むのではなく、可能な限りHTMLまたはライブテキストを使用する
- 画像にALTテキストを追加する-さらに良いのは、スタイル付きのALTテキスト
- テーブルセルに背景色を使用する
その最後の戦術に焦点を当てましょう。
画像がブロックされたときに発生する大きな問題の1つは、メールの構造が失われることです。 電子メールはフラットになり、すべてが一緒にぼやけ始めます。 HTMLテキストを使用し、ALTテキストのサイズと色をスタイル設定すると、構造と階層を作成するのに役立ちますが、背景色はさらに強力です。
テーブルセルに背景色を追加すると、バナーやコンテンツブロックが作成され、防弾ボタンを作成するために不可欠です。 このTwitterメールは、画像がブロックされたときにテーブルセルの背景色がメールデザインの整合性を維持する方法を示しています。
それは素晴らしいことですが、背景色のテーブルセルはさらに多くのことを実行できます。 HTMLテキストと一緒に使用して、画像をブロックしても影響を受けない電子メールコンテンツを作成するだけでなく、テーブルセルの背景色を画像のフォールバックとして使用できます。
これを行うには、テーブルセルに背景色を適用して、ネストされた一連のテーブルからモザイクを作成します。 次に、各スライスがモザイクのテーブルセルに完全に収まるように、画像をスライスします。 このように、オーバーレイ画像がブロックされて消えると、下にある色付きのテーブルセルのモザイクが表示されます。
メールのピクセルアートの例
メールモザイクの威力を示すために、いくつかの例を示します。それぞれの例では、左側に画像が有効になっていて、右側に画像が無効になっています。
マザーケアは、このメールでベビーカーのピクセルアートを作成します。これにより、スタイル付きのALTテキストが全体で自由に使用されます。
Pizza Expressは、このトリガーされた誕生日の電子メールでピクセルアートを使用します。これには、パーソナライズされた画像と対応するパーソナライズされたスタイルのALTテキストも含まれます。
PlayStation New Zealandは、電子メールモザイクを使用してオートボットのシンボルを作成し、トランスフォーマーの「変装したロボット」のスローガンを巧みに演じています。
ベントンランジェリーは、母の日のメールのメッセージの感情を捉え、メールのピクセルアートを使用して大きなピンクのハートを作成します。
設計と戦略上の考慮事項
電子メールモザイクを作成する前に、次の設計と戦略の問題を検討してください。
1.メールのピクセルアートが重くなる可能性があり、メールが102KBを超えると、メールがGmailでクリップされる可能性があります。 したがって、実行可能な最小限のピクセルアート画像に焦点を合わせて、物事をシンプルに保ちます。
たとえば、Benton Lingerieのピクセル化された心臓は、テーブルセルの数が2倍または3倍になることでより輪郭がはっきりしている可能性があります。 しかし、それらの実行は非常に明確に心であり、そのままで十分に効果的です。
2.電子メールのピクセルアートは多くの余分な作業になる可能性があるため、通常、大量または影響の大きい電子メール用に予約することをお勧めします。 つまり、新製品の発表、サイバーマンデーキャンペーン、および同様の大きなイベントの主要なブロードキャスト電子メールにそれらを使用することを意味します。 ただし、上記のPizza Expressの誕生日のメールなど、大量にトリガーされるメールについても検討する必要があります。
同様に、ロゴやフッター要素など、大量の電子メール要素についても検討することができます。 これを行う場合は、それらを部分的に実装して、ロゴまたはフッターのすべてのインスタンスでピクセルアートを変更または更新できるようにします。
どちらのアプローチを選択した場合でも、余分な設計作業の影響を確実に享受する必要があります。
3.電子メールのピクセルアートは、レスポンシブデザインと常に互換性があるとは限りません。 レスポンシブメールのコーディング方法によっては、メールモザイクがデスクトップバージョンからモバイルバージョンに変換されない場合があります。 モバイル版でメールコンテンツを非表示にしてスタックすると、メールのピクセルアートが壊れる可能性があります。 電子メールモザイクを設計するときは、これを必ず考慮してください。
4.電子メールのピクセルアートは、ブロックされた画像を置き換えようとする必要はありません。 PlayStationとBentonLingerieの例で見たように、メールのピクセルアートはメールの画像とはまったく異なる場合があります。 ヒーロー画像の8ビットバージョンを常に作成する必要があるとは思わないでください。 画像の精神を伝えることが同じように効果的である場合もあります。また、コーディングが簡単で、配信が少ない場合もあります。
5.一部の電子メールでは、画像がブロックされる可能性が高くなります。 電子メール内の画像がブロックされる可能性は均一ではありません。 画像がブロックされる可能性は、電子メール関係の最初と最後の両方で高くなります。
サブスクライバーに送信する最初の電子メールでは、見慣れない送信者のために画像がブロックされている場合があります。 つまり、ウェルカムメールとトランザクションメールの防御設計にもっと力を入れたいと思うかもしれません。
関係が遅くなる、つまり、かなりの期間非アクティブになった後の電子メールの場合、画像はサブスクライバーのスパムフォルダーにあるためにブロックされる可能性があります。 つまり、再エンゲージメントメールと再許可メールにさらに防御的な設計作業を加えることをお勧めします。
どちらの場合も、その余分な作業には、HTMLテキストとスタイル付きALTテキストの自由な使用に加えて、電子メールのピクセルアートが含まれる場合があります。
 | 画像ブロッキング用に最適化Litmus Builderを使用すると、メールを簡単にコーディングして、70以上のメールアプリやデバイスでプレビューできます。 ワンクリックで画像のオンとオフを切り替えて、メールのピクセルアートを完成させます。 優れたメールを作成する→ |
メールのピクセルアートを作成する方法
これらの考慮事項を念頭に置いて、電子メールのピクセルアートを作成するための最良の方法は何ですか？
開始するには、次のことをお勧めします。
- 画像からテーブルへのコンバーター
- メール最適化された犬
- 画像-HTMLアプリ
ただし、すべての場合に役立つとは限りません。 多くの場合、電子メールのピクセルアートを手動で作成することをお勧めします。
それがあなたが行くルートであるならば、あなたがとる必要がある主なステップはここにあります：
- グラフ用紙または選択したデザインソフトウェアで、実行可能な最小限の電子メールピクセルアート画像をスケッチします。
- Photoshopまたはその他のデザインソフトウェアのスライスツールを使用して、画像を必要なブロックサイズに分割し、電子メールモザイクを作成して、それらを個別の画像として保存します。 画像全体を簡単にパズルに戻すことができるファイル命名規則を使用してください。
- テーブル内にネストされた一連のテーブルを使用して、デザインに対応するために必要な位置にブロックを作成します。
- スライスした画像をシームレスに合わせるには、テーブルにcellpadding =“ 0”、cellspacing =“ 0”、border =“ 0”を設定します。
- 必要なbgcolorを各テーブルセルに適用します。
- 画像を無効にしてメールをプレビューし、意図したとおりにレンダリングされていることを確認します。
これは、ActionRocketのEmailWeeklyニュースレターの電子メールピクセルアートの優れた例です。 Litmus Builderインターフェースで「画像の切り替え」を選択して、画像がオフになっている電子メールを表示します。
まれで予期しない戦術
メールマーケターは、画像をオフにデザインする必要性を理解しています。 Litmusの2018年のStateof Email Surveyによると、ブランドの83％がメール画像に常にまたは頻繁にALTテキストを使用しているため、約3,000人のマーケターを対象にしています。
ただし、ALTテキストの追加は非常に簡単ですが、電子メールのピクセルアートの作成はそれ以外の何物でもありません。 その結果、77％近くのブランドがメールモザイクを使用していません。
勇敢なブランドにとって、それはチャンスです。 この戦術の希少性は、予期しないものを提供することで加入者を驚かせ、喜ばせる効果的な方法であることを意味し、より多くのブランドが注目を集めています。 ブランドの23％以上が、少なくともめったに電子メールのピクセルアートを使用していません。これは、2017年の18％から増加しています。
このようなリソースがもっと必要ですか？
Litmus Weeklyに登録して、毎週のメールのインスピレーション、ヒント、コツを受信トレイで入手してください。
リストに載る→