ImageHTMLメールのメールマガジンのコーディング【スマートフォン最適化篇】HTMLメールのメールマガジン、スマートフォンでも、もっと見やすくする方法をまとめました!前回までは、PCで見るためのHTMLメールの作り方をお伝えしました。画面の領域から文字や画像がはみ出し、スクロールバーが表示されてしまい非常に読みにくい。viewportを設定しても無効になってしまいます。そんな難題に答えてみた本日のサンプルはこちらです。デザイン上の注意デザインは横幅300px程度のスマートフォンの画面で見ることを前提に、横幅600pxで作る。横幅600px以上は背景色が見えるようにします。600px未満では縮められるようにする想定です。横幅に応じて一カラムと二カラムを切り替えるのは難しいです。ニカラム以上のレイアウトは、極力避けたほうがいいでしょう。リンクはタップしやすいよう、大きめのブロックでリンクは横幅全体をブロック状に使うと、リンク先を見てもらいやすくなるようです。押させたいリンクは、最低でも、50px四方以上で、押し間違えないようマージンをとってあげます。横幅600px以上は背景色が見え、600px未満では縮められるようにする想定で組みます。テーブルと、横幅の指定を工夫してviewport指定が無効な環境でも異なる横幅に対応します。具体的には、このような指定をしました。インラインで指定します。style=”max-width:600px;”を指定tdの横幅も%で指定。合計は必ず100%以内に収めるよう気をつける。今回は実行しませんでしたが、サムネイルが入るtdだけ150pxで固定、テキスト部分の幅は指定せず、自動で整形されるに任せてもいいかもしれませんね。全てのimgに横幅を指定。width=”100%”など。原則的に、親となるtdに対して横幅を指定し、中身のimgは横幅100%というパターンで組んでいました。補足:崩れて見えるPCメーラーもあります以上の方法では、Outlookには対応できません。横幅600px以上で見た場合、ちょっと美しくない崩れ方をします。完全に読めないわけでもないのと、他の主なメーラーは対応しているため、今回はよしとしています。AndroidよりもOutlookの対応を優先したい場合は、前回までの方法で組んで下さいね。SNSキャンペーン方法論と実践」を開催しました。