デザイン

デザイン

使える30選!レスポンシブ対応のEメール&ニュースレター無料テンプレート

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、30 Free Responsive Email and Newsletter Templates
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

222 views

読了時間 : 約6分20秒

現在Eメールのおよそ50%がモバイル端末で開かれていて、その割合は数年のうちに急増することが予測されています。ですので、メールマーケティングにレスポンシブ対応のテンプレートを使う重要性はこれまでになく高まってきています。

 

おそらくご存知かとは思いますが、単純なクライアント間のHTMLメールをデザインすること自体が難しいです(Outlookを見てみてください!)。でもすべてのクライアントでうまく動作し、しかも現在利用可能なあらゆる携帯電話やタブレットで動作するようにデザインするのはさらに難しいです。もっと難しいです。

 

ありがたいことに多くのデザイナーやディベロッパーの方たちが、すべてのクライアントで機能し、どの端末でも読み取り可能な、編集が簡単で無料のレスポンシブ対応のEメールテンプレートを集めてくれました。ここではテンプレートを、「ベース」と「デザイン済み」の2つのカテゴリーに分けて紹介します。

 

【デザイン済み】レスポンシブ対応Eメールテンプレート

 

Booster – Responsive Creative Business Email

with Envato Elements subscription

 

Boosterはビジネスメールのクリエイティブなメールビルダーで、レスポンシブ対応しています。MailChimp、Campaign Monitor、SendGridなどと互換性があります。

 

 

 

Moka – Responsive Email and Newsletter Template

with Envato Elements subscription

 

この素晴らしいメールビルダーでレスポンシブ対応のEメールを送ると、HTMLやCSSで出力されます。またメールを作るためにPSDファイルがたくさん用意されています。

 

 

 

Destiny – Responsive Email + Themebuilder Access

with Envato Elements subscription

 

Destinyはレイアウトが無制限で、ダウンロード後すぐに使える、素敵なメールビルダーです。MailChimpを含むすべての優れたプラットフォームに対応しています。

 

 

 

Litmus Responsive Email Templates (7 Templates)

 

Litmusは、「Litmus テスト済み」として徹底的に検証された7つのメールテンプレートをリリースしました。こちらはデザイン済みでレスポンシブ対応しており、PSDソースファイルが付属しています。

 

 

 

Green Village HTML Template

 

Green Villageはどんな目的にも合う、最小限のデザイン済みメールテンプレートです。ダウンロードには、階層化されたPSDとHTMLソースの両方が含まれています。

 

 

 

Responsive Email Template

from Email on Acid

 

Email on Acidによってリリースされたこのデザイン済みのテンプレートは、画面の幅に基づいて作動する3つの「レイアウト」が提供されています。デフォルトでは1~3列をサポートしており、メディアクエリ条件文を作動させると、モバイル端末用に1列レイアウトに変換されます。

 

 

 

Rigo – Responsive Email and Newsletter Template

with Envato Elements subscription

 

レスポンシブ対応メールテンプレートビルダーのRigoを使って、これまでで最高のメールを送りましょう。

 

 

 

 

Space – Responsive Email Template + Online Builder

with Envato Elements subscription

 

Spaceはテーマ設定済みのメールテンプレートビルダーです。たくさんの設定済みのレイアウトがついていて、すぐに使えます。

 

 

 

Recruiter – Responsive Recruitment Email + Builder

with Envato Elements subscription

 

人事部で働いていますか?もしそうなら、あなたの業界用に特化してつくられたこのレスポンシブ対応のメールビルダーがぴったりです。

 

 

 

Basic Responsive Email Template

from Derek Punslan

 

 

 

Simple Responsive HTML Email

 

Tuts+のチュートリアルに基づいて、このシンプルなデザイン済みのレスポンシブ対応HTMLメールは、最小限のメディアクエリと、最大限の互換性を確保する流動的な幅のアプローチを使用します。

 

 

 

Responsive & Flat Newsletter Template

 

 

 

Responsive Email Template

by Marco Lopes (Includes PSDs)

 

 

 

Presenter – Responsive Email Template

with Envato Elements subscription

 

Presenterはポップな見た目が必要なメールキャンペーンに最適です。Mailchimpなどと互換性があります。

 

 

 

Shop – eCommerce Responsive Email Template

with Envato Elements subscription

 

Shopはeコマースを念頭において構築されていて、店舗で販売促進したい場合には、探している主な機能のすべてが備わっています。MailChimp、Campaign Monitor、FreshMail, iContact、StampReadyと互換性があります。

 

 

 

【ベース】レスポンシブ対応Eメールテンプレート

 

Responsive Email Blueprints from MailChimp (6 Templates)

MailChimpは Email Blueprintsと名付けられた6つのレスポンシブル対応のベーステンプレートをリリースしました。これらのテンプレートはしっかりとした土台として機能し、Eメールニュースレターをデザインするスタート地点として使用できます。

 

MailChimp特有のテンプレート言語要素を含んでいますが、MailChimpユーザーでないなら簡単に削除することができます。

 

 

 

Ink – A Responsive Email Framework (4 Templates)

 

InkはZURBのレスポンシブメールフレームワークで、12桁のグリッドと迅速なメールプロトタイプ作成のためのシンプルなUI要素をいくつか含んでいます。Inkには4つのレスポンシブメールテンプレートもあり、各テンプレートのファイルの先頭にあるスタイルタグにInkが含まれています。

 

 

 

Antwort Responsive Email Layout Templates (2 Templates)

 

Antwortは最小限で最強のEメール向けレスポンシブレイアウトを提供していて、クライアントの幅に合わせて適応する豊富なドキュメントを備えています。テンプレートはモバイル端末(iOSのMailとAndroidのEmail)で完璧に機能し、主要なデスクトップ環境でも機能します。Outlook (2000+)でさえ対応しています。

 

 

 

Salted, A Responsive Email Template

from Jason Rodriguez

 

Litmusが自身のEメールニュースレターに使用するコードに基づいたSaltedは、レスポンシブHTML メールを作成するための簡単な基盤を提供するテンプレートです。

 

 

 

A Table-Based (but Responsive) Email Template

 

このテンプレートはMailChimpのEmail Blueprints(上記参照)とSean PowellのEmail Boilerplateが基になっています。レスポンシブ対応のテーブルベースのメールテンプレートで、MailChimpの差し込みタグがあらかじめ含まれています(必要なければ削除可能)。

 

 

 

Respmail Responsive Email Template

 

RespmailはMailChimpのEmail Blueprintsの改良版で、Outlook、Yahoo、 Hotmail、Gmail向けに行オプションの追加、構造の再定義、多くの修正がされています。互換性のテスト後、入念なレビューが行われていて、カスタマイズや変更が簡単に行えます。

 

 

 

rwdemail

 

rwdemailは上記で紹介したZURBのInkテンプレートが基づいていて、SASSのプリコンパイル、CSSのインライン化、CSS/HTMLと画像の縮小、S3に画像のホスティング、Litmusのメールテストなどすべてを自動化するプロジェクトです。InkテンプレートとCSS定型文のおかげで、簡単にあらゆる種類のEメールをデザインすることができます。

 

 

Future-Proof Responsive Email Template Without Media Queries

 

最新のCSSがほとんどサポートされていない環境でもレスポンシブ対応のメールテンプレートを作成できたらどうでしょうか。この方法はfluid hybrid methodと呼ばれ、Eメール開発のスポンジ方式とも呼ばれています。

 

おすすめ新着記事

おすすめタグ