HTMLメールの作成に使えるテンプレート×16選

HTMLメールは通常のWebサイトで利用するHTMLとほとんど同じですが、多少の違いがあります(外部ファイルが利用できない、JavaScriptが使えないなど)。また、配信される端末やWebサービスごとに正しく表示できるかの確認は大変です。

そこで使ってみたいのがテンプレートになるでしょう。今回はHTMLメール作成時に使えるテンプレート集をまとめて紹介します。

1. Free Open Source HTML Email Templates 2020 | Dyspatch

f:id:moongift:20200120134506p:plain

14種類のHTMLメールテンプレートがオープンソース(ライセンスはApache 2.0)で公開されています。一つ一つのテンプレートが招待、請求書、アンケートなど様々なパターンに分かれて作られています。応用しやすいのではないでしょうか。

Free Open Source HTML Email Templates 2020 | Dyspatch

2. Cerberus - Patterns for Responsive HTML Email Templates

f:id:moongift:20200120134518p:plain

デスクトップ、Web、モバイルアプリと様々なメールクライアントをサポートしているHTMLメールテンプレートです。パターンは多くありませんが、レスポンシブやFluidテンプレートなど細かく分かれて作成されています。

Cerberus - Patterns for Responsive HTML Email Templates

3. Responsive Email Templates | Playground from ZURB

f:id:moongift:20200120134543p:plain

デザイン会社のZURB社が作成、公開しているHTMLメールテンプレートです。サイドバーの有無、ニュースレター用などよくあるデザインに対応しています。Campaign MonitorやMailChimpといったメールマーケティングサービスでも利用できます。

Responsive Email Templates | Playground from ZURB

4. Antwort - Responsive Layouts for Email

f:id:moongift:20200120134551p:plain

レスポンシブなHTMLメールテンプレートをオープンソース(ライセンスはMIT License)で公開しています。デザイン自体はシンプルなので、Antwortをベースとしてカスタマイズしていくのがよさそうです。

Antwort - Responsive Layouts for Email

5. Newsletter Templates, Free Email Templates | CakeMail.com

f:id:moongift:20200120134602p:plain

50種類を超えるテンプレートが無料でダウンロードできます。ECやカフェ、ビジネス用など様々なテンプレートが用意されていますので、目的にあったものがきっと見つかることでしょう。

Newsletter Templates, Free Email Templates | CakeMail.com

6. 新しいメールデザインのご紹介 無料ダウンロード版のメールデザインテンプレートを祝して! - 99designs

f:id:moongift:20200120134612p:plain

プロモーション、通知、ニュースレターという3つのカテゴリと、各色(オレンジ、青、緑、グレー)でテンプレートが提供されます。HTMLだけでなく、PSDファイルも配布されています。

新しいメールデザインのご紹介 無料ダウンロード版のメールデザインテンプレートを祝して! - 99designs

7. 無料レスポンシブHTMLメールテンプレート

f:id:moongift:20200120134626p:plain

スマホアプリ、キャンペーン、教育期間、ECサイト、トラベル、アウトドアと6種類のパターンでテンプレートが公開されています。それぞれダウンロードして、すぐに利用できます。

無料レスポンシブHTMLメールテンプレート

8. rodriguezcommaj/salted: Salted: A responsive email template

f:id:moongift:20200120134634p:plain

レスポンシブで、ごく基本的なHTMLメールテンプレートになります。基本的にカスタマイズして利用することになるでしょう。

rodriguezcommaj/salted: Salted: A responsive email template

9. Foundation for Emails | Responsive Email Templates

f:id:moongift:20200120134644p:plain

HTMLデザインフレームワークとして知られるZurb Frameworkを用いたHTMLメールテンプレートです。マーケティングやニュースレターをはじめ、11種類のテンプレートが用意されています。Zurb Frameworkなのでカスタマイズは容易でしょう。

Foundation for Emails | Responsive Email Templates

10. MUI - Material Design CSS Framework

f:id:moongift:20200120134653p:plain

MUIは軽量なCSSフレームワークになります。Webデザインに利用することもできますが、HTMLメールもサポート対象となっています。Webページを作成する感覚でHTMLメールを作成できるでしょう。

MUI - Material Design CSS Framework

11. Free Email Templates for your Email Marketing Campaigns and Email Newsletters - Free Mail Templates

f:id:moongift:20200120134706p:plain

無料で使えるHTMLテンプレートを紹介しているブログです。80種類近くのHTMLテンプレートを紹介しています。その中にはきっと気に入ったものが見つかることでしょう。

Free Email Templates for your Email Marketing Campaigns and Email Newsletters - Free Mail Templates

12. ColorlibHQ/email-templates: Free HTML email templates for Mailchimp and other emails services

f:id:moongift:20200120134717p:plain

イベントや不動産、ジムなど様々なテンプレートを20種類公開しています。ブログ記事では9まで紹介していますが、その後も継続的にデザインを追加しているようです。

ColorlibHQ/email-templates: Free HTML email templates for Mailchimp and other emails services

13. Passion: free responsive email template in HTML, PDF

f:id:moongift:20200120134727p:plain

様々なデザインテンプレートを一つのHTMLメールに詰め込んでいます。これをベースにすることで、多くのパターンに手軽に対応できそうです。

Passion: free responsive email template in HTML, PDF

14. Free Newsletter Template (PSD & HTML) - GraphicsFuel

f:id:moongift:20200120134740p:plain

ニュースレターのテンプレートをPSD、HTMLで公開しています。34を超えるメールアプリでテストされており、互換性は高いと思われます。

Free Newsletter Template (PSD & HTML) - GraphicsFuel

15. Slicejack/mail-portfolio: MailPortfolio, a free responsive e-mail template.

f:id:moongift:20200120134755p:plain

MIT Licenseで公開されているオープンソースのHTMLメールテンプレートです。写真をグリッドで並べたり、テキストと一緒に表示するなど応用が利きやすいデザインになっています。

Slicejack/mail-portfolio: MailPortfolio, a free responsive e-mail template.

16. Free Valentine’s Day Email Template to Spread the Love | Blog – PSD2HTML®

f:id:moongift:20200120134804p:plain

間もなく来るバレンタインデー向けのHTMLメールテンプレートです。EC系のサイトで用いると効果的かも知れません。

Free Valentine’s Day Email Template to Spread the Love | Blog – PSD2HTML®

まとめ

テンプレートをベースにすれば、配信後にデザインが崩れるリスクを大幅に下げられるでしょう。また、ジャンルごとに最適なデザインは異なりますので、それぞれに合わせたテンプレートを選択できるのも魅力です。

ぜひ皆さんのメール配信時に役立ててください。また、安定した、受信箱にきちんと届くメール配信システムが必要な場合にはCustomers Mail Cloudをご利用ください!

クラウドからのメール送信を簡単に。確実に。| Customers Mail Cloud