HTMLメールマガジンの参考になるイケてるデザイン13選

所要時間 1 メールマーケティングノウハウ

Marketing Mania

こんにちは。WEBマスターの手帳の遠藤です。HTMLメールを作るにあたり「どんなデザインが良いのか」と考える時にデザインで参考になるメールマガジンはありますか?

海外のニュースレターを集めている「Email-Gallery」というWEBサイトも参考になりますが、やはり日本国内のメールマガジンのデザインも参考にしたいですよね。

という訳で、今回は自分が「HTMLメールのデザインの参考にしてるメールマガジン」をご紹介します。


ウォールストリートジャーナル



ウォール・ストリート・ジャーナル日本版 -ニュース-ビジネス-海外-経済-金融 – WSJ日本版-jp.wsj.com – Wsj.com

米国紙のウォールストリートジャーナルの日本版のメールマガジンです。

2カラムで左にリンク付きの画像、右に本文というレイアウトで、載せているコンテンツも1つだけと非常にシンプルです。


NewsPicks



NewsPicks

経済ニュースのニュースアプリのメールマガジンです。1カラムで縦長なレイアウト。モバイル読者を意識しているのがわかります。

デザインもシンプルで、ほとんど装飾はされておらず、画像を使ってコンテンツを分けていますね。


VISUALTHINKING



ビジュアルシンキング | ビジュアルの力で世界を丸くする。

「ビジュアルで世界を丸くする」というビジョンを持ってインフォグラフィックやデザインに関する情報発信をしているWEBサイトのメールマガジンです。

ビジュアルを専門とするだけあって、メールマガジンもシンプルで、ロゴの色とリンクの色が統一されていて洗練されている印象です。アイキャッチ画像のサイズが大きめで、必要以上にテキストはありません。


ブレーン



ブレーン

宣伝会議が発行元の広告・クリエイティブ専門誌のメールマガジンです。

シンプルですね。左にアイキャッチ画像、右にタイトルとコンテンツ概要、記事へのリンクがあります。色も白と黒とグレーと非常にシンプルです。


宣伝会議



宣伝会議オンライン

マーケティング・コミュニケーションの総合シンクタンク「宣伝会議」のメールマガジンです。

ブレーンとレイアウトはほぼ同じです。ピンク色で統一されているのが分かります。カラフルにするよりも、使う色を絞ることで整った印象を与え、統一感が出るのがよく分かります。


Gunosy



グノシー 無料で読めるニュースまとめ

キュレーションアプリ、Gunosyのメールマガジンです。

各記事のタイトルスペースが横幅いっぱいになっています。タイトルを重視しているのでしょう。また各記事にFacebookとTwitterのボタンが設置されているのも印象的です。


Apple



Apple

ご存知のAppleです。メインとなるコンテンツが大きく掲載されています。1メールで1コンテンツになっているので、パッと見て内容が認識できます。
デザインもさすがはAppleといったところでしょうか。シンプルですね。


Evernote Market



Evernote Market

Evernoteが販売している商品のメールマガジンです。

人気製品ランキングで商品画像が左右交互に配置されています。同列に並べるよりも商品画像が目に留まりやすい印象です。

Evernoteのグリーン色がリンクでも使われているので、Evernoteのイメージも浮かんできますね。


Amazon


Amazon.co.jp

Amazonのニュースレターです。セール情報の時は、ほぼ画像1枚で完結しているメールが届きますね。

漫画でわかるシリーズを愛読しているのがバレバレですが、メインの商品を一番上に大きめに表示して、関連商品をしたに2カラムで並べています。


ユニクロ



UNIQLO

ユニクロのニュースレターです。上部にナビゲーションバーを設置することでWEBサイトの様なデザインを演出し、同時にサイトへの移動を促すことができます。

やはり商品画像がメインで次に金額が目立っています。「リンク付きのチラシ(DM)」が届いているイメージですね。ECサイトや物販の会社の参考になりますね。


ZOZOTOWN



ファッション通販ZOZOTOWN

ZOZOTOWNのニュースレターです。ユニクロと同じく「リンク付きのチラシ(DM)」が届いているようです。

アピールしたい情報を前面に打ち出しています。パッと見ただけで内容が認識できます。


スクー



無料動画のオンライン学習サイト – schoo WEB-campus(スクー)

WEB上で様々な授業を展開しているスクーのニュースレターです。

授業名とアイキャッチ画像と授業の時間だけで、授業に関する説明はありません。授業を受ける人がどんな人かがわかっているからこその構成ですね。


CAMPFIRE



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

クラウドファンディングのCAMPFIREのニュースレターです。

注目のプロジェクトを上部に大きく表示しています。またロゴの色をカテゴリー表示で使うことで統一感があります。


HTMLメールのイケてるデザインの共通点


以上、最近参考にしたHTMLメールをご紹介しましたが、共通点を幾つか挙げておきます。どこでも取り入れている要素であり、それだけ重要であるということです。

  • レイアウトは1カラム
  • シンプルなデザイン
  • メインの色を全体で統一して使用している
  • テキストは必要最低限に抑える
  • 一番見せたい情報は上部で大きめに表示
  • 読ませるのではなく、見せて伝える

日本国内には何百、何千というメールマガジンがあります。ぜひメールマガジンの登録の機会があれば積極的に登録して、どんなメールを配信しているのかチェックして、良いところは自社のメールマガジンに取り入れていきましょう!


編集長伏見はこう見る


メールを配信する!となっても、実際どんなレイアウトやデザインにしようかデザインにしようかというのは悩みの種ですよね。そんな時はやはり前人に学ぶのが一番。こちらにあるような企業のメールを参考にするのはいいかもしれませんね。


レイアウトに関するその他のブログをチェック 


【HTMLメールデザイン事例】読者心理を掴み取る、ブランディングにとことんこだわったメールレイアウト – Ginger Beach Inn様
【HTMLメールデザイン事例】 統一されたブランドイメージで○○といえば△△を構築-エティハド航空様
【HTMLメールデザイン事例】 虫歯になってからではもう遅い、 歯医者さんが教えてくれるメールを使ったお客様再喚起法 - オーラルプロポーションクリニック様

※遠藤さんのメルマガ登録はこちらから

※Benchmark Emailでは毎月1回メールマーケティングに関するブログをまとめたニュースレターを配信しています。ご興味のある方は是非ご登録下さい!

Benchmark Email

Powered by Benchmark Email

よりスマートな方法で顧客関係の構築を

Benchmarkではより実用的なメールマーケティングを提案しています。購読者との関係を築くことで売上や顧客満足度の向上を達成しましょう。