メールマーケティング

HTMLメールはどうやって作成するの?まずは基本と特徴を徹底解説!

 メルマガは、顧客の受信ボックスに直接訴求できるため、2018年においてもあらゆるマーケティング施策の中で、最も高いROI(投資対効果)を誇っています。もちろんこれは正しく表示されるHTMLメール作成を行なってこそ得られる効果です。本記事ではきちんと顧客に届けるためのHTMLメール作成の基本を解説します。

※今すぐHTMLメール作成が可能なソリューションをお探しの場合、WiLL MailのHTMLメールエディタをご利用ください。スマホ・マルチデバイス対応のHTMLメールを簡単に作成できる様々な機能を備えています。
くわしくはこちら

HTMLメールの特徴

 作成方法の説明の前に、あらかじめ知っておくべきHTMLメールの構造上の大きな特徴をいくつかご紹介します。

“標準的なHTMLメール”は存在しない

 世の中には「標準的なHTMLメール」という規格が存在しません。例えば、マイクロソフトが提供する『Outlook』のサポートチームは『Microsoft Word』を用いてHTMLメールを作成することを推奨していますが(※)、『Microsoft Word』で作成されたHTMLメールは、GmailやiOS、サンダーバードなど別のメールクライアントでは正しく機能しないこともあります。その逆もまた然りです。HTMLメールはこういった複雑な受信環境を前提のもとに作成する必要があります。

 ※この理由として「長年ユーザーにはそうしてもらっているし、セキュリティ上の観点からそうしている」という回答がサポートチームから得られたケースもあるようです。

HTMLメールを受け取る環境の組み合わせは100万以上存在する

 スマートフォンが浸透したことにより、あらゆる環境でHTMLメールを閲覧することが可能になりました。その結果、様々なメールクライアントとデバイス、それらのバージョンの掛け合わせでの閲覧が想定されるようになりました。その組み合わせのパターンは、100万種類以上あると言われています。つまりどんな環境でも間違いなく閲覧できるHTMLメールを作ることは不可能と言っても良いでしょう。

ウェブのHTMLとは全く違う

 通常のウェブ開発のような挙動をHTMLメールに期待することは避けた方が良いでしょう。既に記載したとおり標準的なサポートも存在しませんし、100万種類以上の閲覧環境が存在するうえ、divを使えないケースがあったり、マージンが完全にサポートされていないメールクライアント(主にOutlook)があったりするからです。一般的なHTMLや最新のCSSの仕様があまり役立たないということを認識しておくことも重要です。こうした細かい点を次の章からご紹介していきます。

HTMLメールの構造を理解しよう

 HTMLメールがウェブとは異なる特別な仕様であることはご理解いただけたでしょうか。ここからは作成方法と主な注意点についてご紹介します。シンプルなHTMLメールを想定してご紹介します。

1.DOCTYPEを指定する

 HTMLメール作成は、DOCTYPE宣言(文書型宣言)から始まります。DOCTYPE宣言とは、この文書がHTMLであることや、どのHTMLのバージョンか、HTMLタグとHTMLとCSSがどのルールに従った記述かをプログラムに知らせるコードです。

 文書間の不具合や不一致が一般的に少なくなると言われている点を考慮し、ここではXHTML 1.0 Transitionalを使用した記述をご紹介します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WiLL Mailで効率的にメルマガ配信する10のヒント</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

 続けて『head要素』について説明します。「title」タグは件名にあたります。またブラウザでメールを表示した際のタイトルにもなります。

 「Content-Type」タグは、テキストと特殊文字の処理方法をレンダリングエンジンに伝えるためのものです。

 「viewport」タグは、コンテンツの表示可能領域をデバイスの横幅に、また、初期拡大率を「等倍」に設定します。これを指定することで、スマートフォンなどのデバイスで閲覧した際にテキストと画像が画面の端に収まるようになります。

2.基本的にテーブルレイアウトで構成する

 HTMLメールは、基本的にtable要素で作成します。article要素やsection要素などは使用しない前提で作成する必要があります。なぜなら繰り返しになりますが、デスクトップ、モバイルなどあらゆる環境での閲覧を考慮するとテーブルレイアウトがベターな選択肢といえるからです。また、tableタグを組むときにcolspanやrowspan、どちらも適切にサポートされていないため、これらを使わずに組み立てる必要があります。

3.文章入力にも一般的なタグは使用しない方が良い

 h1,h2,h3などの見出しタグの使用もあまりお勧めできません。やはり標準的なサポートがないことがその理由です。従って文章を入力する際は、テキストブロックを独自のセルに配置し、そのセルにインライン方式を適用することが最善の策の一つと言えます。

4.CSSは埋め込み形式が一般的になりつつある

 リッチなHTMLメールには、CSS(カスケーディングスタイルシート)が含まれています。HTMLはメールのコンテンツとレイアウトを構成する役割を担い、CSSはコンテンツのスタイルや書式設定(リンクの色や見出しのフォントなど)をする役割を担います。

 このCSSを用いる場合、外部読み込み形式、埋め込み形式、インライン形式のいずれか3つの方法がありますが、2018年時点では埋め込み形式が最も一般的であり推奨される方法といえます。

埋め込み形式がなぜ最適なのか

 埋め込み形式とは、CSSをHTMLドキュメントのheadに配置する形式です。近年スマートフォンが浸透してレスポンシブ・デザイン需要が増えたことで人気が高まっている形式なのです。

 一部の電子メールクライアントは、タグ内の埋め込まれたCSSの大半を取り除いてしまいます。特にGmailが長い間この問題を抱えていましたが、2016年の秋にようやくサポートに対応しました。これにより、埋め込み形式が最適な状況がようやく整いました。

インライン形式とは

 インライン形式とは、HTMLに直接記述する形式です。このインライン形式が様々なメールクライアント間でのレンダリングの互換性を保証する最も安全な方法です。しかしインライン形式は、作成に時間がかかり、管理するのが難しい場合があるのが難点です。うまく機能せずコンテンツが表示されないといった問題も抱えています。

 なお、外部読み込み形式は、メールデザインの場合、多くのWebメールクライアントが外部スタイルシートへのリンクをブロックしてしまうため、採用するケースはあまり見受けられません。

5.マージン(行間)が正しく動作しないこともある

 マージンタグは、文章の行間を指定する機能を担っており、HTMLメールのレイアウト作成において大きな役割を果たします。ところが『Hotmail』や『Outlook』は2013年頃よりこのマージンタグのサポートを打ち切っています(もともと正しく動作していたわけでもないですが)。

 「Outlookで閲覧したメールの行間は、他のメールクライアントよりも広くなる」と割り切ったレイアウトも考慮することがこの問題への最適な解決方法のひとつともいえます。

6.フォントの一括指定プロパティなどは使えない

 サポートしているメールクライアントが少ないため、フォントサイズの一括指定プロパティ(例:style = “font:8px / 14px Arial、sans-serif;”など)の使用は避けた方が良いでしょう。

7.容量を大きくしすぎないように注意しよう

 HTMLメールはなるべく小さいサイズで送るようにしましょう。100kb(キロバイト)以内に収めるのが理想的です。Gmailの場合、102kb以上の大きさのメールを勝手にクリッピングしてしまいます。つまりそれ以上の大きさに該当するコンテンツを勝手に隠してしまうのです。

 また、容量が100kbを越えると到達率に悪影響があるとも言われていますので、詰め込みすぎず簡潔にわかりやすいコンテンツにするように心がけましょう。

関連ブログ:メルマガの到達率とは? 改善するための6つのポイント

まとめ

 いかがでしたでしょうか。主な特徴と作成時の注意点をざっとご紹介しました。色々とややこしく、標準的なウェブデザインで学んだことが使えないのがHTMLメールデザインなのだということをご理解いただけたと思います。さらにここから『レスポンシブ・デザイン』対応を行うと、より複雑な構造になります。この点はまた別の機会にご紹介します。

 しかし皆さんの本来の目的はクセのあるHTMLメールデザインをゼロから学ぶことではなく、効果的なHTMLメールを配信することのはずです。手間の掛かる作業はクラウドサービスでどんどん効率化していきましょう。

 当社のメール配信システムも「誰でも簡単に」をコンセプトに開発されたHTMLメールエディタを搭載しています。ご興味がありましたらぜひお問い合わせくださいね。

 最後までお読みいただきありがとうございました。

著者
WiLL Cloud マーケティングチーム

ウェブマーケティングに関する情報をお届けするブログです。皆様に役に立つ情報、アップデート、イベントなど、様々なことを発信します。

WiLL Cloud無料トライアル