イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

HTMLメールを送るときにはメーラの対応状況が気になる

おはようございます!
最高の気候のなか、みなさまいかがお過ごしでしょうか?
矢ヶ崎です。

改めてHTMLについて考えてみる

突然ですが、昨今はHTMLでのメール作成がデフォルトになってる場面が多くなってきている気がしています。
プレーンテキストで書くよりも、いろいろな表現ができて、とても良いですよね。そう思います!
まるでWebSiteのようなメールが届くことも少なくなくなってきており、特に海外のツールのアップセルを促すメールはHTMLでのパターン化が進んでいる所感です。

しかし!
メーラによって見え方がかなり違ったりしますね。
私は、Gmail(Web)をメインに、他にはGmailアプリ(Android/iOS)、iPhoneのメール、Outlook(Web)、Thunderbird(MacおよびWindowsクライアント)を利用しているのですが、同じメールでも見え方が結構違います。

そこで、改めてメーラのHTML/CSSなどの対応状況を調べてみました。

王道(?)のこのサイトで調べる

CSS Support Guide for Email Clients | Campaign Monitor https://www.campaignmonitor.com/css/

こちら、すばらしいですね!

いろいろなメーラでのCSSの対応状況がわかります。

HTMLタグや、CSSからメーラの対応状況を調べることもできますし、
逆に、特定メーラからHTMLタグやCSSの対応状況を調べることもできます。

他の情報も補足しておく

HTMLメールの対応状況を検索すると、やはりOutlookでの注意点が多く出てきます。

調べた情報を一部記載しておくと、

mso-line-height-rule: exactly;
を書くと、メイリオフォントでline-heightがpxで指定すると効くようになる

画像にwidth="size" height="size"を指定しないと、オリジナルサイズで表示されてしまう

<P>タグのパディングが効かない

などがありますので、これらを踏まえておきます。

特に、本気でOutlookの各バージョンに対応させようとする場合は、

<!--[if gte mso 9]>
    <style type="text/css">
      Office Ver.9(Outlook 2000)以上に適用させたいCSSを書く
    </style>
<![endif]-->

というようにすれば、対象のメーラに対応するCSSを書くことも可能ですが、めちゃめちゃ大変ですね。。。

メールを作成してみる

順番としては、

  • ターゲットとするメーラをある程度決める(例:今回はPC向けでGmailとOutlook(Web)とOutlook2007以降とThunderbirdにしよう など)

  • 上記の方法などで、ざっと各メーラの対応状況を見て気をつけるところを覚えておく

  • ざっと全体を作成する

  • 使っているCSSなどが対応しているかを再度確認しておく

  • 完成まで作る

  • 可能であれば、テスト配信して各メーラでの表示を実際の表示を確認する

とここまでやれば、とりあえず安心かと思います。

ツールを使って確認するのもあり

やはり、いろいろなメーラに対応させるHTMLを作成するのはかなり大変です。

特に、最後の各メーラでの確認はなかなか大変で、しかも対応させるメーラの種類を増やすとさらに大変になります。

そこで、特定のメールアドレスに送ると各メーラでの見た目がどのように見えるのかを確認できるという、お手軽なクラウドサービスがありますので、こちらを利用するのも有効かもしれません。

たとえば、

など、このようなサービスがありますので、たくさんメールを作成する方は使ってみると良いかもしれません。

何れにせよ大変です

また、メーラの種類が増えたりシェアが変わってきたときには、さらに作り方を変えたり考えたりしないといけないので、大変さは増すばかりです。。。

エンジニアとしても、これらをキャッチアップし続けるのもしんどいですが、メールの文化が他のコミュニケーションツールに変わっていくまでは、がんばって付き合っていきたいと思います。

こちらからは以上です。