Gmail, Outlookをはじめ、デスクトップ・ブラウザ・スマホメールにレスポンシブ対応のHTMLメールのテンプレート -Cerberus

HTMLメールのコードは通常のWebページより難しい、という人は少なくないと思います。しかもレスポンシブ対応のHTMLメールになると、更に難易度があがります。

メールでよく利用されるレイアウトのパターンをシンプルにまとめた、レスポンシブ対応のHTMLメールのテンプレートを紹介します。

サイトのキャプチャ

Cerberus
Cerberus -GitHub

Cerberusの特徴

Cerberusは現在主流のメールクライアントをサポートしたレスポンシブ対応のHTMLメールのテンプレートで、MITライセンスで無料で利用できます。

サポートしているクライアントは、下記の通り。

デスクトップ
  • Outlook 2000/02/03/07/10/13 (Windows)
  • Outlook 2011/16 (Mac)
  • Apple Mail
  • Thunderbird
ブラウザ
  • Gmail
  • Outlook.com
  • Yahoo
  • Aol
  • Outlook Web Access
スマホ
  • Mail (iOS)
  • Gmail (iOS, Android 4.4)
  • Mail (Android 4.4)
  • Mailbox (iOS)
  • Inbox (iOS)
  • Yahoo (iOS)

参考に最近のメールクライアントのシェアは、こんな感じです。

サイトのキャプチャ

Email Client Market Share and Popularity
※2015年12月のデータ

CerberusのHTMLメールのテンプレート

各テンプレートのコードは、元ページ or GitHubからダウンロードできます。

HTMLメールのキャプチャ

Fluid Template
デモページ

テキストと画像で構成された基本的なテンプレート。
シンプルな1カラムのレイアウトで、狭いスクリーンでは水平に縮小されて表示されます。このテンプレートでは、異なるスクリーンごとにサイズの再構成は行いません。

HTMLメールのキャプチャ

Responsive Template
デモページ

レスポンシブ対応のテンプレート。
異なるスクリーンに合わせてサイズやレイアウトを構成するモバイルクライアント上で機能する複雑なレイアウトで実装されています。AndroidやGmailなどのMedia Queriesに非対応なクライアントでは、縮小されて表示されます。

HTMLメールのキャプチャ

Hybrid Template
デモページ

上2つの良いとこ取りをしたテンプレート。
ハイブリッドはメールクライアントのMedia Queriesのサポートに関係なく、異なるスクリーンに合わせてレイアウトを構築します。すべてのメールクライアントに最適化なレイアウトを提供しますが、若干コードの量が多いです。

top of page

©2016 coliss
o