HTMLメールを作るのに最適なフレームワークまとめ

HTMLメールは通常のWebサイト向けのHTMLとは多少異なります。また、コンテンツが受信者のところに直接届くので、後から修正するのは困難です。デザインの乱れが起こらない、適切なHTMLを記述しなければなりません。

そこで使いたいのがHTMLメールに特化したフレームワークになります。このフレームワークに合わせて作成することで、安心してメール配信できるでしょう。今回はそんなHTMLメール向けのフレームワークをまとめて紹介します。

MJML

f:id:moongift:20220106182455p:plain

mjmlは専用のHTMLタグを使ってHTMLメールを作成します。作成されたHTMLはレスポンシブデザインに対応しています。ライブエディタが提供されているので、そこで実際に記述して試すことができます。

MJML - The Responsive Email Framework

Foundation for Emails

f:id:moongift:20220106182546p:plain

FoundationはWebサイト向けのデザインフレームワークを提供していますが、それをメールに特化させたのがFoundation for Emails 2になります。WebサイトでFoundationを利用されている場合には、構造も似ているので使いやすそうです。

Foundation for Emails | A Responsive Email Framework from ZURB

Maizzle

f:id:moongift:20220106182557p:plain

MaizzleはベースにTailwind CSSを利用しています。またNode.jsを使って、コンパイルしてHTMLメールを生成します。条件分岐や外部ファイル読み込みなど、高度な操作が利用できるのが特徴です。

Home | Maizzle - Framework for Rapid Email Prototyping

Responsive HTML Email Framework

f:id:moongift:20220106182612p:plain

Responsive HTML Email FrameworkはHTMLのベースになるテンプレートと、用意されているコンポーネントを組み合わせて使えるHTMLメールフレームワークです。シンプルなのでカスタマイズ性が高そうです。

Responsive HTML Email Framework

Bojler

f:id:moongift:20220106182626p:plain

Bojlerはテーブルタグをメインに使ったHTMLメールフレームワークです。クラスの数もあまり多くないので、学習コストは低そうです。

Homepage - Bojler

Inkcite

f:id:moongift:20220106182637p:plain

InkciteはRubyを使ってHTMLメールを生成します。画像をImageOptimによって最適化してくれたり、ライブプレビューがあったりと、便利にHTMLメールを作成できます。

Inkcite

MUI

f:id:moongift:20220106182651p:plain

MUIはマテリアルデザインに特化したHTMLメールフレームワークです。ReactやAngularといったWebフレームワークで利用できる中、サブセットしてHTMLメールにも対応しているようです。

MUI - Material Design HTML Email

Cerberus

f:id:moongift:20220106182704p:plain

CerberusはFluid、レスポンシブ、ハイブリッドの3パターンに対応したHTMLメールテンプレートを提供します。機能的にはグリッドくらいになりますので、カスタマイズできる余地が大きそうです。

Cerberus - Patterns for Responsive HTML Email Templates

Acorn Email Framework

f:id:moongift:20220106182717p:plain

Acornはグリッド、タイポグラフィ、画像など基本的なHTMLメールの構造に加えて、アコーディオンやボタン、ラベルなど高度なコンポーネントも多数用意しています。

Acorn Email Framework | ThemeMountain Documentation

Antwort

f:id:moongift:20220106182727p:plain

レスポンシブなHTMLのレイアウトテンプレートです。1〜3カラムのテンプレートが提供されています。

Antwort - Responsive Layouts for Email

HEML

f:id:moongift:20220106182739p:plain

コンポーネントはブロック、イメージ、ボタン、リンクとあまり多くありませんが、レイアウトと組み合わせることで基本的なHTMLメールであれば素早く作れそうなフレームワークです。

HEML

まとめ

フレームワークを使うことで、HTMLメールの細かな仕様は気にせず作成ができます。あまりカスタマイズしすぎるとデザインの乱れにつながるので、ご注意ください。システムと組み合わせてコンテンツを自動生成するのも良さそうです。