HTMLメールを作成するのに使えるマークアップ言語まとめ

HTMLメールを作成する場合、HTMLを使わなければなりません。しかし、WebページのHTMLとHTMLメールのHTMLは若干ルールが異なります。外部のCSSファイルは使えませんし、CSSも一部はHTMLメールで利用できません。Webブラウザではうまく表示できても、HTMLメールで送信するとデザインが崩れてしまうケースもあるでしょう。

今回はそうした課題を解決できる方法を紹介します。HTMLメールに特化したマークアップ言語(HTMLのサブセットなど)を使うのです。覚えてしまえば、どのようなデザインのHTMLメールでも素早く作成できるでしょう。

MJML

MJMLはレスポンシブなHTMLメールを作成できるフレームワークです。Webコンポーネントベースで、高いカスタマイズ性があります。 <mj-section><mj-column> といった専用のタグを使ってデザインを構築します。

MJML - The Responsive Email Framework

HEML

通常のHTMLとCSSを知っていれば使いこなせるマークアップ言語がHEMLです。機能拡張にも優れており、HEMLのコードをベースとして独自のスタイル設定を追加できます。

HEML

htmml)

HTMLをテンプレートによって拡張し、インラインで要素やスタイルを展開します。テンプレートの中で置き換えキーワードを定義して置換もできるので、ユーザーによってメール送信内容を変更するような使い方もできそうです。

voidlabs/htmml: A markup language extending HTML to enable templating specifically designed for email (supports conditional comments)

Maizzle

Tailwind CSSを利用してHTMLメールを作成できるフレームワークです。WebページでTailwind CSSを使った経験がある人であれば、使いこなすのも容易でしょう。PostHTMLと呼ぶマークアップ言語により、ロジックなどを含めて記述できます。

Maizzle - Quickly build HTML emails with utility-first CSS

MJML App

MJML用のデスクトップアプリです。メールの編集とプレビューが備わっており、MJMLを使ったHTMLメール作成が容易になります。テンプレートも用意されているので、それらをカスタマイズして作成するのも良さそうです。

MJML App - The desktop app for MJML

まとめ

HTMLメールのデザインで苦しんだ経験がある方はMJMLをはじめする専用マークアップ言語をぜひ試してください。出来上がるHTMLメールはレスポンシブに対応し、かつ多くのメールクライアントで問題なく表示できる形になります。

世の中にはGmail以外にも様々なHTMLメールを表示できるクライアントが存在します。どこでデザイン崩れを起こすか分かりませんので、専用マークアップ言語を使う価値は大きいでしょう。