HTMLのメールテンプレート紹介

SendGridサポートチームの菊田(@kikutaro_)です。私が担当している「マーケティングメールハンズオン」のアンケートでは、よく次のようなコメントをいただきます。

「SendGridのメールテンプレートで綺麗なHTMLメールを簡単に作れて良かった。」
「自由に使えるメールテンプレートがWeb上で公開されていることを知らなかった。」
「外部のメールテンプレートをSendGridに取り込めるのは知らなかった。活用の幅が広がった。」

メールテンプレートをうまく使いこなすと、短時間で魅力的なメールを作成できます。今回のブログでは、メールテンプレートを使ったことがない方やどれを使ったら良いのか迷っている方に向けて、いくつかのメールテンプレートをご紹介します。

メールテンプレートとは?

メールテンプレートは、メールのデザインや本文の定型部分を繰り返し使えるようにした、いわゆる雛形です。すでにあるメールテンプレートを活用することで、HTMLやCSSを作り込まずに、次のようなメリットを得ることができます。

メリット

  • 綺麗なデザインのメールを簡単に作成できる
  • 様々な種類のメールクライアントやブラウザに対応できる
  • 特別な知識がなくてもレスポンシブメールを作成できる

一方で、次のようなデメリットもあります。

デメリット

  • メールテンプレートに不具合があった場合、サポートされないことがある
  • メンテナンスが停滞している場合、新しい端末やブラウザに対応できないかもしれない

問題があった場合、自分たちで修正したり、別のテンプレートを探したりする必要があります。そのため、利用する前には、提供元、サポート、ライセンス形態などを必ず確認しましょう。

どのようなメールテンプレートがあるのか?

Web上には様々なデザインのメールテンプレートが公開されています。大きく次の2種類に分かれます。

  • HTMLを公開しているメールテンプレート
  • Web上のメールエディタから利用するメールテンプレート

SendGridが提供しているものを含めて、それぞれご紹介していきます。

HTMLを公開しているメールテンプレート

コピー&ペーストやHTMLファイルをダウンロードしてすぐに使えるメールテンプレートです。

Paste

提供元:SendGrid
ライセンス:The MIT License (MIT)

PasteはSendGridが公開しているトランザクション系のメールテンプレートで、とてもシンプルなデザインとなっています。HTMLに含まれるコメントがとても細かいため、コードを把握しやすいところもポイントです。

Pasteサンプル
Pasteは以前にブログでも取り上げているので、具体的な利用方法はこちらをご確認ください。

Sendwithus Open Source Template

提供元:Sendwithus(Techdrop Labs Inc.)
ライセンス:Apache 2.0 license

SendGridのパートナーでもあるSendwithusが提供しているテンプレートです。かわいらしいデザインからクールなデザインまで幅広く揃っています。SendwithusのテンプレートをSendGridで活用する方法については、冒頭で紹介した「マーケティングメールハンズオン」でも解説しているので、興味がある方はぜひご参加ください。

Sendwithusサンプル
各デザインごとに用途別のメールテンプレートが揃っています。下図のメールは「Oxygen」というデザインに含まれるメールテンプレートの一部です。

Sendwithusサンプル

Cerberus

提供元:個人(Ted Goas
ライセンス:The MIT License (MIT)

メールテンプレートを調べると必ずといっていいほど出てくるのが「Cerberus」です。作者は、QAサイトで有名なStack Overflowのデザインチームに所属する方で、個人で開発されたメールテンプレートですが現在もしっかりメンテナンスされています。

Ceruberusサンプル

Web上のメールエディタから使用するメールテンプレート

メールテンプレートを選択すると、Web上のエディタが起動してメールを編集できます。

SendGridのテンプレート機能

SendGridでは現在12種類のメールテンプレートがあります。すべてレスポンシブ対応しているのでモバイルでも綺麗に表示されます。

SendGridサンプル
エディタは、画面操作が中心のデザインエディタとHTMLを直接入力するコードエディタの2種類があります。下図はデザインエディタによるメール編集の流れです。このエディタを使って自分でデザインしたメールを新たなテンプレートとして追加することも可能です。

SendGridエディタ

Litmus Builder

Litmusはメール作成に関わる様々な作業をサポートしてくれるサービスです。特に有名なのが、各メールクライアントで受信した際のメール表示をテストする機能で、前半で紹介したメールテンプレートの中にもLitmusで表示テストされているものが多くあります。

テンプレートを選ぶと、Litmus Builderというエディタが起動して編集できます。

Litmusサンプル
Litmusエディタ
他にCampaign MonitorMailChimpでも同様の機能を提供しています。

 

今回のブログでは簡単に利用できるメールテンプレートを中心にご紹介してきました。

Webで公開されているものではなく、自分たちでオリジナルのメールテンプレートをゼロから作成したい、という方はメール作成用のフレームワークや専用言語を利用することをおすすめします。有名なものとしては次のようなものがあります。

この辺りについては、また別途ブログでご紹介していきたいと思います。

メールテンプレートは他にも様々なものがあるので、興味がある方はぜひ色々と探してみてください。