HTMLメールのテンプレート「Cerberus」を使ってみる

HTMLメールを作る機会があったのですが、HTMLメールはWebサイトと比べて実装方法が少し特殊で、メールクライアントやOSなどによって挙動が違ったりもするので、1から作ろうと思うとそれなりに工数がかかります。
そこで今回、「Cerberus」というHTMLメールのテンプレートを使用してみたので、その内容をメモしておきます。

Cerberusについて

Cerberusには3種類のテンプレートが用意されています。

Fluid Template

シンプルなレイアウトで、画面幅を狭めた時は全体的に縮小するようになっています。
どのメールクライアントやOSでも同じような表示になります。
Fluid Templateのデモページ

Responsive Template

Media Queriesを使用したテンプレートで、Media Queriesをサポートしているメールクライアントではレスポンシブに対応できます。
GmailやAndroidなどサポートしていない場合は縮小されて表示されます。
Responsive Templateのデモページ

Hybrid Template

Media Queriesと合わせてmax-widthやmin-widthを使用することで、Media Queriesのサポートに関係なくレスポンシブに対応できます。
Hybrid Templateのデモページ

サポート範囲

サポート範囲は公式サイト内に記載がありますが、OutlookやGmail、Yahoo、iOS Mailなど、主要なものは概ねサポートしているようです。
　

使い方

公式サイトにアクセスして、「Download Zip」のボタンからダウンロードできます。
解凍したフォルダにcerberus-fluid.html、cerberus-responsive.html、cerberus-hybrid.htmlというファイルが入っているので、使用したいテンプレートの中身を書き換えればOKです。

今回はHybrid Templateを試してみて、実際に送信すると各メーラーで以下のような表示で確認できました。

Outlook(2016)のキャプチャ
Macのメーラーのキャプチャ
Gmail(PC)のキャプチャ
iOSのメーラーのキャプチャ
Gmail(SP)のキャプチャ

表示は概ね問題なさそうでしたが、Outlookでボタンが角丸でない、最後のブロックの左に黒線が出ているなど、微妙に他と表示が違っているようでした。
　

【参考サイト】

• Cerberus – Patterns for Responsive HTML Email Templates