twitterやfacebook、googleplusにskype、ショッピングでは楽天、amazonなどにメルマガ登録すると、 Webページのようなメルマガが届きます。それをHTMLメールといいます。 フィーチャーフォン時代にもデコメールという名前で、ありました。 スマホのほうが文字きれいになりも画像のサイズも使える幅が広がったので、スマホ向けHTMLメールが増える気がしているこの頃です。 そこで、スマホ向けHTMLメールを作成するときに、日本でもスマホ所有者の半分に当たるiphoneでの 制作時のワンポイント注意点『文字サイズ自動調整』について紹介します。
iphoneに自動搭載されているサイズ調整機能
まずは自動調整について、例えばsafariでwebサイトを見るときに、大きいページだと自動で調整してくれたりするiphoneですが、 これはページ全体だけでなく、メールに届く文字サイズでも調整されています。
font-sizeが15px以下からはすべて15pxで表示されてしまっています。 この現象はwebkit独自で起きているもので、iphone,ipadのデフォルトです。
調整したいユーザー側でできること。
iphoneユーザは
設定→メール→最小フォントサイズ
という項目から変更することができます。 画像は『中』です。 以下はサイズ一覧です。
- 小 ：13px
- 中 ：15px
- 大 ：17px
- 特大: 19px
- 巨大: 21px
『中』がデフォルトなので、最小を15px基準にしていても、 ユーザーが『巨大』を選択していれば、おそらくレイアウトが崩れることもあるでしょう。 注意が必要です。
つづいて、制作側でできること
さすがに最小を21pxにして全部作成するわけにはいかないこともあると思います。 もちろん、対策として、画像で作ってしまうということもできるかもしれません。 しかし、画像を多用すると、メールに来た画像は表示しない人もいるので、 正直、あまり良い方法とはいえません。
なので、webkit専用プロパティで文字サイズ調整を解除する
文字サイズが自動調整できなければ、その調整をなかったことにすればいいのです。 webkitにはそのためのプロパティが用意されています。
body { -webkit-text-size-adjust: none; }
参考: CSS Happy Life Zeroより
これを記述するだけです。※head内に記述しても、gmailはheadに記述されたスタイルは読み込まないので注意してください。
しっかりと、文字サイズが15px以下でも小さくなりました。
最後に
-webkit-text-size-adjustはWebページでも使えるし、ipadにももちろん搭載されているので、 iphoneに限らず、ipadでもサイズについて違和感などあれば、思い出してみてください。 スマホ所有者が日本人口の半分になってスマホに向けたHTMLメールはもっと増える気がしますので、 是非、知っておいて損はないことかと思います。
