1. まとめトップ

レスポンシブ対応のメルマガの作り方〈Web制作者向け〉

需要が増えている、スマホ対応のメールマガジン。レスポンシブHTMLメールの制作時に役立つ情報をまとめました。

更新日: 2014年10月17日

24 お気に入り 37521 view
お気に入り追加

この記事は私がまとめました

archinさん

43%のEメールがモバイルで。スマホ対応が重要になってきた

メール・ニュースレターテンプレートのサービスを行っているEmail Monksの調査によると、2013年現在、43%のemailがモバイル経由で読まれており、年末には50%を超えるだろうという予想がなされている。

上記の調査は日本で行われたものではないため、国内の数字がどうなのか興味深いが、昨今のスマートフォン普及率を考えるとメールをスマートデバイスで受け取るユーザは多い事が想像できる。

レスポンシブHTMLメールのデザインのポイント

”モバイルファースト”:一般的にモバイルを先に考えPC向けに展開することは、PC向けのデザインをモバイル向けに編集し直すより簡単

”読みやすいフォント(サイズ)”:iPhoneの最小フォントサイズである13pixel以上に。

テキストは画像にせず、できるだけデバイスフォントにするのも重要

“画像サイズの最適化”:Webの場合でもページのロード時間は重要事項だが、3G回線接続時のことを考えるとモバイルデバイスの場合は更に重要。

”タップする対象を大きく”:リンクやボタンはApple社のガイドラインで推奨されている44 x 44 pixel以上にする。

HTMLメールのコーディングの基礎

現状では昔ながらのテーブルレイアウトを軸に作成していくのが一番安全といえます。Webサイト制作時のクロスブラウザ対応でも、テーブルレイアウトであれば、ずれることは少ないですよね。

またメーラーの種類が豊富なことから、CSSでなくてもできる指定(例えば、<table>のbackground属性など)があれば、そちらを率先して使っていくことが、想定外のレイアウトになることを防ぐ近道です。

head部分のスタイル指定を無視するメーラーがあるので、CSSはインラインで指定する。

例えば、Gmailは<head>要素内に書かれたCSSを認識しません。

HTMLメール用にインラインCSSを生成してくれるサービス

外部CSSを使ったソースを入力すると…

インラインCSSに変換される。

▼「HTML email inline styler」の紹介記事

HTMLメールをレスポンシブにするには

PC向けのHTMLメールにCSS3のMedia Queriesの指定を追加して、PCで表示した場合はPC向けのレイアウトを表示し、スマートフォンで表示した場合はスマートフォン向けのレイアウトを表示する

今のところiPhoneの標準メーラーやAndroidの標準メーラーであればMedia Queriesが使える

AndroidのGmailアプリが非対応

Media Queriesに対応しているスマートフォンのOS、アプリ

iOS Mail app
Android 4.x Email (OEM) app
Windows Phone 7.5
BlackBerry OS7
BlackBerry Z10

Media Queriesに非対応のスマートフォンのOS、アプリ

iPhone Gmail app
iPhone Mailbox app
iPhone Yahoo! Mail app
Android Gmail app
Android Yahoo! Mail app
BlackBerry OS5
Windows Mobile 6.1
Windows Phone 7
Windows Phone 8

メディアクエリ非対応のGmailアプリなどの場合、どうするか

Gmailのモバイルアプリはメディアクエリに対応していないため、PC向けの2段組のレイアウトが縮小されて表示されることになってしまうのです。

1 2