[HTML & CSS General] HTML Mail 制作に役立ちそうなまとめ (2017)

公開日: 2017/10/12
更新日: 2018/09/30

2017 年に見つけた情報を追記していくエントリー。

[markdown]
ひさびさにチェックしました。
過去のエントリーはこちら。

> * [[HTML & CSS] HTML Mail 制作に役立ちそうなまとめ (2014) | deadwood](https://www.d-wood.com/blog/2014/04/24_6077.html)
> * [[HTML & CSS] HTML Mail 制作に役立ちそうなまとめ (2013) | deadwood](https://www.d-wood.com/blog/2013/12/31_5201.html)

## Book

なんと書籍が刊行されていました。
仕事が発生したら買う。

レスポンシブEメールデザイン　マルチデバイス時代の魅せるメルマガの作り方 (Web Professional Books)

posted with amazlet at 17.10.12

KADOKAWA / アスキー・メディアワークス (2015-01-16)
売り上げランキング: 119,357

Amazon.co.jpで詳細を見る

> 本書は、HTMLメールを使ってマーケティング・プロモーション活動をしたいと考えている人、また制作者を対象としたもので、最近のユーザーの閲覧環境の変化に対応するためのHTMLメールの考え方や実装方法、効果測定方法などを徹底的に解説しています。
>
> [ひと昔前とは違う！マーケティングメールの考え方、作り方が基礎からしっかり分かるオススメの書 -ロールケーキ本 | コリス](http://coliss.com/articles/book-review/isbn10-4048692275.html)

## Workflow

Grunt プラグインを利用したワークフロー [leemunroe/grunt-email-workflow](https://github.com/leemunroe/grunt-email-workflow) が紹介されていました。
メールの送信・表示テストもできるようです。

> HTMLメールの制作を手助けしてくれる3つのGruntプラグインを紹介しました。ひとつはCSSをインライン化してくれる grunt-premailer。次に、表示確認につかえる、grunt-mailgun と grunt-litmus です。そして、HTMLメールのワークフロータスクをひとまとめにした Grunt Email Design Workflow もとりあげました。
>
> [HTMLメールワークフローに役立つGruntプラグイン | チャットワーククリエーターズブログ](http://c-note.chatwork.com/post/121799922440/html%E3%83%A1%E3%83%BC%E3%83%AB%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%95%E3%83%AD%E3%83%BC%E3%81%AB%E5%BD%B9%E7%AB%8B%E3%81%A4grunt%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3)

## Template

> * [Responsive Email Templates | Playground from ZURB](https://zurb.com/playground/responsive-email-templates)
> * [Antwort – Responsive Layouts for Email](http://internations.github.io/antwort/)

これシンプルで良さそう。

> * [dudeonthehorse/normalize.email.css: Email-ready CSS Reset](https://github.com/dudeonthehorse/normalize.email.css)
> normalize.email.cssの特徴ほとんどの電子メールクライアントに有用なデフォルトのスタイルを提供。ネイティブプラットフォームのフォントスタイルを作成。 HTMLメールの一般的なバグに対応。コメントを使用したスタイルの説明。
>
> [HTMLメール用のCSSリセットとテンプレート、主要なメールクライアントのバグにも対応 -normalize.email.css | コリス](http://coliss.com/articles/build-websites/operation/css/css-reset-for-html-mail.html)

## Generator

[MJML](https://github.com/mjmlio/mjml) というマークアップ言語で書くとか。

> Topol.ioはHTMLメールのフレームワーク「MJML」をベースに作成されており、さまざまなメールクライアントで見栄えがよいHTMLメールを簡単に作成できます。
>
> [レスポンシブ対応のHTMLメールをドラッグ＆ドロップで驚くほど簡単に作成できる無料ツール -Topol.io | コリス](http://coliss.com/articles/build-websites/operation/easy-beautiful-html-mail-editor.html)

* [Topol.io – beautiful e-mail editor and builder](https://topol.io/)
* [MJML – The Responsive Email Framework](https://mjml.io/)
[/markdown]