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」というデザインに含まれるメールテンプレートの一部です。