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

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

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

伊勢丹

伊勢丹のメルマガ伊勢丹のメルマガ2

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

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

三越

三越のメールマガジン三越のメールマガジン2

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

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

nano・universe

nano・universenano・universe2

ナノ・ユニバース直営通販サイト総合nano・universe LIBRARY

nano・universeのメールマガジンでは、画像が大きく使われています。以前にBenchmarkEmailブログでも紹介した「GIF画像」も使われているので、見ていて楽しいです!

MoMA STORE

MoMA STOREのメールマガジン

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

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

ベルメゾン

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

ベルメゾンネット

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

無印良品

無印良品無印良品2

無印良品ネットストア

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

ZARA

ZARAZARA2

ZARA Japan

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

ZOZOTOWN

ZOZOTOWNZOZOTOWN2

ファッション通販ZOZOTOWN

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

BUYMA

BUYMAのメールマガジンBUYMAのメールマガジン2

BUYMA.com

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

Fred Perry

Fred PerryのメールマガジンFred Perryのメールマガジン2

FRED PERRY JAPAN

Fred Perryのメールマガジンは、テキストがほとんどありません。画像にもテキストが含まれていないので、ほぼ読むところがありません。商品に目がいくので、まさに目で見るメールマガジンですね。

ENOTECA オンラインショップ

ENOTECA オンラインショップENOTECA オンラインショップ2

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

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

出前館

出前館出前館2

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

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

最後に

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

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

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

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

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

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

関連書籍のご紹介

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

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

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

スマホ関連記事:
・ガラケーとスマホに向けたHTMLメール配信と便利なマルチパート配信について
スマホでも見やすい、高い反応を得るメールの書き方テクニック
マルチパート配信を使ってメール到達率を上げる、HTMLメール配信活用法

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