HTMLを使用してシンプルなメールテンプレートを作成する

今日は、「ローテク」の問題について書きたいと思います。

ちなみに、私は JavaScript Weekly など、いくつかのニュースレターを購読しています。毎週、その週の大きなニュースをメールで受け取ります。

ある日、私もこんなメールを作れるかな？と考えました。

すると、それはそんなに簡単なことではないと気づきました。バックエンドと編集作業は別として、電子メール テンプレートを設計するだけでも多くの考慮が必要です。

このフォーマットされた電子メールは実際には Web ページであるため、正式名称は HTML 電子メールです。正しく表示できるかどうかは、電子メールクライアントによって完全に異なります。ほとんどの電子メール クライアント (Outlook や Gmail など) は HTML 設定をフィルター処理するため、電子メールが認識できなくなります。

HTML メールを書くコツは、15 年前に Web ページを作成するときに使用されたのと同じ方法を使用することだということが分かりました。私がまとめた執筆ガイドはこちらです。

1. ドキュメントタイプ

現在、最も互換性のある Doctype は XHTML 1.0 Strict です。実際、Gmail と Hotmail は Doctype を削除し、この Doctype に置き換えます。

この Doctype を使用すると、HTML5 構文は使用できなくなります。

2. レイアウト

Web ページのレイアウトにはテーブルを使用する必要があります。まずは背景となる大きな外側のテーブルを配置します。

テーブルの border プロパティは 1 に設定されており、これは開発の便宜上のためです。正式にリリースされたら、このプロパティを 0 に設定します。

内側の層に2番目のテーブルを配置します。コンテンツを表示するために使用されます。 2 番目のテーブルの幅は、クライアントの表示幅を超えないように 600 ピクセルに設定されています。

メールの内容と同じ数の行を設定します。

3. 画像

引用できる外部リソースは画像のみです。スタイルシート ファイル、フォント ファイル、ビデオ ファイルなどのその他の外部リソースは一切参照できません。

一部のクライアントは画像リンクに境界線を追加するので、それを削除する必要があります。

多くのクライアントではデフォルトで画像が表示されないため（Gmail など）、画像がなくてもメインコンテンツが読めることを確認してください。

4. インラインスタイル

すべての CSS ルールはインラインで使用するのが最適です。 Web ページのヘッダーに配置されたスタイルは、クライアントによって削除される可能性があるからです。 CSS ルールのクライアント サポートについては、こちらをご覧ください。

また、一部のクライアントでは CSS の省略形がサポートされていないため、使用しないでください。たとえば、次のように書く代わりに、

表現したいなら

次のように書きます:

5. W3C 検証およびテストツール

一部のクライアントは非修飾属性を削除するため、最終的なコードが W3C チェックに合格することを保証します。また、テスト ツール (1、2、3) を使用して、さまざまなクライアントでの表示結果を確認します。

HTMLメールを送信する場合、MIMEタイプは使用できないことに注意してください。

代わりに、

送信ツールとしては、MailChimp と Campaign Monitor の使用を検討してください。

6. テンプレート

他の人がすでに作成したテンプレート (こちらとこちら) を使用することをお勧めします。インターネット上でさらに多くのテンプレートを見つけることができます。

独自のものを開発したい場合は、「HTML Email Boilerplate」と「Emailology」を参照してください。