大手企業やWebサービスが配信！お洒落なHTMLメールのデザイン記事20選
- 2017年8月17日
- 25,505
ferret編集メンバーが不定期で更新します。
Webマーケティング界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介します！
>> 著者詳細はこちら
この記事は2016年3月22日の記事を再編集しています
視覚的に"伝えたい内容"を表現することができるHTMLメールは、テキストだけのメール以上に、見る側に対してインパクトを与えることが可能です。
最大の特徴は、文字だけで簡単に作成できるメールとは異なり、デザインを通じてユーザーに「具体的なイメージ」を与えられる点です。なかなか訴求したいイメージを伝えられない……といって頭を抱えている方も多いのではないでしょうか。
今回は、HTMLメール作成時に参考となる"カッコいいデザイン"を紹介する記事を20個ピックアップしました。
メールはビジネスにおいて、効果的なマーケティング手法の1つです。そのため、テキストではなくHTMLメールを採用する際は"デザイン"要素が加わるため、見た目を重視したいところです。
参考にしやすい国内の事例やオシャレな海外のデザイン等がチェックできるので、ぜひHTMLメールを作成する際、参考にしてください。
HTMLメールのカッコいいデザインを紹介する記事20選
1. Mail Magazine Design
Mail Magazine Designは、国内のクオリティの高いHTMLメールのデザイン素材を収集しているギャラリーサイトです。国内のギャラリーサイトはホームページ向けのものが大半で、HTMLメールに特化したものは貴重なのではないでしょうか。
タブは「ALL」「FASHION」の2つにわかれていることから、基本的にファッション系のデザインを収集していることがわかります。gu、GAP、FOREVER21など、誰もが知っているであろう有名ブランドのメール（メルマガ）のデザインを見ることが可能です。
ファッション以外のデザインでは、インテリア（francfranc、MOMAなど）、コスメ関連（LUSH、L'OCCITANEなど）のHTMLメール（メルマガ）を掲載しています。
デザイン全体を見ることができるだけではなく、配信周期や配信日、タイトルに加えて、デザインの説明もあるのが特徴です。自社でHTMLメールを配信する際の参考にしてみてください。
2. Email Design Inspiration by HTML Email Designs
Email Design Inspirationは、美しいHTMLメールのデザイン素材を集めた海外ギャラリーサイトです。デザインは横に3つずつ配置したレイアウトで、トップページからたくさんのデザインをチェックすることができます。気になるものをクリックするとページを移動せずにデザインを表示してくれますので、とにかく色々なデザインをサッと見たい方にオススメです。
Dropbox、Udemy、Rebecca Minkoff、Gucciをはじめとした日本でも有名なサービス・ブランドのデザインが豊富です。海外ならではのオシャレなデザインがたっぷりと掲載してありますので、デザイン性にこだわりたい時は一度目をとおしてみてください。
3. ECサイト運営者必見！メルマガのスマホ対応でデザインの参考になるメールマガジン12選
https://blog.benchmarkemail.com/jp/blogsgooddesignemailsecsitessend/
こちらはスマートフォンに対応しているHTMLメールの中でも、デザインが優れたものをピックアップして紹介している記事です。伊勢丹、三越、nano・universe、MoMA STOREを含む、全部で12個のデザインを掲載しています。
いずれもデザイン性が高いのはもちろんのこと、画像がスマートフォン画面上で見た状態となっており、ユーザー目線でデザインが見れるようになっています。また、各デザインに細かい説明がついており、どのような点が特徴なのか、どんなデザインなのかがよくわかる内容となっているのもポイントです。
デザインを見たいだけではなく、HTMLメールのデザインのクオリティをさらに高めたい方にもぴったりです。
4. Email Gallery
素敵なデザインのHTMLメールを数多く収集し、掲載しているギャラリーサイトです。とにかく量が多く、見応えたっぷりなので、お探しのデザインが見付かるのではないでしょうか。たくさんのデザインをチェックしたいとお考えの方必見です。最新のデザインでは、Amazon Echo、Toyota Mirai、New York Timesなどを掲載しています。（2017年8月3日時点）
デザインは新着表示ができるほか、カラム数、業種、色で絞り込むこともできます。また、ページ右上の検索窓からキーワード検索もできます。
5. HTML Email Gallery
http://www.htmlemailgallery.com/
様々なHTMLメールのデザイン紹介に加え、メルマガ作成のヒント・テクニック記事を紹介しているギャラリーサイトです。
デザインにはそれぞれハッシュタグを設定してあり、好みのデザインに出会えれば関連するデザインがすぐに見付かります。掲載量も多くジャンルも多彩ですが、カテゴリ分類が細かく、色・種類・製品・季節にわかれているため検索も楽々です。お知らせ、ネットショップ、休日……と種類別にわけているのが便利で、用途に応じてデザイン検索できるのが特徴的です。
6.【HTMLメール紹介】「メールマガジンを改善したい」方必見。業種別で見るメールデザイン事例まとめ12選+番外編
https://blog.benchmarkemail.com/jp/blogs12htmlemailsintroduction/
メールを活用したマーケティング施策を改善したいという方に向けて、HTMLメール（メルマガ）を業種別に紹介している記事です。
ピックアップしているのはオリジナルTシャツ作成通販サイト「Tmix」、オンライン学習サイト「Schoo」、レストラン「パスタソースキッチン」を含む、全12デザインです。各メールのポイントを紹介していますので、具体的にどういった点を参考にすべきか、どんな点が優れているかがわかります。また、国内事例のピックアップですので、参考にしやすいという点もポイントでしょう。
7. Introducing the Top 100 email marketing campaigns.
https://www.campaignmonitor.com/best-email-marketing-campaigns/
様々なHTMLメールの中から、トップ100のメールマーケティングキャンペーンを紹介しているページです。特集 ・マーケティングオファー・ニュースレター・アナウンス・イベントの5つのフィルタがあり、いずれも優れたデザインのHTMLメールが揃っています。
掲載数も豊富ですので、一度見てみるとデザインのヒントが得られるのではないでしょうか。HTMLメールのデザインアイデアを探しているという方に、ぜひご覧いただきたいページとなっています。
8. メルマガ担当者が知っておきたいHTMLメールの無料テンプレート7選
https://blog.kairosmarketing.net/mail-marketing/free-email-templetes-for-marketers/
便利なHTMLメールテンプレートサイトをピックアップして紹介している記事です。デザイン、レイアウトの参考になるものを探しているという方は目をとおしてみてください。
9. Cakemail
http://templates.cakemail.com/
フリーのHTMLメールのテンプレートを公開しているページです。ビジネス全般やシーズン、スペシャルイベントなど様々なシーンで活躍するテンプレートがたくさんあります。シンプルで使いやすい定番のデザインから、写真がメインのもの、ポップなイラストを取り入れたもの……などデザインも様々です。
10. Responsive Email Patterns
http://responsiveemailpatterns.com/
Responsive Email Patternsでは、HTMLメールを構成する様々なパーツのテンプレートを集めています。全体のレイアウト、ナビゲーション、リスト、グリッドブロック、メディア、アコーディオンの6カテゴリを掲載中です。どのようなパーツを取り入れるか、レイアウトはどうするかの参考になるのではないでしょうか。
11. HTMLメールマガジンの参考になるイケてるデザイン13選
http://www.benchmarkemail.com/jp/blogs/detail/13htmlemaildesignsyoumustcheck
メール配信サービス事業を展開する、株式会社ベンチマークジャパンのブログ記事です。
「WEBマスターの手帳」の遠藤氏が、実際にHTMLメールを定期的に配信する際、参考にしているものを紹介しています。ギャラリーサイトなどでもメールのデザインを見ることができますが、多くは海外のデザインばかりなので、こちらの記事で紹介している国内のメールは役立つでしょう。
ウォールストリートジャーナルの日本版、NewsPicksといった国内の有名メールマガジンが紹介されています。
12. HTMLメール作成でレイアウトの参考になるメルマガを集めてみた。
https://homepage-reborn.com/2015/04/13/メール配信（htmlメール）作成でレイアウトの参考/
マーケティング、WordPress、Appleなどの情報を配信する「WEBマスターの手帳」の記事です。
著者の手元に実際届いたメールマガジンを参考例として挙げています。クラウドファンディングの「CAMPFIRE」、「Adobe」、「ブレーン（宣伝会議）」、「Sumally」といった一度は聞いたことがあるであろうサービスのメールマガジンばかりです。
1つひとつデザインの特徴や画像の位置、レイアウトについてのコメントもありますので、レイアウトを考える時には特に参考になる記事となっています。
13. 読まれるには理由がある！参考にしたいHTMLメール事例14選 | Code部
https://blog.codecamp.jp/htmlmail_examples/
プログラミング初心者向けメディア「Code部」の記事です。参考にすべきHTMLメールの事例とともに、どのような業界と相性がいいか、その特徴は何かをまとめています。全部で5つのカテゴリー、14個の事例を見ることが可能です。HTMLメール内で使用されている画像の中身や記載内容、リンクやテキスト量といった細部まで紹介しています。
開封率、読んでもらうためのテクニックを盗むことができる内容となっていますので、本格的にデザインを検討する場合には特に見ておきたい記事となっています。
14. ASCII.jp：マネしたくなる海外企業の美しいHTMLメールまとめ（1/2）
http://ascii.jp/elem/000/000/973/973069/
Web業界で働く人のための情報メディア「ASCII.jp×WEB PROFESSIONAL」の記事です。海外企業が発行している、美しくてオシャレなHTMLメールだけをまとめて紹介しています。「ファッション / アパレル」カテゴリからはBurberry、Chanelなど、「小売」カテゴリからはAmazon.com、PEPSIなど、といずれも先進的な有名企業ばかりです。
見た目の美しさはもちろん、内容・構成もかなりこだわっているものばかりですので、これまでHTMLメールで成果が出ていない企業や見た目のクオリティを上げたいという企業にオススメの内容です。
15. レスポンシブHTMLメールデザイン海外事例10選 | メルラボ
http://mailmarketinglab.jp/10-great-example-responsive-email-design-from-oversea/
メールを使ったマーケティングに関する情報を届ける「メールマーケティングラボ」の記事です。
今国内で普及しているスマートフォンに対応した、レスポンシブEメールデザインの事例をピックアップして10点紹介しています。宅配ピザの「Domino’s」、アパレルブランドの「Asos」ほか、優れた海外デザインのみを集めています。レスポンシブ対応のポイントや各デザインの特徴的な部分もあわせて紹介しているので、これからのHTMLメールのデザインを考える際、大変参考になります。また、PC表示とスマートフォン表示両方のイメージを見ることが可能です。
16. 購買意欲を刺激する！印象的なHTMLメルマガ10選 | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
http://design.kayac.com/topics/2010/11/mailmagazine.php
面白法人カヤックが運営する「KAYAC DESIGNER'S BLOG」の記事です。毎週ネットショップのHTMLメールを作っていて、ほかのショップのメールもたくさん読んでいるという著者が、HTMLメールのデザインをまとめたものとなっています。
靴下専門店「Tabio」、「ニッセン」など生活雑貨やアパレル関連の国内のHTMLメール事例12個を見ることが可能です。これらジャンルのネットショップ運営者には特に参考になる記事です。横幅サイズ、HTMLメールの構成も掲載している点がユニークです。
17. デザイナーのインスピレーションを刺激する！ 海外のオシャレなHTMLメルマガ20選【スマホ版】 | Find Job! Startup
http://www.find-job.net/startup/smartphone-mailmag
スタートアップに役立つ情報を発信する「Find Job! スタートアップ」の記事です。
海外のハイセンスでオシャレなHTMLメール事例を20個紹介しています。「Kate spade」、「TIFFANY&Co.」といった人気ブランドから「flickr」のような有名サービス、ファーストフードの「DairyQueen」まで幅広い業種の事例を見ることが可能です。1つひとつの解説は少ないものの、海外ならではのデザインをたくさん見ることができる内容となっています。
ユニークな事例も揃っていますので、ほかとは違うデザインをしたいと思った時にオススメです。
18. ASCII.jp：絶対見ておきたい国内有名企業のHTMLメール事例まとめ (1/3)
http://ascii.jp/elem/000/000/973/973867/
Webを仕事にする人に向けた情報メディア「ASCII.jp×WEB PROFESSIONAL」の記事です。
ファッション、インテリア、小売、旅行、ITといった様々なジャンルの国内HTMLメール（メルマガ）をまとめて紹介しています。有名な企業のものばかり揃うのが特徴的です。また、どのような情報が掲載しているか、見せ方をしているかについても詳しく解説しています。
19. シリコンバレーで学んだ海外Webサイトの美しいHTMLメール15事例 - パパパパ
http://www.paji.me/entry/2012/08/07/113151
Webサービスについて書いているブログ「パパパパ」の記事です。
シリコンバレーで教わったという、海外の美麗なWebサービスのHTMLメールがまとめて15個紹介されています。どれも全体的にはシンプルですが、色使いやレイアウトが美しいデザインとなっています。また、ネットショップと比較すると画像が少なく、テキストメインのものが多い印象があります。
Webサービスを展開していてHTMLメールの発行を考えているという方には特に参考になる記事です。
20. グっと来たデザイン系メールマガジン3選（フェンリル | デベロッパーズブログ）
http://blog.fenrir-inc.com/jp/2014/12/design_newsletter.html
アプリ、Webサービス開発を行うフェンリル株式会社 デベロッパーズブログの記事です。デザイン系HTMLメール（メルマガ）を3つ紹介している、というユニークな事例記事となっています。配信のタイミングや回数、配信内容、デザインを詳しく紹介しています。
ネットショップ系メールマガジンとは異なる部分も多いので、新たな発見を得ることができる内容です。
まとめ
以上、参考にしたいHTMLメールのデザインが紹介された記事を20個をご紹介しました。いかがだったでしょうか。
HTMLメールは画像で表現できるという点が大きなメリットのため、今回ご紹介したデザインをご覧いただければわかるとおり、多くの企業が活用しています。特にその中でもネットショップの事例が多くありますが、不動産やレストラン、DIYメーカー……など、あまりHTMLメールとは関連の無さそうな企業の活用事例もありました。商品の販売だけではなく、ニュース、キャンペーン情報配信など様々な用途で活用することが可能です。
また、多くの企業が活用している分、たくさんのHTMLメールの中に埋もれてしまわないよう十分考えてデザインしたいものです。
他社がどのようにHTMLメールを活用しているか、どんなデザインができるか、ぜひ参考にしてみてください。
