久しぶりに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では文字サイズが大きめですが、スマートフォンでは読みやすい文字サイズで配信されています。スマートフォンファーストの設計になっているようです。

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

• 
• 
•