全画像の代わりにHTMLメールを作成するのはあなたが思っているよりも簡単です

公開: 2021-09-21

電子メールは今年から50年前から存在していますが、当初はすべてプレーンテキストの電子メールでした。 Eメールマーケティングのアイデアは1978年に生まれましたが、HTMLEメールが重要になったのは1990年代になってからでした。 Eメールマーケティングの初期の世界では、EメールSPAMは一般的な迷惑であり、EメールクライアントはSPAMをブロックするために多くの異なるフィルターを使用していました。それらのフィルターの1つは、すべての画像の電子メールをブロックしました。早くも2007年に、Mailchimpは、電子メールに巨大な画像を使用すると、電子メールがブロックされ、バウンス率が最大23％増加する可能性があることを発見しました。

Eメールマーケティングが進化するにつれて、SPAMフィルターも進化しました。最近では、すべての画像のメールが必ずしもスパムとしてマークされるとは限りませんが、すべての画像のメールを作成できるからといって、そうする必要があるとは限りません。

すべての画像の電子メールについて正直に話し合い、その理由と反対の理由に対処する時が来たと思います。そして、その間、すべての画像の電子メールをライブテキストの電子メールに変換することがいかに簡単であるかを見ていきます。

すべての画像のメールを評価しましょう

長所

「どういう意味ですか、全画像メールには長所がありますか？！」あなたが尋ねる。まあ、あります。すべての画像の電子メールは、以前のような偽の電子メールではありません。実際、通常はライブテキストメールを送信するときに、状況を変えて全画像メールを送信すると、エンゲージメントが高まる可能性があります。何か新しいことがあれば、おそらく購読者は元気になります。しかし、一部の企業にとって、全画像の電子メールが好ましい選択となる理由は他にもあります。

ブランドスタイルの維持
使用されているブランドスタイルに非常に具体的なブランドで働いている場合は、すべての画像の電子メールがおそらく行く方法です。フォントがどこでも正しいことを確認できます。また、すべての電子メールクライアントでブランドスタイルが維持されていることを確認できます。全画像メールでは、ライブテキストメールの場合ほどメールが壊れることを心配する必要はありません。
視覚的にインパクトのある
私は個人的にこれを大いに信じていません。すべての画像の電子メールに頼ることなく、視覚的にインパクトのある電子メールを作成できると信じているからです。しかし、ライブテキストメールではどこでもできないことがいくつかあります（ただし、優れたメール開発者がいる場合はそれほど多くはありません）。 ReallyGoodEmailsは素晴らしいメールのインスピレーションでいっぱいで、正直なところ、見栄えがとても良いので、その大部分はすべて画像のメールです。
安い
デザイナーや開発者にお金を払う必要がないので、すべての画像の電子メールの方が安いと主張する人もいます。（場合によっては、これらの企業はデザイナーさえ使用していないと確信しています）。お気に入りの写真編集プログラムで画像を作成し、保存してESPに直接入れることができます。これは、購読者に美しいメールをすばやく簡単に送信する方法です。

短所

私たち自身のMaganLeは、すべての画像の電子メールについての私の考えを私に尋ねました、そして正直なところ、私は以前ほど反画像のみの電子メールではありません。私はまだあなたがすべての画像の電子メールですべての人に素晴らしい電子メール体験を提供できるとは思いません。ただし、一部の企業では、全画像の電子メールが理にかなっている場合があります。ただし、決定を下す前に、欠点を考慮に入れていることを確認してください。

アクセシビリティの悪さ
全画像の電子メールは、ライブテキストの電子メールほどアクセスできません。「しかし、私は正確なALTテキストを入力しました、Carin！」それは素晴らしいことです。そして、本当に良いALTテキストで全画像の電子メールを行う会社がいくつかあります。しかし、アクセシビリティとは、ALTテキストを入力することだけではありません。すべての人がアクセスできる電子メールがあるということは、誰でも読むことができるということです。 ALTテキストは、失読症の人や、設定を使用してフォントサイズを大きくする視力の弱いユーザーにとっては役に立ちません。これらは、ライブテキストメールが全画像メールよりもはるかにうまく処理できる問題のほんの一部です。
貧弱なユーザーエクスペリエンス
画像を有効にしているサブスクライバーであっても、すべての画像の電子メールは、ライブテキスト電子メールよりもユーザーエクスペリエンスが低下する可能性があります。低速のインターネット接続を使用しているサブスクライバーは、画像が読み込まれるまでの待ち時間が長くなる可能性があります。大きな非圧縮画像を使用すると、加入者がモバイルで読んでいるときに電子メールをチェックしている場合、加入者のデータを消費する可能性があります。そして、パーソナライズについて考えてください！リスト全体のパーソナライズされた画像を取得するよりも、マージタグをライブテキストメールにドロップする方がはるかに簡単です。
召喚状の欠落または紛失（CTA）
全画像の電子メールを使用すると、画像をオフにしているサブスクライバーは、画像に含まれているCTAをすべて失います。言うまでもなく、メールに含まれている可能性のある他のすべてのもの。メールを開かずにクリックするサブスクライバーの数が少ないため、これについて心配する必要はないと思うかもしれません。しかし、画像をオフにしてメールを表示していて、CTAが表示されないためにクリックしないサブスクライバーは何人いますか？

これらは、欠点の大まかな概要にすぎません。より説得力のあるものが必要な場合（またはクライアントが必要とする場合）、Maganは、すべての画像の電子メールを送信しない理由についてさらに詳しく説明します。

ライブメールの何がそんなに素晴らしいのですか？

あなたはEメールマーケティングのキャリア全体にわたって全画像のEメールを送信しており、「全画像のEメールを送信しない」という言葉を何度も控えていると聞いていますが、成功しているだけですか？それは素晴らしいことです。しかし、ライブメールのすごいところをいくつか教えてもらえますか？

長所

更新が簡単
全画像のメールは更新するのが面倒です。画像を更新して再保存し、再アップロードしてから、メールに追加する必要があります。そして、あなたはおそらくそこにもいくつかの承認を得ています。ライブメールでは、スペルミスのある単語や間違った日付を更新するのは簡単です。あなたがしなければならないのは間違いを見つけてそれを修正することです。 -literal-製図板に戻る必要はありません。
より良い加入者体験
ライブメールでは、高解像度の画面を使用するサブスクライバー向けにコピーのサイズが変更され、モバイルデバイスではテキストが非常に小さくなりません。ダークモードでは、色の反転方法をある程度制御できます。また、サブスクライバーが何らかの理由で画像をオフにしている場合でも、電子メールのコンテンツとCTAは引き続き表示されます。

短所

もっと高い
「私たちが行うすべての電子メールに開発者を雇うには費用がかかりすぎます。」ええ、おそらくそうです。そのため、送信するすべての電子メールを作成するために開発者を雇うべきではありません。開発者を雇って、自分で実装できるモジュラーシステムを作成します。多くの電子メールサービスプロバイダー（ESP）がテンプレートシステムを提供しているため、開発者を雇って、カスタマイズされたテンプレートシステムを構築してください。 ESPにそれがない場合は、開発者にLitmus Builderでパーシャルとスニペットを作成してもらい、ドラッグアンドドロップとビジュアルエディター機能を使用してLitmusで電子メールを作成することができます。私はあなたがあなたの電子メールを編集するために前後に少なくすることで長期的に時間を節約することを約束します。
作成が難しい
それとも彼らですか？これは私が多くの企業から聞いているそれらの短所の1つです。開発者がいないため、ライブメールを送信できません。上で指摘したように、多くのESPにはテンプレートとモジュラービルディングソリューションがあります。また、ESPにない場合、Litmusにはビジュアルエディターがあり、Litmusコミュニティには独自の電子メールを作成するために使用できる多くのテンプレートとスニペットがあります。開始するためのモジュラーテンプレートとスニペットもあります。
デザインはすべての電子メールクライアントで同一ではありません
いいえ、ほとんどの電子メールはすべての電子メールクライアントで同一ではありません。あなたが開発者と多くの時間を持っているなら、あなたはおそらくかなり近づくことができます。しかし、本当にすべての電子メールクライアントで電子メールが同一である必要がありますか？はい、色は同じである必要がありますが、ボタンの角が丸い、フォントがわずかに異なる、または小さい画面でレイアウトが同じであるということは、購読者のエクスペリエンスに影響を与える問題ではなく、読めないほどです。テキストはになります。

全画像メールの変換

今、私たちは楽しい部分に行きます。それらの美しい全画像の電子メールをライブテキストに変換します。あなたの電子メールがまだすべての画像の電子メールと同じくらい素晴らしくて人目を引くことを確実にするためにあなたが使うことができるいくつかのテクニックがあります。

背景画像

全画像メールを作成する最も一般的な理由の1つは、白や単色だけでなく、興味深い背景を持つことで、より視覚的に興味深いメールが作成されることです。ただし、電子メールの背景として単色を使用する必要はありません。背景画像を使用できます。正しくコーディングすれば、ほとんどの電子メールクライアントでサポートされています。 Windows10メールは最大の例外です。 Windows 10メールで大規模なサブスクライバーベースを開いている場合は、背景画像を避けてください。

背景画像でコード化された電子メールと画像のみでコード化された電子メールには大きな違いがあります。背景画像を使用している場合は、画像がオフの場合でもすべてのテキストが表示されるため、サブスクライバーは最初の召喚状をクリックしたり、メールの内容と送信元を確認したりできます。：

背景画像が実装され、画像がオンになっているメール（出典： Really Good Emails ）	背景画像が実装され、画像がオフになっているメール

画像が背景画像効果を作成するために使用される電子メールとは対照的です。この場合、最初のCTAは失われます（ロゴと会社名も同様です）。電子メールはそれほど影響力がなく、「ベストセラー」セクションは引き続き表示されて実行可能ですが、電子メールの要点である組織のバンドルにお金を節約することは失われます。


ヒーロー作品はすべての画像で作成されています—画像がオンになっています（出典： Really Good Emails ）	ヒーロー作品はすべての画像で作成されます—画像はオフになっています

背景画像のコーディングは簡単なことではありませんが、それを支援するブログ投稿があります。 Litmusで背景画像を使用してテンプレートを設定している場合は、コードに触れることなく、ビジュアルエディターで背景画像を変更できます。画像サイズが置き換える画像と一致していること、および使用している画像が大きすぎないように圧縮していることを確認してください。

画像とテキストをオフセット

予想または通常から逸脱するものはすべて私たちの目を引く傾向があり、電子メールを含め、どこでもこの例を見ることができます。

Formatからのメール — *コンピュータウィンドウは、フォーマットからのこの電子メールの見出しの上部の画像と下部の黒い背景の間に配置されます（出典：* *Really Good Emails* ）

上記の例には画像オフセットがあり、画像全体として簡単に実行できますが、テキストのブロックをオフセットしたい場合はどうでしょうか。さて、あなたにはいくつかの選択肢があります。テキストが実際にオフセットされないように、少しだけオフセットすることができます。次の電子メールのように、要素がオフセットされているように見せることができます。

ここでは、電子メールの上部がオフセットされていますが、実際に白い部分にあるのはほんの少しの青であるため、テキストや画像はありません。したがって、空のテーブルセルを使用できます。または、どこでも機能する丸い角が必要な場合は、装飾的な画像を使用できます。しかし、これらのテクニックについては後で詳しく説明します。この場合、メールの実際の内容は相殺されませんが、相殺されているように見えます。

他のオプションは、この電子メールのようにすべてをオフセットすることです。

このメールには、画像上のブロックにコールアウトセクション全体がオフセットされています。これは絶対的なポジショニングを使用してWebで簡単に実行できますが、電子メールのどこでもサポートされていないため、少し注意が必要です。私が知っている2つの異なる方法があります。それ以上ある場合は、コメントでお知らせください！

まず、フェイクアブソリュートポジショニングがあります。 StevenSayoとMarkRobbinsは、このテクニックを実行する方法を学ぶために、いくつかの優れたステップバイステップガイドを作成しました。 StevenとMarkは、Outlookで機能させるためのフォールバックを提供しており、私の限られた経験から、かなり良いサポートがあります。

コードに慣れていない場合は、画像をスライスして、オフセットする要素の周囲に配置することで、この効果を作成することもできます。少し厄介ですが、機能します。何かがうまくいかず、画像が正しく整列しない可能性が高いため、必ずテスト、テスト、テストを行う必要があります。

私は偽の絶対ポジショニングのファンです。これにより、電子メールのライブテキストを維持しながら、スライスされた画像を並べる心配をせずに、電子メールに劇的なオフセットを持たせることができますが、どちらの方法でも機能します。

Webフォントとライブテキスト

ブランド基準を維持することは、フォントをどこにでも表示させることができないため、全画像メールを使用するもう1つの大きな理由です。わかりました。ただし、HelveticaやArialよりもはるかに多くのフォールバックオプションがあります。あなたの会社またはあなたのクライアントにあなたのブランドガイドラインに標準のフォールバックフォントを含めることを検討するように勧めてください。そうすればあなたのメッセージがすべての電子メールクライアントに確実に伝わるようになります。

サムスンは、見出しのフォールバックフォントとしてTrebuchet MSを使用することで、それを面白くしています。 Samsung Oneブランドのフォントではありませんが、Helvetica、Arial、ALTテキスト、または何もないよりも面白くて人目を引くフォントです。


Webフォントを有効にして画像をオンにしたメール	フォールバックが表示され、画像がオフになっているメール

興味深いフォールバックを備えたWebフォントを追加することは、電子メールの画像に依存していないときに電子メールを目立たせるための最も簡単な方法の1つです。一度追加すれば、メールデザインシステム全体に簡単に実装できます。また、電子メールテンプレートにWebフォントを設定すると、テンプレート化されたシステムを使用している場合は、コーダー以外の人でもその恩恵を受けることができます。

スタイル付きALTテキスト

ALTテキストのスタイルを設定することで、画像がオフの場合でもメールの外観を維持することができます。ここLitmusではスタイル付きのALTテキストを使用して、ロゴの大まかなバージョンを維持していますが、すべての画像のメールを作成する必要がある場合は、これらの画像ベースのボタンでこれを使用して目立たせることもできます。画像タグにCSSを追加することでALTテキストのスタイルを設定でき、ALTテキストの背景色とフォントのほとんどの側面を変更できます。どこでもサポートされているわけではありませんが、サポートされている場所とその方法については、スタイル付きALTテキストの究極のガイドをご覧ください。

デザイン要素としての画像、空のテーブルセル、およびスタイル設定された水平方向のルール

興味深い要素を作成するために画像全体を用意する必要はありません。画像の一部を使用して画像を仕上げ、それをテーブルセルと組み合わせて、視覚的な興味を引くことができる場合があります。

すべての電子メールクライアントに表示される丸みを帯びた角を作成するために、丸みを帯びた角の画像をコンテナの上部と下部に追加します。同様のことを行って、電子メールのセクション間の遷移として角度や形状を作成できます。画像で全体の形を作成する代わりに、テキストのある部分に背景色を使用してから、セクションの上部または下部に画像を追加して目立たせます。

水平方向のルールのスタイルを設定して、セクション間に興味深いトランジションまたはディバイダーを作成することもできます。リトマスではシンプルなスタイルを使用して線を作成しますが、水平方向のルールだけで興味深い仕切りを作成するために試すことができるさまざまな手法がたくさんあります。（どうなるか教えてください！）。

また、コンテンツを分割するために使用するカラフルな仕切りもあります。これは、背景色とテーブルセルを使用して完全に実行されます。

litmusライブメール — *Litmus Live EarlyBirdメールから*

コードを工夫して、画像なしで何ができるか見てみましょう！

防弾ボタン

これは、すべての画像の電子メールについての私の最大のペットです。画像ベースのアクションの呼び出しは、サブスクライバーが表示できない場合にアクションを実行するのが困難です。他のすべてを実装するのが難しすぎる場合は、少なくとも行動を促すためにライブテキストボタンの使用を開始してください。

これらは2つの異なるメールで、1つはライブテキストボタンを使用し、もう1つは画像の1つにボタンが付いた全画像メールです。左側の電子メールは、右側の電子メールよりもはるかに実用的です。


画像をオフにしたライブテキストボタン付きのメール（出典： Really Good Emails ）	画像をオフにした画像ベースのボタンを使用したメール（出典： Really Good Emails ）

全画像メールを使用することについてのあなたの主張が、開封せずに多くのクリックを獲得しないということである場合、画像をオフにした状態で大勢の聴衆を持ってはいけません。画像をオフにした状態でCTAがどのように見えるかを見てください。何をクリックしているかわからない場合、クリックスルーする人はあまりいません。

ライブテキストボタンを作成するにはいくつかの方法があります。そのため、視聴者に適した方法を使用してください。いつものように、テスト、テスト、テストを行ってください。

それらのすべての画像の電子メールを変換する

私は、これらのテクニックのいくつかを使用してすべての画像の電子メールをライブテキストに変換する方法を紹介するために、仲間の電子メール開発者に連絡を取りました。これらの電子メールをライブテキストに変換すると、画像がオフになっている電子メールのバージョンが強化されただけでなく、モバイルバージョンとダークモードバージョンの電子メールも改善されたことがわかります。

S'wellメール変換

Anne K. Tomlinは、EmailのY'allの創設者です。メールの癖の詳細を知っている経験豊富なコーダーである彼女は、ライブテキストがメールでもたらす違いを披露することに専念していました。

彼女自身の言葉では、すべての画像のメールは、デフォルトで画像がブロックされている人や、スクリーンリーダーやデジタルアシスタント（Siri、Alexaなど）を使用している人にはメッセージを送信しません。あなたの目標が回心であるならば、あなたはそれらの人々に回心する機会さえ与えていません。 S'wellの電子メールは、代替テキストがまったくなかったため、通常の画像のみの電子メールの10倍悪かった。スクリーンリーダーまたはデジタルアシスタントは、次のように読み上げます。「大胆な動き、大きなアイデア、そして喜びを祝いましょう。お使いのブラウザでこのメールを見ます。店。ストーリー。私たちに関しては。 S'well。」すぐにジャンプしてフッターを読み上げます。なんて恐ろしい経験でしょう。画像がブロックされているサブスクライバーには、文字通り空白のページが表示されます。空白のページを見て、「これをブラウザでチェックする必要があります」と考える人は誰もいません。「ブラウザで表示」リンクをクリックします。サブスクライバーの注意を引くのに5秒あるため、すべての画像の電子メールがあり、それらの画像がデフォルトで読み込まれない場合は、電子メールをまったく送信していない可能性があります。実際、そのサブスクライバーは、何も送信していないのでそれを見る可能性があるため、サブスクライブを解除する必要があります。

元のメール：

アンのライブテキストバージョン：

私はアンのバージョンを大いに好みます。これは主に猫のためですが、モバイルとダークモードでのアクセシビリティが向上しているためでもあります。テキストは画像に閉じ込められないため、縮小する代わりに読みやすくなります。ダークモードバージョンは実際には暗く、暗い部屋で見た場合、目がくらむほど明るい光にはなりません。さらに、目の疲れを軽減するために電話をダークモードに設定している人は誰にも直面しません。彼らが避けようとしていたライトモード。

オリジナルのモバイルバージョン	アンのモバイル版

オリジナルのダークモードバージョン	アンのダークモードバージョン

そして、全画像変換のために…。【ロールロールお願いします】

多田！画像をオフにしても何も失われません（かわいい子猫を除く）。サブスクライバーは引き続きアクションを実行できます。最も重要なことは、サブスクライバーは引き続きメッセージを読むことができるということです。

アンがそれをどのように行うかを見る

マジックスプーンのメール変換

Carin Slaterは、Eメールマーケティングスペシャリストであり、LitmusのすべてのEメールの背後にいるEメール開発者です。待って、それは私です！そうですね、全画像メールに対する私のスタンスをご存知でしょう。

私はMagicSpoonメール（そしてMagic Spoonシリアルもとてもおいしい）が大好きですが、すべての画像のメールとして受信トレイに届くといつも悲しくなります。通常、画像テキストをALTテキストとして含めることは非常に優れているため、画像がない場合でもメールで何が起こっているかを知ることができますが、このメールは、送信した他のメールほど説明的または包括的ではありませんでした。本当に楽しくて画像を使わないとなかなか難しいGIFボタンがあるので、これに取り組むつもりでした。

元のメール：

キャリンのライブテキストバージョン：

WindowsのOutlook365デスクトップクライアントのダークモードでは完全に表示されないという妥協点がありました。そのため、Magic Spoonのサブスクライバーがメールを開く場所によっては、重要な場合と重要でない場合があります。また、デザインファイルではなく、すべての画像のメールから作業していたため、ダークモードまたはモバイルバージョンのGIFを作成できませんでした。どちらも、次の場合に交換できるように要求していました。元のファイルで作業していました。これらの問題にもかかわらず、ダークモードとモバイルバージョンはライブテキストバージョンで改善されています。 GIFアニメーションはモバイル版で保持され、テキストはより読みやすくなりますが、Magic Spoonがモバイル用に交換した全画像バージョンを作成したので少しだけです（モバイル用ですが、電子メールをコード化するためにブーイング2回）。

オリジナルのモバイルバージョン	変換されたモバイルバージョン

オリジナルのダークモードバージョン	変換されたダークモードバージョン

全画像バージョンでは、定型化されたALTテキストを使用して、フッターのロゴとタグラインの類似性を維持しました。そのため、画像をオフにすると、メールは画像バージョンと同じように見えます。ライブテキストバージョンも、全画像バージョンよりもはるかに視覚的に魅力的で、実用的で、魅力的です。

カリンがそれをどのように行うかを見る

*変換用のすべてのメールは私の受信トレイから取得されました

どんな状況でもあなたのメールを輝かせましょう

私が何年にもわたって電子メールで学んだことの1つは、購読者は常に予期しないことをするということです。フォルダを使用する代わりにメールを検索する場合でも、携帯電話のブラウザでメールを開く場合でも、ユーザーがメールをどのように体験するかはわかりません。したがって、購読者がどこでメールを開いているかに関係なく、購読者に最適なエクスペリエンスを提供できるように最善を尽くしてください。