はじめてのWordPress入門講座【基礎知識・基本的な使い方・トラブル対応】

HTMLメール作成でレイアウトの参考になるメルマガを集めてみた。

メール配信を始めるにあたり、HTMLメールにするか、テキストメールにするかも要検討なんですが、最初は「HTMLメール」でいこうと思っています。

HTMLメールというのはHTMLとCSSで作られているので、WEBページを送るイメージですね。Benchmark Emailでは、かなり簡単に作れて、レイアウト崩れなどの心配はないのですが、問題はレイアウトです。1カラムにするか2カラムにするか。

どんなレイアウトが良いのかなと考えているのですが、やはり元になるデータ量が少ないので、直近1ヶ月で届いたメールマガジン(HTMLメール)を含めて、あれこれ参考を探したので、ご紹介します。

HTMLメールのレイアウトの宝庫「Email Gallery」

Email Gallery

このサイトだけで十分かもしれません。海外の事例しかありませんが、数を大量に見れば、ある程度パターンが見えてきますね。

Email-Gallery : Newsletter Examples & Email Design

HTML Email Gallery

HTML Email Gallery

「HTML Email Gallery」も「Email Gallery」と同じように様々なHTMLメールが掲載されています。「Email Gallery」よりも個性的な物が多い(?)かな。

HTML Email Gallery | Email Design Inspiration

実際に幾つか見てみる。

少しだけ手元に届いたHTMLメールを載せておきます。

CAMPFIRE

クラウドファンディングのCAMPFIREのメールマガジン。コンテンツが2カラムでシンプルに並んでいますね。

CAMPFIRE

フッター↓
CAMPFIREのメールフッター

CAMPFIRE(キャンプファイヤー)- クラウドファンディング

Adobe

アドビのメールマガジン。1カラムで載せているコンテンツも多くないので、さっと目を通せますね。

Adobeのメールマガジン

アドビ公式サイト クリエイティブ、マーケティング、文書管理ソリューション

ブレーン(宣伝会議)

宣伝会議のメールマガジン。WEBメディアのメールマガジンとして参考になります。やっぱりシンプルなのが良いですね。

ブレーンのメールマガジン

宣伝会議オンライン

Gunosy

キュレーションアプリの「Gunosy」のメールマガジン。やっぱりシンプル。

Gunosy

Gunosy(グノシー)|ニュースが無料で読める!話題の記事や情報まとめ読みスマホアプリ

Pocket

あとで読みたい記事を保存できる「Pocket」のメールマガジン。1カラムで、コンテンツが多めです。

PocketのメールマガジンPocketのメールマガジン2

Pocket

Sumally

欲しい物で繋がるSNS「Sumally」のメールマガジン。やはり商品画像が大きめですね。

Sumally

Sumally (サマリー)

Tシャツトリニティ

Tシャツ作りでお世話になっている「Tシャツトリニティ」のメールマガジン。他のものと比べて「賑やか」でECショップっぽいですね。

TシャツトリニティのメールマガジンTシャツトリニティのメールマガジン2

デザインTシャツ通販 T-SHIRTS TRINITY(Tシャツトリニティ)

tumblr.

ソーシャルメディアの1つ「タンブラー」のメールマガジン。タンブラーアカウントの紹介ですね。

タンブラーのメールマガジン

Tumblr

Medium

ソーシャルメディアの1つ「Medium」のメールマガジン。シンプルですね。サムネイル画像は右側に置いてますね。

mediumのメールマガジン

Medium

Mashable

海外の有名ソーシャルメディア情報サイト「Mashable」のメールマガジン。カラムを組み分けていますね。こういう風に項目を区切るのも良いですね。

MashableのメールマガジンMashableのメールマガジン2

Mashable

Benchmark Email

メール配信サービスの「Benchmark Email」のメールマガジン。メール配信サービスの会社が発行しているので、参考にする度は一番高くなりそう。

Benchmark EmailのメールマガジンBenchmark Emailのメールマガジン2

Benchmark Email

いろいろ見てみて

WEBメディア系は1カラムが多いのかな。サムネイル画像は大きめの方が良いですね。あとはゴチャゴチャさせずにシンプルが良さそう。

メールからWEBサイトへの導線を分かりやすくボタンやリンクなどで、ちゃんとしておく必要もありますね。

さて、どんなメールのレイアウトにしようかな。

Appleとか他にも色々と参考になるものはあるはずだけど、見つからない。次に配信されてくるのを楽しみにしてます。