Gmail がレスポンシブHTMLメールに対応！で、どうなる？

去る2016年9月、全世界のメールデザイナーが待ち望んだアップデートが発表されました。
そうです、Gmail がついにレスポンシブメールに対応したんです！

みんな半ばあきらめていたのか、ポジティブな驚きを持って迎えられたこのアップデート。
対応時期は2016年9月末とのことだったので、現在ではもう適用済みとなっています。

このアップデートについて、主にメール作成者の立場から要点をまとめます。

今まで何が問題だったか

まず、Gmail の仕様で厄介だったポイントを再確認しましょう。

メディアクエリをサポートしていなかった
それどころか、<style> による CSS 指定をサポートしていなかった

この仕様は、ブラウザ版・アプリ版いずれも同じです。派生版である Inbox でも同様でした。
これらの仕様によって、

Gmail に CSS を効かせるには、わざわざインライン化する必要があった
メディアクエリが使えないので、いわゆるレスポンシブメールに対応できなかった

上記のような問題が生じていたのです。
特に、シェアの高い Gmail 系のブラウザがレスポンシブメール非対応という点が、 HTMLメール作成者にとっての大きな悩みの一つとなっていました。

2016年10月からはこうなる

Gmail でも <style> による CSS 指定が可能に

公式の開発者向けページにも記載のように、<style> ブロックを使った CSS の指定に対応します。
これによって、CSSをインライン化しないという選択肢がグッと現実的になります。
（依然として <style> による指定をサポートしないメールクライアントがあるので、そこは考慮する必要がありますが）
インライン化の手間を削減し、HTMLメールの作成プロセスがシンプルになること以外にも、後述のようにメールの容量削減というメリットも期待できるでしょう。

ちなみに Gmail がサポートする CSS プロパティやメディアクエリの一覧はこちらです。

Gmail でもメディアクエリが使える

とにかくこれが大きいです。
Gmail が対応していないことがレスポンシブメールの大きなネックとなっていましたが、それが解消されたことでレスポンシブメール採用のハードルはかなり下がったと言えます。
このところ、より多くのメールクライアントに対応できるハイブリッドデザインが注目されていましたが、比較的実装が簡単であるレスポンシブメールの巻き返しが見られそうです。

CSSのインライン化をやめると容量削減になる

CSSをインライン化すると、同じパーツであっても要素ごとにスタイルの指定が必要になるため、どうしてもメール本文の容量が肥大化しがちです。
試しに手元のHTMLメールで比較したところ、40KB → 29KBになりました。
もちろんメールの内容にはよりますが、多くのケースで容量を節約できそうです。

Gmail のレスポンシブメール注意点

あと、個人的に試してみて気づいたことを記します。

<body> をCSSセレクタに利用しない

Gmail は <body> を自動的に <div> に置き換えるため、body をセレクタに使ってスタイル指定をしても効きません。今までは <style> での指定に対応していなかったので特に問題になりませんでしたが、これからは要注意です。

属性セレクタは使わない

Yahoo! Mail のメディアクエリのバグ（今はもう解消済み）への対応のため、メディアクエリ内で属性セレクタを使ってスタイルを指定している場合は要注意です。Gmail は未だに属性セレクタをサポートしていないため、そのままだとレスポンシブになりません。属性セレクタを使う理由はもうないので、削除してしまいましょう。

HTMLメールの未来は明るい？

今回の Gmail の対応のほかにも、2016年8月には Litmus と Microsoft が Outlook の改善を目的とした協調を発表するなど、メールコミュニティにとって嬉しいニュースが続いています。
Gmail の Google 含め、こうしたメジャープレイヤーの最近の動向は、HTMLメールの今後を考えると心強いですね。
まだまだメールクライアントによる実装差異に悩まされる日々は続きそうですが、少しだけ光が見えてきたような気がします。

参考ページ

公式アナウンス

Official Gmail Blog: Better emails, tailored to all your devices（一般向け）
Google Apps Developer Blog: Your emails, optimized for every screen with responsive design（開発者向け）

開発者向け資料

https://developers.google.com/gmail/design/css（ガイド）
https://developers.google.com/gmail/design/reference/supported_css（リファレンス）