HTMLメールのメールマガジン、スマートフォンでも、もっと見やすくする方法をまとめました！

前回までは、PCで見るためのHTMLメールの作り方をお伝えしました。
しかし、前回までの方法ですと、Androidの一部機種で、
画面の領域から文字や画像がはみ出し、スクロールバーが表示されてしまい非常に読みにくい。
viewportを設定しても無効になってしまいます。
そんな難題に答えてみた本日のサンプルはこちらです。

デザイン上の注意

デザインは横幅300px程度のスマートフォンの画面で見ることを前提に、横幅600pxで作る。

　横幅600px以上は背景色が見えるようにします。
　600px未満では縮められるようにする想定です。

レイアウトは一カラムで

　メディアクエリやjavascriptなどはきかないので、
　横幅に応じて一カラムと二カラムを切り替えるのは難しいです。
　なので、ニカラム以上のレイアウトは、極力避けたほうがいいでしょう。

リンクはタップしやすいよう、大きめのブロックで

　リンクは横幅全体をブロック状に使うと、リンク先を見てもらいやすくなるようです。
　押させたいリンクは、最低でも、50px四方以上で、押し間違えないようマージンをとってあげます。
　

コーディング上の注意

　横幅600px以上は背景色が見え、600px未満では縮められるようにする想定で組みます。
　テーブルと、横幅の指定を工夫してviewport指定が無効な環境でも異なる横幅に対応します。
　具体的には、このような指定をしました。もちろんインラインで指定します。

全てのテーブルに対して、width=”100％”を指定

全てのテーブル内テーブル（背景用テーブルの内側のテーブル）に対して直接　style=”max-width:600px;”を指定

tdの横幅も%で指定。合計は必ず100%以内に収めるよう気をつける。

今回は実行しませんでしたが、サムネイルが入るtdだけ150pxで固定、
テキスト部分の幅は指定せず、自動で整形されるに任せてもいいかもしれませんね。

全てのimgに横幅を指定。直接%で指定する。width=”100%”など。

原則的に、親となるtdに対して横幅を指定し、中身のimgは横幅100%というパターンで組んでいました。

補足：崩れて見えるPCメーラーもあります

以上の方法では、Outlookには対応できません。
Outlookはmax-widthに対応していないため、
横幅600px以上で見た場合、ちょっと美しくない崩れ方をします。

ですが完全に読めないわけでもないのと、他の主なメーラーは対応しているため、今回はよしとしています。
AndroidよりもOutlookの対応を優先したい場合は、前回までの方法で組んで下さいね。

N2P　HTMLメール記事まとめ

HTMLメールのメールマガジンのコーディング【下調べ篇】
https://n2p.co.jp/blog/tech/htmlmailmagazine01/
無料で2000通まで送れるオススメHTMLメールマガジン配信サービスMailChimp
https://n2p.co.jp/blog/planning/mailchimp/
スマホで読ませる! HTMLメルマガで覚えておきたい横幅と文字サイズ
https://n2p.co.jp/blog/planning/numberforhtmlmail/
HTMLメールのメールマガジンのコーディング【コーディング準備篇】
https://n2p.co.jp/blog/tech/htmlmailmagazine02/
HTMLメールのメールマガジンのコーディング【実際に組んでみた篇】
https://n2p.co.jp/blog/tech/htmlmailmagazine03/

• 
• 
•