n2p blog

キャンペーンやSNSの
"ためになる"情報を
執筆しています。

HTMLメールのメールマガジンのコーディング【スマートフォン最適化篇】

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以上で見た場合、ちょっと美しくない崩れ方をします。
outlooksumple
ですが完全に読めないわけでもないのと、他の主なメーラーは対応しているため、今回はよしとしています。
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/

この記事を書いた人

nonameproduce(n2p)

nonameproduce(n2p)公式アカウントです。Web、SNSを軸にしたデジタルプロモーションの制作会社です。17年間、500以上のデジタルプロモーションを手がけた知見を活かし、デジタルとクリエイティブで「伝わる」を作ることで、ユーザーに価値ある情報と体験を提供します。

  • Aha! レシートキャンペーン
  • BirdCallカスタムストーリークイズ診断
  • BirdCallカスタムストーリー