HTMLメルマガを送信する際に、スマホでどう見えるかは重要なポイントになります。
今回はスマホも考慮に入れたHTMLメルマガを作成する際に気をつけたいポイントを
数字でまとめてみたいと思います。

HTMLメルマガの横幅は600px＋背景色

HTMLメルマガの横幅の選択肢は現時点では
600pxか850pxの選択肢があります。

600pxのメリット

スマホでの閲覧時にもまだ見れるサイズ感

600pxのデメリット

PCで見た際にインパクトに欠ける
→補助策として背景色を付けることで多少カバーできる

↓スマホで見ると背景色部分は表示されないので見やすい

→背景色の代わりに背景画像もGMailや多くのメーラーで使えるが、アウトルックでは非表示になるので注意。その場合は、背景画像＋背景色などの２重対策もありえる。

850pxのメリット

PCで見たときにインパクトがある
ランディングページなどのクリエイティブを引用しやすい

850pxのデメリット

600pxに比べて、スマホで見た際に相対的に小さくなるので
文字が読みにくくなる

HTMLメールの文字サイズは600px幅なら、15pt以上

横幅600pxのHTMLメルマガをスマホで開いた際に、
ユーザーが拡大せずに読めるサイズは15pt以上です。
なので、メルマガでまず伝えたい要素は
画像化もしくはフォントサイズを大きめにして、15pt以上に指定。
特に割引率や開催期間など目立たせたい要素は24pt以上に指定します。
（横幅600pxで、フォントサイズを15ptにした場合、１行辺りは最大45文字程度になります。
メルマガをライティングする際には、１行辺りの文字数も意識すると良いかと思います）
↓15pt以下は潰れて読めない＝わざわざ拡大して読むユーザーは稀

リンクエリアは、50px四方以上

スマホの画面でタップできるリンクエリア幅は、縦横50px以上で、各リンクエリア間に20pxの隙間が必要です。
↓望ましいボタン

これでもスマホで見るとこのくらいのサイズ感になる！

まとめ

横幅→600px
重要な文章→15pt以上45文字以内
押させたいリンク→50px四方以上、押し間違えないマージン
上記の数字を守れば、スマホでも読みやすいHTMLメルマガになりそうです。

• 
• 
•