ビジネス HTML メール作成に関する提案

許可ベースの電子メールマーケティングにより、マーケティングとプロモーションのコストを大幅に削減できるだけでなく、情報を顧客に直接かつ正確に届けることもできます。

私が今日研究している問題は、技術的な側面から始めて、ユーザーのビジョンとメールクライアントの両方と互換性のある優れた電子メールを作成する方法です。

1. HTMLまたはプレーンテキストを選択する
シンプルなテキストを好む人もいれば、リッチな HTML を好む人もいます。どのように選択すればよいのでしょうか?
マーケティングメールの場合、HTML 形式 (画像) を使用することをお勧めします。

確認/リマインダー/通知メールの場合は、テキストまたはシンプルな HTML (画像) を使用することをお勧めします。

なぜこれら 2 種類の電子メールに異なる制作方法を使用するのでしょうか? その理由は次のとおりです。
マーケティングメールの内容は豊富で多様ですが、確認メールの内容は単一でユニークです。
マーケティングメールでは、顧客はコンテンツの豊富さと視覚効果の美しさに注目します。
確認メールでは、お客様に確認情報を非常に直接的に見ていただく必要があります。複雑なコンテンツや視覚効果は、お客様がメールのメインコンテンツである確認情報を無視するだけになります。
（以下では、マーケティングメールの HTML 作成に焦点を当てます）

2. テーブルレイアウト + CSS に基づく基本的な HTML スキル<br />カンフーには 2 種類あります。1 つは極度に陽で極度にハードなもの、もう 1 つは極度に陰で極度にソフトなものです。張三鋒が頂点に達したのは、武術の基礎がしっかりしていて、少林寺の基本的なスキルがしっかりしていたため、極度に陰で極度に陽であるこの太極拳を実現できたからです。
HTML メールについても同様です。現在、従来の Outlook、Thunderbird、Lotus Notes、オンラインの Mac Mail、Gmail、Hotmail など、さまざまな種類のメール閲覧クライアントがあることはご存じのとおりです。メールの解釈はそれぞれ異なります。ほとんどのオンラインメールシステムでは、<head></head> タグ間のコードはブロックされます。

異なるクライアントを使用するすべてのユーザーが同じ電子メールを見ることができるようにするためには、HTML の基本的なスキルを十分に理解している必要があります。 DIV+CSS だと言う人もいれば、SEO タグセマンティクスだと言う人もいます。Web 開発者として、これら 2 つの一般的な HTML 開発のアイデアを持つことは非常に人気があることは否定できません。ただし、これは電子メールの作成には当てはまりません。私たちの目標は、顧客がさまざまなメールクライアントで同じ情報コンテンツを表示できるようにすることです。そのためには、最も原始的な組版方法であるテーブルレイアウト + CSS が必要です。現在の電子メールクライアントの HTML と CSS のサポートを見てみましょう (画像):

*Hotmailは<body></body>間の<style>を解析できますが、<head></head>間の<style>もブロックします。

3. HTML メールを作成するときは、次の点に注意する必要があります。

スタイルは、独立した外部ファイルではなく、HTML タグ内に記述し、<style></style> (picture) の間に記述しないでください。
たとえ繰り返しが多くて面倒な場合でも、コンテンツを含むすべてのタグに CSS を追加します。
HTML 要素タグを配置するために CSS を使用しないでください。
配置には絶対サイズ (ピクセル) と相対サイズ (パーセンテージ) の組み合わせを使用します。
電子メールに Javascript、Flash、または特殊なタグ (marquee など) を挿入しないでください。
ほとんどの電子メールクライアントは、Flash や Javascript、および一部の特殊なタグや属性をブロックします。
背景画像は使用しないでください
ほとんどのオンラインメールクライアントでは、背景画像プロパティがブロックされています。Gmail では、背景画像は表示されません。
各画像の幅、高さ、Alt属性値を指定します。
画像の src 属性には絶対アドレスを使用する必要があります。
正解: <img src=”http://blog.54575.com/logo.gif” width=”297″ height=”160″ alt=”よく生きる = 有意義に生きる” />
エラー: <img src=”logo.gif” />
重要な情報を示すために写真を使用しないでください。展示会の時間、場所、内容などの情報は非常に重要です。写真が表示されない可能性があることを考慮すると、これらの内容を写真で表示することは推奨されません。
画像に配置する場合でも、メール本文ではテキストで表現し、画像のAlt属性にその内容を追加してください。
統合された UTF-8 エンコーディングを使用します。

4.メールの幅は 650 ピクセルですか? それとも 600 ピクセルですか?
ウェブページの現在の標準の幅は 950/960 ピクセルであり、これはモニターの解像度によって異なることは誰もが知っています。
電子メールは通常、ソフトウェアクライアントとオンラインクライアントの 2 つの方法で開かれます (画像)。
*マイクロソフトOutlook2003

*NetEase 163 メールボックス

図からわかるように、メールは全画面で表示されないことがよくあります。
ウェブページの標準幅である960/950pxを使用すると、メールコンテンツの一部が隠れてしまい、水平と垂直の2つのスクロールバーが表示され、顧客が閲覧するのに不便になります。
しかし、幅が狭すぎるとスペースの無駄が生じます（図）

では、HTML メールの最適な幅はどれくらいでしょうか?まず、いくつかの有名企業が HTML メールを作成するときに使用する幅を見てみましょう。

網易有道: 600ピクセル

QQメンバー: 650px

Dell ホーム&オフィス: 650px

シスコウェブエックス: 600ピクセル

これらの有名な IT 企業のマーケティングメールには、600 ピクセルと 650 ピクセルの 2 つの幅があることがわかります。
EDM と Web デザインにおける 4 年間の経験に基づいて、私は後者、つまり HTML マーケティングメールの標準幅として 650 ピクセルを好みます。
650px の利点:
メールの内容を2列に分割する場合、650pxはX+10+Yに分割できます。ここで、X=左列、Y=右列、10は間隔、X+Y=640、640は20で割り切れるので、 640=2×2x2×2x2×2x10です。
メールの内容を3列に分割すると、650pxはX+10+Y+10+Zに分割できます。同様に、X+Y+Z=630となり、630は30で割り切れるので、 630=3×3x7×10となります。
なぜこれが分割されるのかを理解するには、Web ページのラスタライズに関するこの調査を確認してください。
そのため、600px ではなく 650px を選択しました。
もちろん、これはあくまでも私の個人的な標準であり、まだ世界標準ではありませんが、いつの日かこの幅が HTML メールの作成者と受信者の大多数に認識されるようになることを願っています。

<<: ウェブサイトのデザインでは色の階層感覚に注意を払う必要があります

>>: Douyin ロゴを作成する手順の CSS3 分析