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タグで書いたスタイルをインラインに書きなおして出力してくれる便利なツールがあるのです。
似たようなツールもあるので、探してみてください。
ソースをコピペするものと、サーバーにアップロードした後の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のシェアです。
ついでに、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%指定では画像の伸縮で縦横比が上手く保てないケースもあるので、個人的にはカラム幅固定で美しく見えることを優先したいです。
注意が必要ですが、シェアが高い上に2014年からAndroidではGmailが標準のメールアプリとなっているので対応は必須といえます。
前述のようにカラム幅固定であれば、下のような記述でGmail以外のheadタグ認識可メールアプリに対応できるかと思います（注：未検証。理屈上のはなしです…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <head> <style> /** *もしくはlinkタグで。 *ここが読めたらカラム幅が変わる */ #main{ width: 100%!important; } </style> </head> <body> <table id=“main” style=“width: 320px”> @@@@@ </table> </body> </html> |
でも、Android AppのGmailだとheadタグが使えるらしいんですよね。なので更にメディアクエリの記述などを検討しなくてはいけないのですが、参考程度に…
HTMLメール仕様の結論
わりとメールアプリ単位で考えがちですがこうしてOSと連動して、さらにウェブサイトと照らし合わせることで、切り捨てアプリの選定がスムーズになり、結果的にPDCAが上手くまわることに繋がると思います。
アプリも常にリリースやアップデートを重ねており、すべてのメールアプリをサポートするのは不可能に近いので、こういった切り捨ての考えが重要になってきますね。
HTMLメールテンプレートも秀逸なものがたくさん配布されているので、今回の記事の内容が当てはまるとは言い切れませんが、案件の際にはぜひご参考いただければと！
ちなみに検証は、目安として
こちらを使うと便利です！
でわ！
