HTMLメールを作るのに特化したエディタまとめ

HTMLメールを作る際にはテンプレートをダウンロードして、エディタで修正するのではないでしょうか。HTMLエディタを使うこともできますが、HTMLメール特有の書き方に対応していない場合もあるので、結局HTMLタグを手打ちすることになります。

こうした面倒から解放されそうなのがHTMLメール専用のエディタです。プレビューがあったり、コンポーネントをドラッグ&ドロップできるなど、HTMLメールの作成が手軽になりそうです。

Slinky

f:id:moongift:20220107114236p:plain

SlinkyはFoundation for Emails 2を手軽に使えるためのアプローチになります。npmやgulpを使うことなく、CodePenを使ってオンライン上でHTMLメールを作成できます。

Slinky | Playground from ZURB

Dyspatch No-Code Email Builder

f:id:moongift:20220107114251p:plain

ノーコード、ドラッグ&ドロップでHTMLメールを作成できるエディタを提供しています。コンポーネントも多数用意されており、それらを配置すればリッチなHTMLメールを作成できます。すべてのコンポーネントがレスポンシブに対応しています。

Dyspatch No-Code Email Builder | Become a Faster More Efficient Team

Playground — Mail.ru AMP emails

f:id:moongift:20220107114306p:plain

APM for emailを作成するためのエディタです。適切なAMP for emailになっているかの検証ツールも組み込まれています。HTML自体は手書きですが、プレビューが表示されるので分かりやすいです。

Playground — Mail.ru AMP emails

Stripo

f:id:moongift:20220107114319p:plain

フリーで利用できるHTMLメールエディタです。左側に多数のコンポーネントが並んでおり、それらを配置するだけでHTMLメールができあがります。メール自体の幅や背景色などのプロパティも編集できます。

Stripo — FREE Email Template Builder: Drag and Drop Html Email Editor

Unlayer

f:id:moongift:20220107114339p:plain

Unlayerもドラッグ&ドロップによるHTMLメールエディタですが、特徴的なのはコラボレーション機能かも知れません。テンプレートも多数用意されているので、素早くリッチなメールが作成できるでしょう。

Unlayer | Free email editor to build responsive email templates

Parcel

f:id:moongift:20220107114352p:plain

Web上でHTMLコードを記述してHTMLメールを作成します。特に開発者向けにフォーカスしており、ミニファイやコラボレーション機能などが特徴的になっています。

Parcel: The Code Editor Built for Email Development

TOPOL.io

f:id:moongift:20220107114404p:plain

ドラッグ&ドロップでHTMLメールを作成できます。各コンポーネントはレスポンシブに対応しています。プラグインとして、埋め込み型のエディタを提供しているのが特徴です。

TOPOL.io | FREE & Beautiful html email template builder and editor

Email Editor

f:id:moongift:20220107114416p:plain

mjmlで提供されているエディタです。コードはHTMLタグを手打ちする形で、右側にプレビューが表示されます。mjmlのタグをテストしたり、実際の見え方を確認するのに便利です。

Email Editor

まとめ

HTMLメールは通常のWebブラウザ向けのHTMLとは多少異なるので、特化型のエディタを使うことで作成効率を高められそうです。特にドラッグ&ドロップであれば、開発者以外の方でも気軽に作成できるのが良さそうです。