メールのテンプレートを開発する中で見つけた問題と解決方法
- 2018年1月30日
- by SendGrid
- Category: ベストプラクティス 技術ネタ
この記事は Email Development Tips & Tricks の抄訳です。
HTMLやCSSを利用したメールの開発は非常に大変です。長い間、SendGridで数多くのメールテンプレート作成を経験してきた今でも、その複雑さに驚かされます。
メールの開発を複雑にする要因の1つに、メールが色々な種類のメールクライアントやブラウザで読まれることが挙げられます。各クライアントやブラウザは、開発者が使うモダンなHTMLやCSSの機能を幅広くサポートするため、より複雑さが増します。
本日のブログでは、SendGridのユーザ向けにメールテンプレートを作成した中で見つけた課題とその解決方法について、いくつかご紹介します。
OutlookでBulletproofボタンの表示が崩れる
メール開発者はよくBulletproofボタンを使います。
メールテンプレートでボタンを配置する際の標準的な方法で、テーブルレイアウトを使ってレスポンシブに動きます。コードをコピー＆ペーストするだけで、利用先のデザインに合わせた自動調整が期待できますが、Outlookでテストした際に問題がありました。
次のHTMLのように、hrefでアンカーリンクを指定する際、ハッシュ記号をプレースホルダに設定したところ、ボタンがうまく表示されなかったのです。
<a href="#">Button</a>
Outlookでは正しいURLが指定されていない場合、アンカーを削除し、ボタン表示が崩れるようです。試しにアンカーのhrefに http://sendgrid.com を指定すると、ボタンは綺麗に表示されました。小さな問題かもしれませんが、テンプレート作成時やテストの際に意識しておくと良い問題です。
Apple Mailの自動リンクにより意図した表示と異なってしまう
iPhoneユーザは知っていると思いますが、iOSはメール内の電話番号や住所を自動的にリンク表示します。電話をかけたり、住所の地図を開いたり、操作が簡単になるので非常に便利です。その一方で、メールテンプレートを作る立場からすると、背景色を青でデザインしたとき、青色のリンク表示だと文字が見えにくくなるため不便です。これを回避する方法としてBring Dialogが考えた解決策を紹介します。
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
下図はこの解決策の適用前後を比較したiPhone画面です。電話番号など自動的に青色のリンク表示となっていたものが、通常の文字表示に変わります。（ただし、リンク機能自体は残ります）
一般的なフォントでは見栄えが良くない
今の時代、メールテンプレートで使うフォントは、どのパソコンにも入っているような標準的なフォントを選ぶのではなく、もっと見た目の良いフォントを選ぶべきです。HelveticaやArialが嫌いなわけではないのですが、標準的なフォントは会社のブランドやカラーに合わないことがあります。そこで様々なクライアントでサポートされている（残念ながらOutlookは除きますが）Google Fontsを活用しましょう。
Google Fontsでは、利用するフォントへ次のようなURLでアクセスします。ユーザはWOFF形式などの具体的なフォントの形式を指定する必要はありません。しかし、このアクセスには仕掛けがあって、実際には裏でWOFF形式のファイルを取得するURLが使われています。
https://fonts.googleapis.com/css?family=Source+Sans+Pro
上記のURLをGoogle Chromeで開くと次のように@font-faceの宣言が確認でき、GoogleからはWOFF形式よりも新しいWOFF2形式の情報が返ってきています。
/* cyrillic-ext */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/ODelI1aHBYDBqgeIAH2zlAC5S7WFEeHRqL6ObGQGT8o.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/ODelI1aHBYDBqgeIAH2zlMgmx_L9kV4w6g8dYQOLFUI.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
以下省略
つまり、GoogleはユーザがWOFF2形式をサポートしたモダンなブラウザを使っていることを期待しているのです。
しかし、上記結果はメールを開発する上では不便です。メールの開発で必要なのはモダンなクライアントが対応するWOFF2形式ではなく、最も幅広いクライアントが対応するWOFF形式です。メールでWOFF形式を利用した@font-faceの宣言方法を知るには、Internet Explorer 11や、BrowserStack、仮想マシンなどを使って、WOFF2形式に対応していない古いブラウザで開く必要があります。こうして取得した@font-facesの宣言をメールのHTMLに<style>タグで埋め込むことで、幅広いクライアントをサポートしたWOFF形式でGoogle Fontsを利用できます。
Android 4.4でメールがセンタリングされない
メールテンプレートが仕上がってすべてのクライアントでテストを完了しても、残念ながらAndroid 4.4だけはメールのセンタリングがうまくいかないでしょう。Android 4.4ではコンテンツのセンタリングを崩す要素を自動的に追加するためです。これは以下の定義で対応できます。
body {
margin: 0 !important;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
font-size: 100% !important;
}
デバイスの最小フォントサイズに影響を受ける
デバイスによっては文字の読みやすさを保つために、最小のフォントサイズを規定しています。しかし、メールテンプレートのデザインをする上で邪魔になることもあります。最小フォントサイズに影響を受けて、レイアウトが意図せず崩れる、表示がうまくいかない、といったことが起きます。ありがたいことに、iOSやWindows Mobileではテンプレートの<head>タグのスタイルで設定値を上書きできます。
body,
table,
td,
a {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
さいごに
メールクライアントやブラウザに関連する問題は他にもたくさんありますが、今回紹介した問題と解決策が少しでも皆さんのメール開発に役立てば幸いです。開発でコードを書くときは、少し変更したらすぐに動作確認するようにしましょう。変更したコード量が多いと、上手く動かなかったときに何が原因だったのか把握するのが難しくなります。
また、ベテランのメール開発者の知識やベストプラクティスを活かしましょう。あなたが直面している問題は既に他の誰かが経験して、解決策や回避策を見つけているかもしれません。
さいごに、メールの開発やデザインのベストプラクティスについてもっと知りたい方は、スタイルガイドやデザインのベストプラクティスに関するブログも是非確認してください。
