大手企業やWebサービスが配信！オシャレなHTMLメールのデザイン記事10選

テキストのみのメールに比べてHTMLメールのデザインの表現力が高く、近年のスマートフォンやタブレットなどデバイスの普及もあって活用する企業が増えています。

今回は、デザインの参考になるHTMLメールマガジン（以下、メルマガ）が紹介された記事をご紹介します。

HTMLメールの概要と、HTMLメルマガを利用するメリットなど基礎知識を解説した上で参考になる記事をまとめています。

もし、これからHTMLメルマガの配信を考えている方、既存デザインを見直したい方はぜひご覧ください。

HTMLメールとは

HTMLメールとは、HTML形式メールのことを指します。

テキスト形式のメールにはできないテキストの色や大きさなどの装飾や、画像を埋め込んだりできます。また、テキスト形式ではメールがリストに対して届いたかどうかを測る「到達率」、ユーザー開いたかどうかを測る「開封率」を測定することができます。

デザイン性を高めることはもちろん、メールマーケティング施策の効果検証をより定量的に行うことができるというメリットがあります。

ただし、受信側の環境によっては、配信側の意図通りのデザインでメールが配信されないこともあるため注意が必要です。

参考：
メルマガを配信する前にこれだけは知っておこう！テキストメールとHTMLメールの違いを解説｜ferret
　　

HTMLメールの作り方

自分で作る

HTMLメールの作成ステップは、大きくわけて3段階あります。メール配信ソフトにより細かな仕様は異なりますが、大まかな流れとして理解しておきましょう。
　　

Step1. 文章を作成する

テキストメールと同じように、文面を作成します。
テキストメールとの違いは、後で画像を入れたり、装飾したりすることを前提にバランスを考えておくことです。
　　

Step2. メールの構造化を行う

HTML言語とCSSを使い構造化を行います。
　　

Step3. メールのデザインを装飾する

構造化したHTMLメールに、サイズや色などの装飾を加えます。
サイズや色以外にも枠線やリンクの設定など、様々な装飾があります。

参考：
HTMLでメルマガを作成しよう！これだけは最低限知っておきたいタグと装飾14選｜ferret
　　

テンプレートを活用する

自分で1からHTMLメールを作成するには、ある程度のコーディングスキルが必要です。
そこで便利なのが、HTMLメルマガのテンプレートです。

ブログサービスなどのように、「B」をクリックしたら太字になるなど、ワープロソフトを利用する感覚でスキルに自信が無くとも簡単に装飾できます。

レイアウトのデザインも複数用意されているテンプレートもあるため、ドラッグ アンド ドロップで直感的に作れるテンプレートもあります。自社の商材がBtoC向けであれば商材写真を視覚的にわかりやすく配置するなど、企業のトンマナにデザインに仕上げることができます。

また、テンプレートを活用することで、デザイン制作の工数を大幅に削減することができます。特に、配信回数が限られている短期的なキャンペーンメールなどであれば、テンプレートを活用し効率的に配信することができるでしょう。

参考：
デザインいらず！誰でも簡単にオシャレなHTMLメルマガを配信できるテンプレート25選｜ferret
　　

オシャレなHTMLメールマガジンを紹介している記事10選

1. 海外の素晴らしいEメールデザイン厳選9例

[海外の素晴らしいEメールデザイン厳選９例]

インバウンドマーケティング向けのプラットフォームを提供するHubSpotの企業ブログの記事です。

スターバックスやUber、J.Crewのような海外企業が配信しているメルマガの事例が掲載されています。

大胆なデザインや配色のデザインなどが掲載されているため、既存のメールテンプレートではなく自社ならではの要素をデザインに取り込みたいと検討しているのであれば参考にしてみましょう。
　　

2.【HTMLメール紹介】「メールマガジンを改善したい」方必見。業種別で見るメールデザイン事例まとめ12選+番外編

【HTMLメール紹介】「メールマガジンを改善したい」方必見。業種別で見るメールデザイン事例まとめ12選+番外編 - Benchmark Email マーケティングブログ

メールを活用したマーケティング施策を改善したいという方に向けて、HTMLメール（メルマガ）を業種別に紹介している記事です。

ピックアップしているのはオリジナルTシャツ作成通販サイト「Tmix」、オンライン学習サイト「Schoo」、レストラン「パスタソースキッチン」を含む、全12デザインです。

各メールのポイントを紹介していますので、具体的にどういった点を参考にすべきか、どんな点が優れているかがわかります。また、国内事例のピックアップですので、参考にしやすいという点もポイントでしょう。
　　

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

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

マーケティング、WordPess、Appleなどの情報を配信する「WEBマスターの手帳」の記事です。
著者の手元に実際届いたメルマガを参考例として挙げています。

「CAMPFIRE」、「Adobe」、「ブレーン（宣伝会議）」、「Sumally」といった1度は聞いたことがあるであろうサービスのメルマガばかりです。

1つひとつデザインの特徴や画像の位置、レイアウトについてのコメントもありますので、レイアウトを考えるときには特に参考になる記事となっています。
　　

4. 読まれるには理由がある！参考にしたいHTMLメール事例14選

読まれるには理由がある！参考にしたいHTMLメール事例14選 | Tech2GO

プログラミング初心者向けメディア「Code部」の記事です。

参考にすべきメルマガの事例とともに、どのような業界と相性がいいか、その特徴は何かをまとめています。

全部で5つのカテゴリ、14個の事例を見ることが可能です。マガジン内で使用されている画像の中身や記載内容、リンクやテキスト量といった細部まで紹介しています。

開封率、読んでもらうためのテクニックを盗むことができる内容となっていますので、本格的にデザインを検討する場合には特に見ておきたい記事となっています。
　　

5. 絶対見ておきたい国内有名企業のHTMLメール事例まとめ

ASCII.jp：絶対見ておきたい国内有名企業のHTMLメール事例まとめ (1/3)

Webを仕事にする人に向けた情報メディア「ASCII.jp×WEB PROFESSIONAL」の記事です。
ファッション、インテリア、小売、旅行、ITといった様々なジャンルの国内HTMLメルマガをまとめて紹介しています。

有名な企業のものばかり揃うのが特徴的です。
また、どのような情報が掲載しているか、見せ方をしているかについても詳しく解説しています。
　　

6. マネしたくなる海外企業の美しいHTMLメールまとめ

ASCII.jp：マネしたくなる海外企業の美しいHTMLメールまとめ (1/2)

Web業界で働く人のための情報メディア「ASCII.jp×WEB PROFESSIONAL」の記事です。
海外企業が発行している、美しくてオシャレなHTMLメルマガだけをまとめて紹介しています。

「ファッション／アパレル」カテゴリからはBurberry、Chanelなど。

「小売」カテゴリからはAmazon.com、PEPSIといずれも先進的な有名企業ばかりです。

見た目の美しさはもちろん、内容・構成もかなりこだわっているものばかりですので、これまでHTMLメールで成果が出ていない企業や見た目のクオリティを上げたいという企業にオススメの内容です。
　　

7. レスポンシブHTMLメールデザイン海外事例10選

レスポンシブHTMLメールデザイン海外事例10選 | メルラボ

メールを使ったマーケティングに関する情報を届ける「メールマーケティングラボ」の記事です。
今国内で普及しているスマートフォンに対応した、レスポンシブEメールデザインの事例をピックアップして10点紹介しています。

宅配ピザの「Domino’s」、アパレルブランドの「Asos」ほか優れた海外デザインのみを集めています。レスポンシブ対応のポイントや各デザインの特徴的な部分もあわせて紹介しているので、これからのHTMLメルマガのデザインに大変参考になります。

また、PC表示とスマートフォン表示両方のイメージを見ることが可能です。
　　

8. 購買意欲を刺激する！印象的なHTMLメルマガ10選

購買意欲を刺激する！印象的なHTMLメルマガ10選 | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

面白法人カヤックが運営する「KAYAC DESIGNER'S BLOG」の記事です。

毎週ネットショップのHTMLメルマガを作っていて、ほかのショップのメルマガもたくさん読んでいるという著者が、メルマガのデザインをまとめたものとなっています。

靴下専門店「Tabio」、「ニッセン」など生活雑貨やアパレル関連の国内メルマガ事例12個を見ることが可能です。

これらジャンルのネットショップ運営者には特に参考になる記事です。
横幅サイズ、HTMLメルマガの構成も掲載している点がユニークです。
　　

9. デザイナーのインスピレーションを刺激する！ 海外のオシャレなHTMLメルマガ20選【スマホ版】

[デザイナーのインスピレーションを刺激する！ 海外のオシャレなHTMLメルマガ20選【スマホ版】 | Find Job! Startup]
スタートアップに役立つ情報を発信する「Find Job! スタートアップ」の記事です。
海外のハイセンスでオシャレなHTMLメルマガ事例を20個紹介しています。

「Kate spade」、「TIFFANY&Co.」といった人気ブランドから「flickr」のような有名サービス、ファーストフードの「DairyQueen」まで幅広い業種の事例を見ることが可能です。

1つひとつの解説は少ないものの、海外ならではのデザインをたくさん見ることができる内容となっています。

ユニークな事例も揃っていますので、ほかとは違うデザインをしたいと思ったときにオススメです。
　　

10.グっと来たデザイン系メールマガジン3選

グっと来たデザイン系メールマガジン3選 (フェンリル | デベロッパーズブログ)

アプリ、Webサービス開発を行うフェンリル株式会社 デベロッパーズブログの記事です。
デザイン系HTMLメルマガを3つ紹介している、というユニークな事例記事となっています。

配信のタイミングや回数、配信内容、デザインを詳しく紹介しています。

ネットショップ系メルマガとは異なる部分も多いので、新たな発見を得ることができる内容です。
　　

まとめ

以上、 HTMLメルマガのデザインの参考になる記事をまとめてご紹介しました。

HTMLメルマガは画像で見せることができるため、ユーザーに大きなインパクトを与えることができます。

多数の事例があるように、アパレルなどのネットショップにおいては特に効果的な手法ですが、Webサービス、IT、旅行関係などそのほかの業種においても活用できる販促です。

商品の販売以外にも色々な訴求ができますので、現在HTMLメルマガをマーケティングに使っていない企業は、この機会に導入を検討してみてはいかがでしょうか。

ほかの企業がどのようなデザインで配信しているかを確認し、自社のデザインに取り入れてみてください。