Webデザイナーを苦しめる 非常に面倒なHTMLメール

HTMLメールは面倒です。

ださいデザイン、つまらないコーディング・・・後述するつもりですが、コーディングは本当に面倒で面倒で。ブラウザよりも多い規制、なんだかよくわからないメールアプリのHTML/CSS仕様。
認識しないHTMLタグ、CSSの書き方ルールなど、手をわずらわせること請け合いです。

今回は、そんなときに役に立ちそうな「切り捨て」の考え。

HTMLメールとは

そもそもテキストで配信すればいいんじゃね?というのが正直なところですが、BtoCとかだとやっぱりそうもいかないんですね。

一日のうちにやりとりされる膨大な量のメールの中で、自社商品が素敵に見えるようなアプローチをしなくてはならないのです。そんな責任が僕らにはあります。

実際、「あなたが読みやすいメールマガジンの形式は何ですか?」という調査で

閲覧環境読みやすいと感じたメールの形式
カラーの文字や写真入り等
(HTMLメール)
字や記号のみ
(テキスト)
どちらとも言えない
PCで44%27%29%
スマホで68%11%21%
ガラケ28%40%32%

このように、HTMLメールはマーケティングにおいて有効な手段なのです…

HTMLメール作成の基礎

ここではあまり触れませんが、ざっくりと、「これはマスト!」という考え方。

HTMLメールの「CSS」

  • Outlookでfloatが対応されていないので極力避ける
  • 背景画像が正しく表示されない場合があるので極力避ける
  • CSSはHTMLタグの中に直接(インライン)

CSSをインラインで書いていくのは至難の業ですが、linkタグで書いたスタイルをインラインに書きなおして出力してくれる便利なツールがあるのです。

MailerMailer Labs | Tools

似たようなツールもあるので、探してみてください。
ソースをコピペするものと、サーバーにアップロードした後のURLを入力して変換するものがありますが、個人的には後者がおすすめです。なんたって通常のコーディングと同様に進められるので。

HTMLメールの「HTMLコーディング」

  • メーラーによって認識されないHTMLタグがある
  • なのでtableタグを使う
  • 同じ画像を繰り返し使うと2度目以降は表示されない場合があるので極力避ける
  • 画像は絶対パス指定で書く

画像に関しては「添付」とみなされる場合もあるので、注意が必要です。

サポートブラウザ×OS単位で考える、HTMLメール「切り捨て」の話

ここからが本題です。

ブラウザ対策と同じように、HTMLメールを閲覧するメールアプリにも仕様があります。

たとえば、Gmailは、HTMLメールのheadタグ内を認識しないので、linkタグで書いたCSSは全て無効になるが、Outlookではそれができる…など。使用可能なタグの参考は下記リンク先に。

CSS Support Guide for Email Clients | Campaign Monitor

じゃあどうやって作っていけばいいのか?

工数の削減、これにつきます!

OSのシェアでサポート外のメーラーを絞る

スマートフォンは比較的アプリが新し目だったり高機能なので、問題は、うるさく言われがちなデスクトップですね。
下の図は2016年6月時点での国内のデスクトップOSのシェアです。

2016年6月日本のデスクトップOSシェア

ついでに、OSは関係なく、メールアプリのシェア率です。

順位メーラーシェア率
1Gmail(Google Apps含む33.61%
2Microsoft Outlook30.31%
3Thunderbird13.51%
4Windows Live メール10.62%
5Outlook Express8.65%

メールアプリに何を使っているか、いろんなケースが考えられますが、windowsのシェアが高いため、windows OSで使われるメーラーに的を絞って考えて効率よく進めていくことにします。

Windows OSごとにメーラーを知る、予測する

下に、Windows OSごとに使用できるWindows系のメールソフトを記載します。

OS使用できるメールソフト
XPOutlook ExpressMicrosoft Office OutlookWindows Live Mail(別途インストール)
VistaWindows メール
(outlook expressの後継)
Microsoft Office OutlookWindows Live Mail 2011(別途インストール)
Windows 7Microsoft Office OutlookWindows Live Mail (別途インストール)
Windows 8Microsoft Office OutlookWindows Live Mail
windows10メール(標準搭載アプリ)Microsoft Office Outlook

Microsoft Officeには Outlook 20xx(年別)というメールソフトが入っているので、OfficeがインストールされているPCではそちらを使う可能性も高いのですが、標準でインストールされているメールアプリには「Outlook Express」や「Windows メール」などがあります。さらに前述の「Office Outlook」はバージョンがいくつかあります。

Microsoft Office Outlookを考える

新しいOS、新しいPCでも古いOfficeをインストールすれば古い「Office Outlook」を使えるのですが、その可能性は高いとはいえないでしょう。

なので、Microsoft Office Outlookに関してはOSがリリースされた年前後の「Microsoft Office」のバージョンのものが搭載されていると仮定できます。

なので、HTMLメールからジャンプさせるLPやウェブサイトのターゲットブラウザと照らしあわせ、対象としていないIEの旧バージョンを標準搭載していたWindows OSがリリースされた年前後のMicrosoft Office Outlookは切り捨ててもよい、という考え方ができますね。

OSリリース近い年の
Officeバージョン
サポートIE備考
windows XP2001 ~ Office 2003IE6 ~ 8XP , Office2003 : サポート終了
windows VISTA2007Office 2003 / 2007IE7 ~ 9Office2003サポート終了

Office2007 2017.10.10サポート終了

window 72009Office 2007IE8 ~ 11Office2007 : 2017.10.10サポート終了
windows 8 / 8.12012Office 2007 / 2010 / 2013IE10 / IE11Office2007 : 2017.10.10サポート終了

Office 2010 : 2020.10.13サポート終了

windows 102015Office 2010 / 2013IE11 , Edge Office 2010 : 2020.10.13サポート終了

Windowsメール、Outlook Expressを考える

Outlook Expressのグレードアップ版がWindowsメールであり、それのさらにグレードアップ版がWindows Liveメールとなっております。はっきりしろよ…

なので、XP、Vistaを切り捨てたならOutlook Express、Windowメールでレイアウトが多少崩れたり、タグがサポートされていなくてもOKという考え方ができます。

忘れてはいけない、Gmailを考える

Gmailではheadタグ内の一切が認識されないそうなので、CSSは必ずインラインに記述します。
ゆえに、レスポンシブは非対応ということになり、カラム幅固定もしくは100%指定をせざるを得ません。

ただカラム幅100%指定では画像の伸縮で縦横比が上手く保てないケースもあるので、個人的にはカラム幅固定で美しく見えることを優先したいです。

MailerMailer Labs | Tools

注意が必要ですが、シェアが高い上に2014年からAndroidではGmailが標準のメールアプリとなっているので対応は必須といえます。

前述のようにカラム幅固定であれば、下のような記述でGmail以外のheadタグ認識可メールアプリに対応できるかと思います(注:未検証。理屈上のはなしです…

でも、Android AppのGmailだとheadタグが使えるらしいんですよね。なので更にメディアクエリの記述などを検討しなくてはいけないのですが、参考程度に…

 

HTMLメール仕様の結論

わりとメールアプリ単位で考えがちですがこうしてOSと連動して、さらにウェブサイトと照らし合わせることで、切り捨てアプリの選定がスムーズになり、結果的にPDCAが上手くまわることに繋がると思います。

アプリも常にリリースやアップデートを重ねており、すべてのメールアプリをサポートするのは不可能に近いので、こういった切り捨ての考えが重要になってきますね。

HTMLメールテンプレートも秀逸なものがたくさん配布されているので、今回の記事の内容が当てはまるとは言い切れませんが、案件の際にはぜひご参考いただければと!

ちなみに検証は、目安として

Litmus

こちらを使うと便利です!

 

でわ!

投稿者 satohmsys