HTMLメールを作成するときに役に立つかもしれない「切り捨て」の話


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は関係なく、メールアプリのシェア率です。

順位 メーラー シェア率
1 Gmail(Google Apps含む 33.61%
2 Microsoft Outlook 30.31%
3 Thunderbird 13.51%
4 Windows Live メール 10.62%
5 Outlook Express 8.65%

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

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

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

OS 使用できるメールソフト
XP Outlook Express Microsoft Office Outlook Windows Live Mail(別途インストール)
Vista Windows メール
(outlook expressの後継)
Microsoft Office Outlook Windows Live Mail 2011(別途インストール)
Windows 7 Microsoft Office Outlook Windows Live Mail (別途インストール)
Windows 8 Microsoft Office Outlook Windows 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 XP 2001 ~ Office 2003 IE6 ~ 8 XP , Office2003 : サポート終了
windows VISTA 2007 Office 2003 / 2007 IE7 ~ 9 Office2003サポート終了

Office2007 2017.10.10サポート終了

window 7 2009 Office 2007 IE8 ~ 11 Office2007 : 2017.10.10サポート終了
windows 8 / 8.1 2012 Office 2007 / 2010 / 2013 IE10 / IE11 Office2007 : 2017.10.10サポート終了

Office 2010 : 2020.10.13サポート終了

windows 10 2015 Office 2010 / 2013 IE11 , 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

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

でわ!

シェアする

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

フォローする