最も一般的な電子メールコーディングの間違いとそれらを回避する方法

あなたの電子メールのすべての鐘と笛にもかかわらず、コーディングの間違いはそれを完全に台無しにする可能性があります。 リンクが間違って短縮されたり、色の形式が間違ったりするのは1つだけです。特に、ユーザーがウェブメールクライアントではなくスマートフォンで確認したり、画面解像度の異なるガジェットに切り替えたりすると、メールは悲惨に見えます。

この投稿では、一般的なHTMLメールコーディングの間違いについて説明し、それらを回避するためのアドバイスを共有します。

メール表示の問題はどこから発生しますか？

簡単に言うと、ユーザーがあなたのメールをあなたの計画外に見る理由は2つ考えられます。 1つ目は、ユーザーのデバイスの技術的特性に関連しています。 2つ目は、より正確には、レンダリングエンジンである電子メールクライアントです。

ユーザーのデバイスの技術的特性

考慮すべきデバイスには、少なくとも2つの技術的特性があります。

1. 画面解像度—ピクセル単位で指定された画面のサイズ。 たとえば、iPhoneXの画面解像度は1125×2436ピクセルです。 メールに2列のテキスト（各列600ピクセル）が含まれている場合、正しく表示されません。
2. PPI、または1インチあたりのピクセル数—画面の1インチのピクセル数。 iPhone XのPPIは458です。想像してみてください。メールにアクションボタンを追加する必要があります。 ボタンが44ポイント未満（iPhone Xの場合は132×132ピクセルを意味します）の場合、画面スペースの3分の1平方インチ未満しかかからず、ユーザーはほとんどタップできません。

もう1つ覚えておくべきことは、ユーザーはモバイルデバイスを回転させることが多いため、メールは見栄えがよく、縦向きと横向きの両方で完全な機能を備えている必要があります。

ユーザーのデバイスの技術的特性に関連する問題を防ぐために、レスポンシブメールデザインを使用する必要があります。

まず、メールのheadにメディアクエリを追加する必要があります。 たとえば、 @media screenと(max-width: 600px)クエリは、画面の幅が600ピクセル未満の場合に電子メールのデザインが最適化されることを意味します。 画面の幅が600ピクセルを超える場合、ユーザーにはこのメールの固定幅バージョンが表示されます。

次に、セルを含むテーブルの形式で電子メールを作成する必要があります。

 <表>
<tr>
    <td> ... </ td>
</ tr>
</ table>

次に、各セルにスタイルを追加します。次に例を示します。

 <td> <img src = "http://somewebsite.com/someimage.jpg" width = "600" alt = ""> </ td>

ただし、これらの対策を講じたとしても、メールの表示に問題が発生する可能性があります。 問題の原因は、電子メールクライアントのレンダリングエンジンです。

メールクライアント

表示の問題の2つ目の原因は、受信者がキャンペーンを開くために使用する電子メールクライアントです。 電子メールクライアントのコア部分はレンダリングエンジンです。 長いコードスクリプトとしてメールを受信し、処理して、メールの受信に慣れている方法で出力します。画像、リンク、その他のメディアを含む、わかりやすく、構造化され、フォーマットされたテキストです。

以下の例を見てください。 これは、Gmailのレンダリングエンジンが認識しているように、プロモーションメールのコードの一部です。 このメールが潜在的な顧客にそのように表示された場合、彼らはコードをほとんど切り抜けず、40％オフのプロモーションコードがあることを理解します。

各電子メールクライアントには独自のレンダリングエンジンがあります。つまり、異なる電子メールクライアントを介して開かれた同じ電子メールは、まったく異なる外観を持つ可能性があります。

これは、世界中で最も人気のある電子メールクライアントのリストです。 明らかに、受信者は送信する電子メールを開くためにそれらの1つまたは束を使用します。

これらの電子メールクライアントにはすべて、HTML電子メールコーディングの際に考慮すべきいくつかの特性があります。

たとえば、iOS用のAppleMailは以下をサポートしていません。

• inline-size CSSプロパティ。
• @media (orientation)メディアクエリ;
• アンカーリンク;
• HDR、PPM、SVG画像形式など。

Gmailは、以下以外のさまざまなCSSプロパティとメディアクエリをサポートしています。

• box-shadow, text-shadow,およびその他のCSSプロパティ。
• @media (prefers-color-scheme)メディアクエリなど。

一般的なメールコーディングの間違いとその回避方法

電子メールのコーディングミスを回避するための最善の一般的なアドバイスは、バージョンがいくら古くても、ほとんどの電子メールクライアントでサポートされているコードにインベントリを制限することです。 簡単に言うと、1999年のようにステップバックしてコーディングすることです。たとえば、次のコマンドを使用することを広くお勧めします。

• CSS3の代わりにCSS2、
• HTML5の代わりにHTML4、
• 背景画像の代わりに色、
• <div>代わりにtable-layout 、
• スタイルセットまたは<style>ブロックの代わりにインラインCSS。

このアプローチは、電子メールの表示に関するほとんどの問題を防ぐと考えられています。 しかし、あなたの電子メールを台無しにする可能性のあるいくつかの特定のコーディングミスを詳しく見て、それらの解決策を見つけようとしましょう。

プレーンテキストバージョンはありません

潜在的な問題。 OutlookやGmailなどの一部の電子メールクライアントでは、プレーンテキストバージョンがない場合に電子メールをスパムとして定義できます。 さらに、電子メールクライアントでHTMLコードのレンダリングに問題が発生することがあります。 このため、HTMLメールは正しく表示されない可能性がありますが、プレーンテキストのメールは常に同じように見えます。

防止。 プレーンテキストバージョンをメールに追加します。 幸いなことに、ほとんどの電子メールサービスプロバイダーはそれを自動的に追加します。

プレーンテキストのEメールをEメールマーケティング戦略に実装できます。 まず第一に、そのような電子メールはより個人的に見えるので、加入者とのコミュニケーションをレベルアップすることができます。 さらに、一部の人々は電子メールの要点に直行することを好み、カラフルなレイアウトは彼らを先送りにします。

JavaScript、ActiveX、Flashなどの種類の使用

潜在的な問題。 ほとんどの電子メールクライアントはこれらの言語、フレームワーク、およびプラグインをサポートしていないため、電子メールの一部はレンダリングされず、サブスクライバーには空白スペースしか表示されません。 さらに、電子メールはウイルス対策ソフトウェアによって禁止される場合があります。

防止。 電子メールをHTMLおよびCSSにコーディングするために使用する言語を保持します。 ビデオやオーディオを追加する必要がある場合は、それをWebサイトにアップロードし、リンクを提供します。

NiftyImagesが新製品の機能をどのように提示しているかに注目してください。説明ビデオかもしれませんが、同社は一連の画像を選択しました。

リダイレクトが多すぎます

潜在的な問題。 リダイレクトは分析に必要ですが、電子メールに良いよりも害を及ぼす可能性があります。 たとえば、Webページの読み込み時間が大幅に長くなります。 次に、ユーザーのブラウザがリダイレクトをブロックする可能性があります。そのため、URLにアクセスできなくなります。

防止。 リダイレクトを避けるようにしてください。 ただし、それでも使用する必要がある場合は、リンク先URLの読み込みにかかる時間を確認してください。キャンペーン全体を開始する前にメールをテストしてください。 サブスクライバーの経験を考慮してください：彼らがURLのロードを待つ気があるかどうか。

短縮されたリンク

潜在的な問題。 リンクが短くなると、メールがスパムフォルダに入れられる危険性があります。 問題は、短縮リンクでは、リンク先URLが不明確であるということです。 簡単に言えば、それはどこにでもつながる可能性があります。 当然、ハッカーやスパマーはそれを利用します。

防止。 短縮リンクは使用しないでください。 長いURLを使用せずにメールをきれいに見せることを目的としている場合は、次のHTMLタグを使用することをお勧めします： <a href="URL">...</a> 。 ここには、長さに関係なく、任意のURLを挿入できます。

それでもリンクの短縮を希望する場合は、サードパーティのツールを使用する代わりに、独自のURLを短縮してください。 少なくとも事前にリンク短縮機能のブラックリストをスキャンしてください。

メール本文のファイルサイズが大きい

潜在的な問題。 電子メールクライアントと電子メールサービスプロバイダーはどちらも、比較的少量の情報を転送するように設計されているため、電子メールの本文のサイズに制限があります。 これらの制限に適合しない場合、電子メールがクリップされる可能性があります—その末尾は非表示になります。

音楽レーベルからのニュースレターを見てください。 Gmailで開くと、クリップされます。

フルバージョンを表示するには、サブスクライバーはリンクをタップする必要があります。

メール本文のファイルサイズが大きいと、配信可能性に問題が発生する可能性もあります。 さらに、サイズが大きいため、電子メールはユーザーのウイルス対策ソフトウェアによってセキュリティ上の脅威と見なされる可能性があります。

防止。 メールサービスプロバイダーとサブスクライバーが使用するメールクライアントのメール本文のサイズ制限を確認してください。 たとえば、Googleはメール本文のサイズ制限が200KBであると主張しています。 ただし、ほとんどの電子メールクライアントの要件を満たすために、電子メールを100KBに制限することを広くお勧めします。 実際、上記の例の電子メールのサイズは136KBです。

フォントと色が多すぎます

潜在的な問題。 電子メールクライアントの違いにより、すべてのフォントと色を正しく表示できるわけではありません。 さらに、すべてのフォントと色が互いにうまく組み合わされているわけではないため、ソースの弱い電子メールデザインを作成するリスクがあります。

また、サブスクライバーのデバイスには、たとえば明るさなど、さまざまな画面設定があることにも注意してください。 そして、あなたがあなたの電子メールをより鮮やかにしようとしている間、ユーザーはこの色の暴動に苦しむかもしれません。

これはメールデザインの疑わしい例です。各ブロックには独自の色があります。 これにより、ユーザーは最も重要な情報から注意をそらされます。

予防。 Arial、Comic Sans MS、Courier New、Times New Roman、Verdanaなどの電子メール対応フォントを選択してください。これらは最も人気のある電子メールクライアントでサポートされています。 テキストフォントのサイズは12〜13ピクセル以上である必要があります。 そうしないと、ユーザーはメールを拡大するか、目を痛める必要があります。

色については、2つ以上を使用しないでください。1つは一般的なテキストブロック用で、もう1つは重要なものを強調するため、およびリンクとボタン用です。 選択した色が背景と一致し、ユーザーがダークモードに切り替えた場合に見栄えがよいことを確認してください。

テキストエディタまたはWebサイトから電子メールテンプレートのHTMLコードをコピーする

潜在的な問題。 Microsoft Wordなどを使用して電子メールのテキストを作成し、それをコピーするだけでは、不要なフォーマットが発生するリスクがあり、電子メールのレイアウトが損なわれる可能性があります。 また、ウェブサイトから画像やテキストの一部をコピーすると、JavaScriptまたはFlash要素がメールに追加される場合があります。

防止。 電子メールをコーディングするには、Windows用のメモ帳やMac用のテキストエディットなど、独自のフォーマットを追加しないテキストエディタを使用します。 TextCleanrなど、フォーマットをクリーンアップできるオンラインツールもいくつかあります。 HTMLクリーナーツールを使用することもできます。このツールを使用すると、使いやすいエディターでメールを作成し、同時にコードを確認できます。

3桁のHEXカラーコードを使用

潜在的な問題。 3桁と6桁のカラー形式は同等である必要がありますが、電子メールクライアントが3桁の形式をわずかに異なる方法でレンダリングする場合があります。 たとえば、Gmailでは、計画した黒ではなく紫になるリスクがあります。 color: #000がcolor: #500050ます。

予防。 経験則として、6桁のカラー形式に固執し、電子メール全体で使用するようにしてください。

添付ファイル

潜在的な問題。 通常、スパマーやハッカーは電子メールにいくつかのファイルを添付します。 添付ファイルを追加すると、セキュリティ上の脅威と見なされる可能性があります。

防止。 電子メールにファイルを直接追加する代わりに、ファイル読み込みページへのリンクを提供します。

これは、約束したファイルへのアクセスをユーザーに許可する方法の例です。 リンクの指定方法に注意してください。ユーザーがリンクをタップしたときに何が起こるかがわかるように、クリック可能なわかりやすいテキストにする必要があります。

代替テキストがありません

潜在的な問題。 一部のユーザーは、ブラウザでの画像のダウンロードを無効にします。 代替テキストのない画像を含むメールを受信した場合、画像ではなく空白のみが表示され、メールのポイントがわかりません。

誰かのインターネット接続が低すぎて画像を十分に速くダウンロードできない場合でも、同じように機能します。 代替テキストは、ある意味でこの問題を解決するのに役立ちます。画像のダウンロードがうまくいかない場合、ユーザーは代わりにテキストを見ることができます。

防止。 使用するすべての画像にalt属性を追加します。 正しく実行していることを確認してください— imgタグに追加してください： <img alt="text"> 。 代替テキストをスペースを含めて125文字に制限します。 通常は、画像を正確に説明する単語を2、3語追加するだけで十分です。 余裕がある場合は、この説明にコンテキストを追加できます。

Sephoraからのメールの抜粋をご覧ください。

このメールのコードを確認すると、画像の代替テキストとしてCTAを見つけることができます。 ユーザーが画像を見なくても、ブランドが提供しているものを理解できます。

画像のみのレイアウト

潜在的な問題。 メールが画像のみで構成され、テキストが含まれていない場合、配信可能性や表示などの問題が発生する可能性があります。 たとえば、ユーザーが画像のダウンロードをブロックした場合、メールには文字通り何も表示されません。 第二に、画像がたくさんあるとメールの本文のサイズが大きくなり、メールクライアントはそれをクリップする可能性があります。 第三に、ユーザーは単語で検索してもフォルダ内のメールを見つけることができません。

防止。 メールを作成するときは、テキストと画像を組み合わせてください。 電子メールのプレーンテキストバージョンと画像の代替テキストを追加することを忘れないでください。 上記の他のアドバイスを考慮に入れてください。

Ecwidからのこのメールをご覧ください。 max-width: 570pxなど、テーブルレイアウトとメディアクエリを含むレスポンシブデザインを採用しています。 このメールは、カラフルで魅力的な画像とテキストなど、さまざまな種類のコンテンツを組み合わせたものです。 たとえば、 color:#979797またはcolor:#4A4A4Aように、6桁のカラー形式が使用されます。 メールには画像が少ないので、本文のサイズはそれほど大きくありません。 さらに、電子メールで短縮リンクもリダイレクトも見つかりません。 全体として、このメールは上記の推奨事項のほとんどを満たしています。

そのため、最も一般的なHTMLメールコーディングの間違いを一瞥しました。 アドバイスを適用し、送信する前にメールをテストすることを忘れないでください。少なくとも3つの人気のあるメールクライアントを使用してメールを開きます。 可能であれば、別のデバイスでも確認してください。 エミュレーターも便利です。

電子メールのコーディングミスを回避するもう1つの方法

真実が1つあります。コーディングしなくても、HTMLコーディングの間違いを犯すことはありません。 幸いなことに、SendPulseを使用すると、ノーコードの電子メール設計があなたを待っています。

直感的なドラッグアンドドロップエディタを使用して、電子メールのコーディングミスを防ぐことができます。 メールに画像、テキスト、またはビデオを追加するだけで、ブランドスタイルに一致するようにフォントと色を設定し、ソーシャルメディアページへのリンクを追加できます。

全体をさらに簡単にするために、無料のメールテンプレートから選択できます。 SendPulseで作成されたすべての電子メールは応答性が高いため、ユーザーがどのデバイスを開いても見栄えがします。

一般的なHTMLメールコーディングの間違いを回避するためのチェックリスト

以下に、一般的なHTMLメールコーディングの間違いを回避する方法に関する主なルールを示します。 これらのルールに従うと、配信可能性と電子メールの表示に関する問題を回避できます。

• メールにプレーンテキストバージョンを追加します。
• JavaScript、ActiveX、Flashなどを使用しないでください。 ビデオやオーディオを追加する必要がある場合は、それをWebサイトにアップロードし、リンクを提供します。
• Webページの読み込み時間を長くしないようにリダイレクトを回避するようにしてください。
• 短縮リンクは使用しないでください—テキストまたは画像をHTMLを使用してリンクに変換します。
• 電子メールの本文のサイズを100KBに制限するようにしてください。または、少なくとも、送信プロバイダーとサブスクライバーが最も使用する電子メールクライアントの制限を確認してください。
• Arial、Comic Sans MS、Courier New、Times New Roman、Verdanaなどのメール対応フォントを選択してください。
• 1つのメールに3つ以上の色を組み合わせないようにしてください。そうしないと、気が散ってしまいます。
• MSWordやWebサイトなどのテキストエディタから電子メールのテキストや画像をコピーしないでください。不要なフォーマットをキャッチするリスクがあります。
• 6桁のカラーフォーマットを使用します。
• ファイルを添付しないでください—代わりにファイル読み込みページへのリンクを提供してください。
• 画像に代替テキストを追加することを忘れないでください。
• 画像のみのメールを作成しないでください。常にテキストを追加してください。
• キャンペーンを開始する前に、メールをテストすることを忘れないでください。 少なくとも3つの電子メールクライアントと異なるデバイスを使用してください。

そして、そのすべてについて考える必要はありません— SendPulseを無料で使い始めてください！