HTMLメール制作のコツや便利なサービスいろいろ

thumb_htmlemail

みなさん、購読しているニュースレター(メールマガジン)はありますか?私は利用しているWebサービスや趣味関連のものをあわせてだいたい10サイトくらい購読しています。どれも素敵なデザインのHTMLメールばかりで、見ていて楽しくなっちゃいます :) そんなわけで今回はそんなHTMLメールの現状や、制作時のTipsを紹介します。効果的な導入方法を一緒に考えてみましょう!

HTMLメールとは

テキストのみのメールではなく、テキストに色がついていたり、画像が挿入されている、HTMLを使って設計されたメールのことをHTMLメールと呼びます。海外では大手Web系企業をはじめ、多くの会社がHTML形式のニュースレターを配信しています。私が購読しているWebサービスのニュースレターやブログの更新通知メールはすべてHTMLメール。昨年日本のWebサービスからテキスト形式のニュースレターを頂いた時は、正直久しぶりに見たテキストメールに驚きました。


昔から日本では『HTMLメールは嫌われる』という謎の固定概念があるようですが、そんな考えも今は昔。2010年に行われたマクロミルメールマガジンに関する調査(PDF)によると、テキスト形式での配信を望むユーザーの割合は24%に留まりました。言い換えれば残りの76%のユーザーは(メールの内容にもよりますが)HTMLメールを嫌っているというわけではありません。2014年現在、日本のWebサービスでもHTMLメールを配信する企業が増えつつあり、ユーザーの考えはさらに変化していることでしょう。

日本のユーザーがニュースレターを嫌う要因のひとつとして、某大手ネットショップのスパムメールが挙げられる気がしますが…まぁこの辺は今回は割愛…。

ちなみに現在は、デフォルトではHTMLメールを送信し、テキストメールしか対応していないユーザーにはテキスト形式を表示させる機能のあるメール配信システムも多く、安心して配信できます。

HTMLメールもレスポンシブ時代に


これまでのメールは、そのほとんどがデスクトップのメールクライアント及びWebメールに向けたものでした。しかし、スマートフォンが普及してからはモバイルデバイスでメールを閲覧する人も増加。エクスペリアンジャパンが2013年4~11月に行った開封エンゲージメントサービス調査によると、HTMLメールの65.5%はモバイルデバイスでの閲覧だったそうです。これからのメールマーケティングはデスクトップのメールクライアントのみならず、モバイルデバイス対応の重要性も伺えます。

HTMLメールでできること

見やすく、メリハリのあるメールを配信

ユーザーを魅了するメールを届けるには、モノクロかつ同じサイズのテキストのみでは限界があります。例えばテキストのみで「かわいいキャラクターのイラスト付き化粧ポーチ入荷!」と紹介されるよりも、実際にその写真が掲載されている方がわかりやすいですね。

delete-bad-design-email
2013年3月に行われたMarketingChartsの調査「Lack of Mobile Email Optimization May Drive Away Up to 3 in 10 Recipients」によると、デザインのよくないメールの内、80.3%は削除されてしまい、30.2%のユーザーが定期購読を解除するそうです。もちろん、単純にテキストメールからHTMLメールにすればいいというわけではなく、ひとつのWebページをデザインするのと同様に、見やすさや使いやすさも考慮してデザインしなければなりません。

メールの開封率を計測


HTMLメールでは開封率やクリック率がわかるので、今後のマーケティング戦略を考える材料としてフル活用できます。ただし、無断で計測すると不信感を抱くユーザーも。あらかじめ計測することをニュースレターの登録ページやプライバシーポリシーのページに加えておくといいでしょう。

HTMLメール制作時に覚えておくべきこと

では、どのようにしてモバイルに対応したHTMLメールを制作するのでしょうか?「HTMLメール」という呼び名から、通常のWebページと同じように進められると思われがちですが、実はかなり原始的な方法で制作していきます…。必須項目を中心にダダっと紹介します。

1. テーブルレイアウト

現在Webサイトのレイアウトを組むのにCSSを使いますが、昔は table タグを使ってレイアウトを組んでいました。その頃と同じ手法で、すべてのレイアウトをテーブルで組んでいく必要があります。やっかいなのが、メールクライアントによっては謎の余白ができてしまうこと。様々な理由が考えられますが、一般的に tdth タグに以下の指定をすることで解決できます。

  • vertical-alignを指定する(top, middle, bottom 等)
  • font-size: 0; を指定
  • line-height: 0; を指定
  • td 内に画像のみを配置する場合、画像と同じ width と height を指定

table-generator
テーブルのタグ打ちがどうも苦手だ…という人の強い味方になってくれるのがHTML Table generator。テーブルのHTMLタグを生成してくれるジェネレーターです。直感的にテーブルを作成できるので、HTMLメール制作初心者の方でも比較的楽に進められるはず。

2. CSSはインライン指定

いくつかのメールクライアントは外部CSSや head 部分のスタイル指定を無視するため、各要素に直接CSSを指定する必要があります。

<div>
  <p style="font-size: 16px; color: #fc2;">こんな感じですね。</p>
</div>

この場合、p を囲っている div 要素にスタイルを指定するのではなく、できるだけ直近の要素に指定するとトラブルを回避しやすいです。


HTML email inline stylerを使えば、すでに外部CSSで指定しているスタイルを各要素に指定してくれます。HTMLを貼り付けるか、URLで指定生成可能。CSSのURLが http:// から始まる絶対パスでないとエラーとなるので注意です。

3. 画像関連

詳しい説明不要な簡単な注意点ばかりなので、箇条書きにて。

  • 画像のパスは、http:// から始まる絶対パスで記述する
  • デフォルトで画像を非表示にしているユーザーも多いので、alt属性必須
  • アニメーションGIFは避ける。デバイスによっては表示されない
  • 背景画像に頼ったデザインは避ける。デバイスによっては(ry

4. レスポンシブデザイン

レスポンシブWebデザインと同様、HTMLメールでもレスポンシブに対応させるためにはメディアクエリーを利用します。ただし、モバイルデバイスのGmailアプリは style タグを無視するため、モバイルファースト手法で制作していきます。モバイルファーストとは、従来のデスクトップデザイン→メディアクエリーで小さい画面に対応、という順序ではなく、先にスマートフォンサイズで制作しておいて、メディアクエリーでデスクトップサイズに対応させるという手法です。これならメディアクエリーが利用できないスマートフォンアプリでもうまく表示されるでしょう。

@media screen and (min-device-width: 480px) {
     /* スタイルを記述 */
}

この書き方だと、デバイスの幅が480pxを超える場合は別のスタイルを適応させる、という指定になります。数値はもちろん変更可能。デスクトップサイズのテーブルの幅は600pxが最適だと言われています。

5. ストレスフリーなコンテンツを

ここまで制作の技術面で大切なことを紹介しましたが、ここではコンテンツの見やすさや使いやすさという視点でHTMLメール制作を考えてみたいと思います。

表示するコンテンツを限定する

ひとつのメールでたくさんの事を書きすぎてはいけません。多くのユーザーはメールをササッと確認する程度で、最初から最後までじっくり精読する人は少ないです。極端な話、掲載するのはユーザーの印象に残るような画像とキャッチコピーと5行前後の簡易説明文、そして詳細を掲載しているページへのボタンのみでOK。重要ではない要素を省く勇気も必要です!

htmlメールのいい例と悪い例
右のHTMLメールはSTORES.jpが配信しているものです(拡大して見る)。新機能のお知らせや便利な機能の使い方が月に3〜5回ほど配信されています。内容もひとつのメールでひとつのコンテンツに絞り、余白をたっぷり使ったスッキリとしたデザインで大変読みやすく作られています。もちろんスマートフォンで見ても問題なし。

重要な決断を迫らない

先ほど述べたとおり、ユーザーはメールを短い時間で簡単に確認する程度で読み流します。そんな時に「今すぐ登録!」「今すぐ購入!」という決断を迫られても単純に無視されるか、最悪の場合うっとうしく感じられて購読を解除されてしまいます。そのため、メールでは軽く行動を促す程度におさめ、リンク先でより詳細な情報とともにCTAボタンを置くとよいでしょう。具体的には「今すぐ購入!」ボタンの代わりに「詳しい情報を見る」「サイズを確認する」「もっと画像を見る」などなど。

去る者は追わない

たとえニュースレターの登録を解除したいというユーザーがいたとしても、その方法を隠したり、阻止してはいけません。必ずどのメールにも登録解除のリンク(または解除方法)を記載しましょう。サービス自体に不満はなく、ただメールが不要だ、というユーザーもいます。それなのに解除を妨害されることでユーザーにストレスを与えると、会社自体にマイナスなイメージを持たれてしまいます。どのユーザーにもハッピーな気持ちでサービスを楽しんでもらいたいですよね!

レスポンシブ対応の無料HTMLメールテンプレート

HTMLメールを制作する時の注意点をずらずら並べましたが…はいそうです、とにかく制限が多すぎる!!これを一から自分でコーディングしていくのは一苦労。そのうえ手間をかけて制作したにもかかわらず一度読まれて終わりという悲しき運命です。なので、既に多くのメールクライアントでテスト済みのHTMLメール配信サービスや、テンプレートを使ってみましょう。

MailChimp

mailchimp
MailChimpは世界中で愛されているニュースレターの作成支援&配信サービス。無料で最大2000人の購読者に、月間1万2000通まで配信できます。もっと多くのユーザーに配信したり、月間配信数を増やしたい場合は月額料金が発生します。

HTMLメールもテンプレートを選択し、画像やテキストを挿入したり、ドラッグ&ドロップで項目を追加して手軽に作成可能。メール配信後の解析ツールも充実しています。A/Bテストも実施できますよ。詳しい登録方法や簡単な使い方については「無料で手軽にHTMLを使ったメルマガの作成と配信ができるウェブサービス「MailChimp」を使ってみた」が参考になります。

Campaign Monitor

cm
Campaign MonitorもMailChimpと同じくHTMLメールの作成や配信ができるサービス。私は常にこちらのCampaign Monitorを利用していました。ドラッグ&ドロップでHTMLメール制作、解析ツール、A/Bテスト等、できることはMailChimpとほぼ同じ。料金形態は月額プランの他、一通$5+配信ユーザー数×1セントという配信メール単位での課金もできます。例えば3,000人に配信するなら$35($5+3000*$0.01)かかります。MailChimpの料金表と比較すると、購読者数が2,600人を超え、且つ月に一度程度しか配信しない場合はMailChimpよりCampaign Monitorの方がお得なようです。


Campaign MonitorのHTMLメール作成ツールは無料のものも用意されています。そしてなんと日本語にも対応しています!!ただこちらは有料のものとは別で、あくまで骨組みを作成するツールと考えていただきたいです。詳しい手順は「無料ツールを利用したHTMLメールの作り方~前編~【非デザイナー向け】」という記事を読んでみてください。

Ink

ink
InkはCSSフレームワークFoundationを開発したZURB社によるHTMLメールのフレームワーク。CSSフレームワークと同様、グリッドやボタンといったコンポーネントが含まれています。数種類用意されているテンプレートもダウンロード可能。ただし、CSSがすべてインラインではないので、すべてのメールクライアントに対応させるためには同サイトが用意しているEmail CSS Inlinerを使って各要素にスタイル指定する必要があります。

その他シンプルなHTMLメールテンプレート

他にも使い勝手のよさそうなテンプレートいろいろ。枠組みさえあればカスタマイズも難しくないと思うので、ぜひ試してみてください。

HTMLメールの表示確認

恐怖の表示確認。WebサイトをIE6に対応させるのがまだかわいく思えるほど大変な作業です。なぜなら、通常のWebサイトの制作とは異なり、表示確認をするメールクライアントやWebメール、アプリの種類がブラウザーに比べてはるかに多く(20種類以上!)、どれも言うことの聞かない困ったちゃんです。対応させるメーラーを絞り、完璧を目指さないことがコツですかね…。表示確認するには実機で行うのが一番いいのですが、さすがに種類が多すぎて大変なので、HTMLメールの表示確認ツールを使ってみましょう。

Email on Acid

email-on-acid
Email on Acidでは約70種類のメールクライアント・Webメールでの表示確認が可能。インターネットマーケティングの会社で働いていた頃は常にこのサイトを利用していました。表示サンプルはこんな感じ。月額$45〜、一週間の無料トライアル期間有り。

Litmus

litmus
Litmusでは約30のメールクライアントでテスト可能。こちらはHTMLタグをコピペして無料で使えるプレビューツールがあります。環境にもよると思いますが、上記Email on Acidより表示に時間がかかる気がします。月額$79〜、一週間の無料トライアル期間有り。

HTMLメールデザインギャラリー

最後にHTMLメールを制作する時に参考になりそうな、素敵デザインを集めたサイトを紹介します。

MailChimpのHTMLメールデザインギャラリー

gallery-mailchimp

Campaign MonitorのHTMLメールデザインギャラリー

gallery-cm

Email-Gallery

HTML Email Gallery


HTMLメールはテキスト形式のものに比べて、表現力が格段にアップします。その分ユーザーへの訴求力もあがるかもしれませんが、同時に使いやすさや読みやすさを含む設計そのものをきちんと理解して制作しないと、逆効果となりかねません。HTMLメールもマーケティングのひとつとしてうまく向き合い、使いこなしていきましょう!

シェアする

コメント

  • できコツ

    こんにちは。

    参考サイトや補助ツールの豊富さ、向き不向き等がわかりやすくまとめられていて、とても勉強になります。

    私も以前HTMLメールの事を書いた事があり、自分なりに色々調べたつもりだったのですが、まだまだだなあと感じました。

    HTMLメールの作り方と記事のまとめ方の両方の事を学べる、個人的には一粒で二度おいしいエントリーでした。

    ありがとうございました。

  • こんにちは。有益な情報ありがとうございます。

    最近HTMLメールと格闘しているのでたいへん参考になりました。

    反論というわけではないのですが、「4. レスポンシブデザイン」のところ、このアプローチでは多くのPCメーラーでもモバイル版のレイアウトで表示されてしまいます。

    CSSサポートが弱くメディアクエリにも対応していないPC版メールクライアントのための設定をしたあと、メディアクエリに対応したIOS/Android標準メーラーのためにモバイルサイズの設定をするというアプローチが、現状のレスポンシブなHTMLメールの組み方としてはベターだと思います。

    以下にまとめてみましたので、参考にしていただければうれしいです。

    ■レスポンシブHTMLメールのコーディングは、モバイルファーストじゃないほうが現実的 | かたログ
    http://ashinoyoshi.tumblr.com/post/92685232771/responsiveemail

    ぜひまた、HTMLメールに関する情報をお願いします。

  • 素敵なエントリーをありがとうございます!今回は「モバイルでメールを閲覧する人が多い」という調査結果に応じる形でモバイルファーストを推奨いたしました。もちろんPCで確認するユーザーの割合が多い場合はデスクトップファーストでアプローチする方が効果的だと思います。自社ユーザーの閲覧デバイスをしっかり調査して対応させるのがベストですね!

  • ごん丸

    初めてのコメントです。
    明日、仕事でHTMLメールを作成することになり、manaさんのブログ記事を参考にさせて頂きます。

    HTMLメールの無料作成ツールから必須のタグまで細かく紹介して頂きまして大変に役に立ちます。
    ありがとうございます。

  • Rune Faraci

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)