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

この記事は、2016年3月22日の記事を再編集しています。

テキスト のみのメールに比べて 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 メルマガ を マーケティング に使っていない企業は、この機会に導入を検討してみてはいかがでしょうか。

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