EDMをHTMLで記述する際の注意点まとめ（メール送信時の一般的な注意点）

フォーマットエンコーディング

1. ページの幅は600～800px、長さは1024px以内に設定してください。

2. HTML エンコードには utf-8 を使用してください。

3. HTML コードは 15KB 以内にしてください。 (メールボックスごとにメール受信の基準が異なります。メールのサイズが 15KB を超えると、迷惑メールフォルダに振り分けられる可能性が高くなります。)

4. レイアウトには表を使用してください。 <td><img src="photo.jpg" /></td> のように、同じ <td> 内に画像を 1 つだけ配置します。すべての画像には幅と高さが定義されている必要があります。同じ段落のテキストが同じ <td> 内に配置されます。

5. メールを中央に表示する必要がある場合は、テーブルで align="center" を設定してください。

6. Word ファイルを HTML 形式に直接変換することはできません。そうしないと、非標準のエンコードが発生します。

7. テキストや画像を定義するために外部 CSS スタイルを使用しないでください (外部 CSS スタイルは電子メールでは読み取れないため、スタイルにリンクされていないため、送信された電子メールのコンテンツ スタイルが失われます)。正しい記述方法は、<td style="font-family:arial;font-size:12px;color:black">text</td> です。

8. Flash、Java、JavaScript、フレーム、iframe、activeX、DHTML は使用しないでください。ページ内の画像を動的にする必要がある場合は、Flash ファイルを GIF アニメーションに変換して使用してください。ただし、Outlook 2007 では GIF アニメーションが制限されているため、Outlook 2007 では GIF が正常に表示されません。

9. 一部の電子メール システムではフィルターされるため、<table></table> 以外の body、meta、html などのタグは使用しないでください。

10. 背景画像のコードは次のように記述されます: <table background="background.gif" cellspacing="0" cellpadding="0"></table>。ただし、Outlook は背景画像を認識しないことに注意してください。

11. 「onmouseover」と「onmouseout」は使用しないでください。<td> に設定しても、メール送信後にフィルタリングされ、マウスが通過したときに表示される内容が表示できなくなります。

12. font-family 属性は空にできません。空にすると、QQ によってスパムとしてブロックされます。

13. メール テンプレートの内側または上下に空白がある場合は、パディングを使用しないでください。空白を設定するには、標準の td を使用する必要があります。そうしないと、メールボックスごとに異なる解析が発生します。

14. Yahoo Mail での line-height の定義に関する注意: line-height はブロックレベル要素で定義する必要があります。 td に p タグがある場合は、 line-height も p で定義する必要があります。 td でも p でも、ハイパーリンクがある場合は a タグで line-height を定義する必要があります。 td または p でのみ行の高さを定義した場合、Yahoo メールは a の行の高さを認識しません。

15. 背景画像がある場所にbackground-colorを設定すると、背景画像が表示されなくなり、より美しくなります。

16. フロート、マージン、パディングは控えめに使用してください。絶対位置指定は使用できません。フロートをクリアするには、<table style="clear:both"></table> を使用します。

文章

1. メールの件名は 18 文字以内にしてください。文字化けの原因となる特殊記号の使用は避けてください。

2. 「xxx.com 新年のご多幸をお祈りいたします」など、電子メールの件名や本文に Web サイトのアドレスを含む情報を含めないでください。クライアントのブランドがよく知られている場合は、「NIKE スポーツファッション」のように会社名をテーマに含めることができます。

3. テキストコンテンツの場合、クリック率を高めるために、レイアウトはできるだけ簡潔にし、テーマを強調する必要があります。

4. 無料、割引、特別オファー、特別価格、低価格、安い、安い、ビデオ、お金を稼ぐ、大量メール、金持ちになる、金持ちになる、代理店、給料、友達を作る、支払い、ビジネスチャンス、魔法の武器、宝物、秘密、情報、機密、極秘、極秘、神秘的、秘密などのセンシティブな言葉や宣伝用語は使用しないでください。必要に応じて、デリケートな言葉を絵にしてください。

5. 200,000 通を超えるメールが送信される場合は、件名の内容を変更する必要があります。200 万通を超えるメールが送信される場合は、再設計を検討する必要があります。

6. テキストのフォント スタイルは可能な限り定義する必要があります。各メールボックスのデフォルトのフォント スタイルは異なります。希望する効果を実現するには、フォント スタイルを完全に定義する必要があります。

写真

1. さまざまな主流のメールボックスでテキストの表示に違いが生じないように、できるだけ画像を使用します。たとえば、QQ メールボックスでは、コードで設定しないと、メール内のテキストが自動的に折り返されず、Gmail メールボックス内のメール コンテンツのフォントが自動的に拡大され、元々設定されている文字サイズと一致しなくなります。

2. 全ページ画像の数は 8 枚までで、各画像の最大サイズは 15KB を超えることはできません。

3. 画像アドレスにローカル パスを書き込まないでください。例: <img src="images/aa.jpg" /> (この方法で送信された電子メールの受信者は画像を見ることができません)。

4. 画像名に「ad」という文字を含めることはできません。含めると、アップロード後に画像は「フィルタリングされた広告」として表示されます。

5. メール テンプレート全体に画像が 1 枚しかない場合は、必ず 2 ～ 3 枚の小さな画像に分割し、一部のテキストを適切に残してください。

6. Gmail と QQ のメールボックスの要件が再び変更されました。画像の属性を完全に定義する必要があります。たとえば、<img src="images/1.jpg" style="vertical-align:top;" height="30" width="100" alt="" /> ここで、style="vertical-align:top;" を定義する必要があります。そうしないと、画像間にギャップが生じたり、変形したり、その他の表示異常が発生します。

7. img タグに alt 属性を追加して、ユーザーがメールを受信したときに、一部のメールボックスで画像が非表示になっている場合でも、alt 内のコンテンツを表示できるようにします。たとえば、<img src="images/1.jpg" style="vertical-align:top;" height="30" width="100" alt="コンテンツを表示" /> のように、顧客にメールの内容を知らせ、クリックして画像を表示するように促します。

リンク

1. リンクの数は 10 を超えることはできません。すべての画像のリンク アドレスが同じ場合は、すべての小さな画像を 1 つの大きな画像に結合してください。

2. リンクは絶対アドレスで記述してください。 (受信者がリンクをクリックしたときにコンテンツを正常に閲覧できるようにするため)。

3. リンク アドレスの長さは 255 文字を超えることはできません。それを超えると、追跡不能になったり、リンク エラーが発生したりします。

4. マップ機能を使用して画像をリンクしないでください。この機能を使用すると、ほとんどのメールボックスでメールがスパムとして分類されます。

5. ユーザーがメール内の画像を表示できないことを避けるため、メールと同じ内容のウェブページを作成し、メールの先頭に「メールの内容を表示できない場合は、ここをクリックしてください」と記載して、同じ内容のウェブページにリンクしてください。

6. テキスト内に表示されるウェブサイトアドレスリンクは、スパムとしてブロックされる可能性が高くなります。たとえば、http://xxx.com のようなリンクの場合は、「XXX Company」とリンクをつけて記載するか、URL を画像にしてリンクを追加することをお勧めします。

7. 電子メールの解析エラーを回避するために、リンクに特殊記号を使用しないことをお勧めします。

8. リンク コードはできる限り短くしてください。コードが長すぎると、テンプレートのサイズが大きくなり、メール送信の効果に影響します。

Outlook ルール

1. <col> タグは認識されません。複数の TD に同じ幅を定義したい場合は、特定の TD に特定の幅を記述します。たとえば、<td width=""></td> です。

2. インライン要素のパディングは認識できません。たとえば、<a href="#" style="padding-left:40px;"></a> の場合、a タグ内のコンテンツは左から 40 ピクセル離れません。 td でパディングを定義できます。

3. インライン要素の vertical-align は認識されません。たとえば、<img src="1.jpg" style="vertical-align:bottom" /> の場合、この画像は同じ行の要素の下部に揃えられません。<td valign="bottom"><img src="1.jpg" /></td> と記述できます。

4. td にテーブルが含まれている場合、子テーブルで定義されたラベルのスタイルは、子テーブルで定義されたスタイルのみを正しく表示し、親テーブルのスタイルは正しく表示できません。注意: テーブルに a タグがある場合、a タグ内のコンテンツのカラー スタイルは a タグで定義する必要があります。親 td またはそれが配置されているテーブルで定義することは無効です。

5. td と td の間にスペースがある場合は、<td style="border-bottom:10px solid #fff"></td> を使用します。この方法では、td の間にスペースがなくなります。 <td style="margin-bottom: 10px"></td> を使用するとスペースは入りません。 td 間にギャップがある場合は、<td></td><td height="10px">&nbsp;</td><td></td> で区切る必要があります。ただし、表の場合は、<table style="border-top:10px solid #ffffff; border-bottom:20px solid #ffffff"></table> 内のコンテンツの上下に空白行が入ります。

6. p タグの幅が認識されません。たとえば、<p style=”width:320px” ></p> の場合、p タグ内のコンテンツは 320px で自動的に折り返されません。 <td> の幅が設定されている場合にのみ、コンテンツは幅の制限で折り返されます。

7. <P> タグを使用する場合は、<P> タグ自体の上下の行間の行の高さを考慮する必要があります。

8. <td> で margin を設定することは無効です。margin-left、margin-right、margin-top、margin-boottom のいずれであっても効果はありません。

9. <img align="left" /> または <img align="right" /> が設定されている場合、画像はドキュメントフローの外側に表示されます。親要素にマージンまたはパディングが設定されている場合は、下、左、右に移動できません。

10. Outlook では、ネストされた画像が長すぎると、異常な表示が発生します。画像をいくつかの短い画像に分割してレイアウトすることができます。

また、メール テンプレートを送信するときは、フォーマットにソース コードを貼り付けるようにしてください。何度も転送するとスタイルが失われる可能性があります。