HTMLメールは通常のWebサイトで利用するHTMLとほとんど同じですが、多少の違いがあります(外部ファイルが利用できない、JavaScriptが使えないなど)。また、配信される端末やWebサービスごとに正しく表示できるかの確認は大変です。
そこで使ってみたいのがテンプレートになるでしょう。今回はHTMLメール作成時に使えるテンプレート集をまとめて紹介します。
1. Free Open Source HTML Email Templates 2020 | Dyspatch
14種類のHTMLメールテンプレートがオープンソース(ライセンスはApache 2.0)で公開されています。一つ一つのテンプレートが招待、請求書、アンケートなど様々なパターンに分かれて作られています。応用しやすいのではないでしょうか。
Free Open Source HTML Email Templates 2020 | Dyspatch
2. Cerberus - Patterns for Responsive HTML Email Templates
デスクトップ、Web、モバイルアプリと様々なメールクライアントをサポートしているHTMLメールテンプレートです。パターンは多くありませんが、レスポンシブやFluidテンプレートなど細かく分かれて作成されています。
Cerberus - Patterns for Responsive HTML Email Templates
3. Responsive Email Templates | Playground from ZURB
デザイン会社のZURB社が作成、公開しているHTMLメールテンプレートです。サイドバーの有無、ニュースレター用などよくあるデザインに対応しています。Campaign MonitorやMailChimpといったメールマーケティングサービスでも利用できます。
Responsive Email Templates | Playground from ZURB
4. Antwort - Responsive Layouts for Email
レスポンシブなHTMLメールテンプレートをオープンソース(ライセンスはMIT License)で公開しています。デザイン自体はシンプルなので、Antwortをベースとしてカスタマイズしていくのがよさそうです。
Antwort - Responsive Layouts for Email
5. Newsletter Templates, Free Email Templates | CakeMail.com
50種類を超えるテンプレートが無料でダウンロードできます。ECやカフェ、ビジネス用など様々なテンプレートが用意されていますので、目的にあったものがきっと見つかることでしょう。
Newsletter Templates, Free Email Templates | CakeMail.com
6. 新しいメールデザインのご紹介 無料ダウンロード版のメールデザインテンプレートを祝して! - 99designs
プロモーション、通知、ニュースレターという3つのカテゴリと、各色(オレンジ、青、緑、グレー)でテンプレートが提供されます。HTMLだけでなく、PSDファイルも配布されています。
新しいメールデザインのご紹介 無料ダウンロード版のメールデザインテンプレートを祝して! - 99designs
7. 無料レスポンシブHTMLメールテンプレート
スマホアプリ、キャンペーン、教育期間、ECサイト、トラベル、アウトドアと6種類のパターンでテンプレートが公開されています。それぞれダウンロードして、すぐに利用できます。
8. rodriguezcommaj/salted: Salted: A responsive email template
レスポンシブで、ごく基本的なHTMLメールテンプレートになります。基本的にカスタマイズして利用することになるでしょう。
rodriguezcommaj/salted: Salted: A responsive email template
9. Foundation for Emails | Responsive Email Templates
HTMLデザインフレームワークとして知られるZurb Frameworkを用いたHTMLメールテンプレートです。マーケティングやニュースレターをはじめ、11種類のテンプレートが用意されています。Zurb Frameworkなのでカスタマイズは容易でしょう。
Foundation for Emails | Responsive Email Templates
10. MUI - Material Design CSS Framework
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
無料で使える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
イベントや不動産、ジムなど様々なテンプレートを20種類公開しています。ブログ記事では9まで紹介していますが、その後も継続的にデザインを追加しているようです。
ColorlibHQ/email-templates: Free HTML email templates for Mailchimp and other emails services
13. Passion: free responsive email template in HTML, PDF
様々なデザインテンプレートを一つのHTMLメールに詰め込んでいます。これをベースにすることで、多くのパターンに手軽に対応できそうです。
Passion: free responsive email template in HTML, PDF
14. Free Newsletter Template (PSD & HTML) - GraphicsFuel
ニュースレターのテンプレートをPSD、HTMLで公開しています。34を超えるメールアプリでテストされており、互換性は高いと思われます。
Free Newsletter Template (PSD & HTML) - GraphicsFuel
15. Slicejack/mail-portfolio: MailPortfolio, a free responsive e-mail template.
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®
間もなく来るバレンタインデー向けのHTMLメールテンプレートです。EC系のサイトで用いると効果的かも知れません。
Free Valentine’s Day Email Template to Spread the Love | Blog – PSD2HTML®
まとめ
テンプレートをベースにすれば、配信後にデザインが崩れるリスクを大幅に下げられるでしょう。また、ジャンルごとに最適なデザインは異なりますので、それぞれに合わせたテンプレートを選択できるのも魅力です。
ぜひ皆さんのメール配信時に役立ててください。また、安定した、受信箱にきちんと届くメール配信システムが必要な場合にはCustomers Mail Cloudをご利用ください!