n2p blog

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

最近のHTMLメール横幅は600px台前半!HTMLメール事情2017 調査編

久しぶりにHTMLメールを作成しました。以前記事を書いた時から状況が変わっており、改めて最新情報をリサーチしてみました!

実装編はこちらから

最近のHTMLメール横幅

HTMLメールのメインエリアの横幅を調べてみました。

600px未満

paidy 460px
X(Twitter) 500px
chatwork 580px

600px台

Adobe 600px
STORES 600px
nuzzel 600px
note 600px
codepen 620px
cakes 640px
giftee 640px
plesk 640px
MFクラウド給与 640px
ユニクロ 640px
CAMPFIRE 642px
ホットペッパービューティー 660px
ぐるなび 700px
plesk japan team 700px
apple 740px

700px以上・リキッド

ZOZO 一部リキッド・メイン700px
Facebook リキッド
Peatix リキッド
ぐるなびお取り寄せニュース リキッド

600px台前半にボリュームがある感じです。
最近のものは700px台のものもあるようですね。
完全リキッド・一部リキッドのものも、読みやすいです。

最近のHTMLメール デバイステキストサイズの傾向

本文フォントサイズを、デスクトップのgmailで計測してみた結果がこちらです。

本文13px note(おすすめノートのお知らせ)
CAMPFIRE
本文14px cakes
Paidy
chatwork
Adobe
nuzzel
giftee
MFクラウド給与
Peatix
本文15px ぐるなび
plesk japan
本文16px codepen
plesk
facebook
画像テキスト中心 STORES
ユニクロ
ホットペッパービューティー
apple
その他 note(購読の配信) 20px
ZOZOTOWN 最大52px 商品名 20px 注釈16pxなど
X(Twitter) 28px、18pxなど

デバイス間でのデザインのぶれが許容されにくい媒体ほど、画像中心での配信が目立つように思います。
これはWEBページでも全く同じ傾向ですね。
デスクトップでは適切な文字サイズなのにもかかわらず、スマートフォンでは極小の文字になってしまう場合があります。
この理由は、実装編で考察してみたいと思います。
ZOZOTOWNとX(Twitter)のメールは、デスクトップのgmailでは文字サイズが大きめですが、スマートフォンでは読みやすい文字サイズで配信されています。スマートフォンファーストの設計になっているようです。

次回、実装編に続きます!