とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

HTMLメルマガ作成はこれだけ見ておけばOK!参考になる記事まとめ

HTMLメルマガ作成はこれだけ見ておけばOK!参考になる記事まとめ

先日HTMLメルマガを実装する機会が

あったので、作成の参考にした良記事を

まとめておきたいと思います。

 

検索するといろいろなメルマガテンプレートが

ありますが、各種メールソフトで確認すると、

実用に耐えうるレベルじゃないものが多いなという

印象をうけました。

 

少なくとも今回僕が対応した案件ではうまく

いかないものが多かったので結局、以下の

ページを参考にいちから自分で製作して

検証までしました。

 

古い記事が多いですが、

メールソフト自体あまり進化しておらず、

いまだに古い table タグでの実装方法が確実、

というところでした。

閲覧環境はメールソフトになるので

JavaScriptは使用できませんし、CSSも基本は、

HTMLタグにstyle属性を指定するインラインで

書く方法が推奨されます。

 

HTMLメルマガのデザインにもよりますが、

以下の記事をみて、うまい具合に

ハイブリットにして製作しました。

本当に参考になります。

 

blog.kannart.co.jp

www.granfairs.com

www.granfairs.com

上記のページで紹介されている方法は、

どれもレスポンシブwebデザインのHTMLメルマガ

ではありません。

 

1ソースでスマホにも適用可能です。

スマホのメールアプリで閲覧しても

耐えうる幅やサイズ感になっています。

 

実際、ZOZOTOWNのメルマガや、

無印良品のメルマガなんかもHTMLで

レスポンシブではなく1ソースです。

レスポンシブでないHTMLメルマガは

多いです。

一般ユーザはスマホで見ても違和感がないし、

気づかないと思いますね。

 

コツは、フォントサイズ。

フォントサイズを大きめに設定すれば、

スマホでみても違和感がありません。

 

これからHTMLメルマガ作成の機会があれば

ぜひ上記のサイトを参考にしてみてください。

 

それとZOZOTOWNのメルマガは

よくできています。

参考になるので製作者は要チェックです!