現在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メール開発のスポンジ方式とも呼ばれています。
おすすめ新着記事
おすすめタグ