スマートフォンの普及とともに、ウェブサイトのスマホ対応は必須の時代になりました。ウェブサイトだけでなく、メールマガジンやニュースレターでもスマホ対応しているところは多くなりましたね。

特にHTMLメールの場合に、PCで見た時と同じデザイン（レイアウト）では、見づらいこともあります。ではHTMLメールのスマホ対応をするときに、どんなデザインがいいのでしょうか？

今回は、ECサイトが配信しているメールマガジンの中からスマホ対応していて、デザインの参考になるHTMLメール形式（画像付き）のメールマガジンを厳選してご紹介したいと思います！

伊勢丹

伊勢丹のメルマガ2

伊勢丹オンラインストアトップ

伊勢丹オンラインショップのメールマガジンは、項目ごとに色が統一されているので、とてもわかり易く見やすいデザインになっています。また画像のサイズでもメリハリがあって、さらに見やすいですね。

三越

三越のメールマガジン2

三越オンラインストアトップ

三越のメールマガジンも色使いが素晴らしいですね。統一感のある色使いで見やすいだけでなく、季節も感じることができますね。

MoMA STORE

MoMA STOREのメールマガジン

インテリア家具・雑貨の通販 MoMA STORE

ニューヨーク近代美術館(MoMA)が運営するオンラインショップのメールマガジンです。「グッドデザイン」を提唱しているだけあって、シンプルで完結なデザインです。スクロールすることなく読めるのも印象的です。

ベルメゾン

ベルメゾンのメールマガジン2

ベルメゾンネット

ベルメゾンネットのメールマガジンです。ファッションやスイーツ、家具、生活雑貨など取り扱っている商品の幅が広いので、各メールごとにデザインも様々なのですが、Gif画像が使われていることもあったりと参考になります。

無印良品

無印良品2

無印良品ネットストア

無印良品のメールマガジンは、シンプルなデザインですね。画像がメインに使われていますが、テキストが最低限に抑えられているので、とても見やすいです。

ZARA

ZARA2

ZARA Japan

ZARAのメールマガジンは画像のみ！テキストは全くありません！画像もおしゃれな写真が使われていて、ZARAらしさを感じます。

ZOZOTOWN

ZOZOTOWN2

ファッション通販ZOZOTOWN

ZOZOTOWNのメールマガジンでは、左側にサムネイル右側にタイトルと並べられていたり、商品画像を横に並べていたりと、表示スペース内（ワンスクロール内）でより多くの情報を伝えるデザインになっています。

BUYMA

BUYMAのメールマガジン2

BUYMA.com

BUYMAのメールマガジンもシンプルですね。商品写真もちょうどいいサイズで見やすいです。金額が赤字で目立っているのも分かりやすくていいですね。

ENOTECA オンラインショップ

ENOTECA オンラインショップ2

ワイン通販エノテカ・オンライン

ENOTECA オンラインショップのメールマガジンは、「本日のトピックス」では、テキスト形式のメールマガジンの雰囲気を残しつつ、バナー画像などで見せていますね。メールの最後にはバナー画像がギッシリ並んでいて、商品の豊富さも伝わってきます。

出前館

出前館2

【出前館】ピザ・寿司・カレー・中華などの宅配デリバリーサイト

出前館のメールマガジンは、ウェブサイトのようなデザインになっています。画像も写真を載せるだけでなく、バナー画像も使うことで全体的にインパクトがあります。

最後に

こちらでご紹介したメールはどれもブランドイメージやウェブサイトとデザインの統一がされているのがわかります。

またテキストよりも画像の割合が多く、おしゃれな写真や綺麗な写真が使われているので、テキストを読むというよりも見て楽しめるメールマガジンが多いのがECサイトの特徴ではないでしょうか。

また海外のECサイトのメールマガジンではいち早くGIF画像を取り入れているものもよく目にするようになっています。

情報（特にテキスト）を詰め込みすぎずてしまうと、スマホ画面では見づらい、読みづらいメールマガジンになってしまいますが、シンプルに目で見て伝わるデザインにすることで、スマホで読んでいる人にとって、見やすいメールマガジンとなっていますね。

今回紹介したもの以外にもいろいろなECサイトが様々なHTMLメールを発行しています。自社のメールマガジンの参考になるように、競合他社だけでなく、業種や商材にこだわらずにメールマガジンを購読してみてください。きっといい気づきが得られると思いますよ。

ECサイト活用事例：
【事例】メルマガ配信で週末の売り上げが変わる！fog linen workのメールマガジン施策

関連書籍のご紹介

スマホ対応のメールデザインについてさらに詳しくお知りになりたい方には、こもりまさあき氏著、「レスポンシブEメールデザイン」がおすすめです。

こちらではメールマーケティングのスマートフォン対応についてわかりやすく解説されています。また本書ではデザインに加え、効果測定方法についても触れられています。

「スマホに対応した綺麗なメールを作成したい」「テキストメールからHTMLメール配信に切り替えたい」このようなお悩みを抱えている方に、明日配信するメールからすぐ活用できる情報が満載です。

 

スマホ関連記事：
・スマホでも見やすい、高い反応を得るメールの書き方テクニック
・マルチパート配信を使ってメール到達率を上げる、HTMLメール配信活用法

デザインの参考になるメールマガジンを以下のブログでも多くご紹介しています。
・Webメディアから学ぶ！オウンドメディアのニュースレター向けHTMLメールデザイン17選
・HTMLメールマガジンの参考になるイケてるデザイン13選