
スマートフォンの普及とともに、ウェブサイトのスマホ対応は必須の時代になりました。ウェブサイトだけでなく、メールマガジンやニュースレターでもスマホ対応しているところは多くなりましたね。
特にHTMLメールの場合に、PCで見た時と同じデザイン(レイアウト)では、見づらいこともあります。ではHTMLメールのスマホ対応をするときに、どんなデザインがいいのでしょうか?
今回は、ECサイトが配信しているメールマガジンの中からスマホ対応していて、デザインの参考になるHTMLメール形式(画像付き)のメールマガジンを厳選してご紹介したいと思います!
目次
伊勢丹
伊勢丹オンラインショップのメールマガジンは、項目ごとに色が統一されているので、とてもわかり易く見やすいデザインになっています。また画像のサイズでもメリハリがあって、さらに見やすいですね。
三越
三越のメールマガジンも色使いが素晴らしいですね。統一感のある色使いで見やすいだけでなく、季節も感じることができますね。
MoMA STORE
ニューヨーク近代美術館(MoMA)が運営するオンラインショップのメールマガジンです。「グッドデザイン」を提唱しているだけあって、シンプルで完結なデザインです。スクロールすることなく読めるのも印象的です。
ベルメゾン
ベルメゾンネットのメールマガジンです。ファッションやスイーツ、家具、生活雑貨など取り扱っている商品の幅が広いので、各メールごとにデザインも様々なのですが、Gif画像が使われていることもあったりと参考になります。
無印良品
無印良品のメールマガジンは、シンプルなデザインですね。画像がメインに使われていますが、テキストが最低限に抑えられているので、とても見やすいです。
ZARA
ZARAのメールマガジンは画像のみ!テキストは全くありません!画像もおしゃれな写真が使われていて、ZARAらしさを感じます。
ZOZOTOWN
ZOZOTOWNのメールマガジンでは、左側にサムネイル右側にタイトルと並べられていたり、商品画像を横に並べていたりと、表示スペース内(ワンスクロール内)でより多くの情報を伝えるデザインになっています。
BUYMA
BUYMAのメールマガジンもシンプルですね。商品写真もちょうどいいサイズで見やすいです。金額が赤字で目立っているのも分かりやすくていいですね。
ENOTECA オンラインショップ
ENOTECA オンラインショップのメールマガジンは、「本日のトピックス」では、テキスト形式のメールマガジンの雰囲気を残しつつ、バナー画像などで見せていますね。メールの最後にはバナー画像がギッシリ並んでいて、商品の豊富さも伝わってきます。
出前館
【出前館】ピザ・寿司・カレー・中華などの宅配デリバリーサイト
出前館のメールマガジンは、ウェブサイトのようなデザインになっています。画像も写真を載せるだけでなく、バナー画像も使うことで全体的にインパクトがあります。
最後に
こちらでご紹介したメールはどれもブランドイメージやウェブサイトとデザインの統一がされているのがわかります。
またテキストよりも画像の割合が多く、おしゃれな写真や綺麗な写真が使われているので、テキストを読むというよりも見て楽しめるメールマガジンが多いのがECサイトの特徴ではないでしょうか。
また海外のECサイトのメールマガジンではいち早くGIF画像を取り入れているものもよく目にするようになっています。
情報(特にテキスト)を詰め込みすぎずてしまうと、スマホ画面では見づらい、読みづらいメールマガジンになってしまいますが、シンプルに目で見て伝わるデザインにすることで、スマホで読んでいる人にとって、見やすいメールマガジンとなっていますね。
今回紹介したもの以外にもいろいろなECサイトが様々なHTMLメールを発行しています。自社のメールマガジンの参考になるように、競合他社だけでなく、業種や商材にこだわらずにメールマガジンを購読してみてください。きっといい気づきが得られると思いますよ。
ECサイト活用事例:
【事例】メルマガ配信で週末の売り上げが変わる!fog linen workのメールマガジン施策
関連書籍のご紹介
スマホ対応のメールデザインについてさらに詳しくお知りになりたい方には、こもりまさあき氏著、「レスポンシブEメールデザイン」がおすすめです。
こちらではメールマーケティングのスマートフォン対応についてわかりやすく解説されています。また本書ではデザインに加え、効果測定方法についても触れられています。
「スマホに対応した綺麗なメールを作成したい」「テキストメールからHTMLメール配信に切り替えたい」このようなお悩みを抱えている方に、明日配信するメールからすぐ活用できる情報が満載です。
スマホ関連記事:
・スマホでも見やすい、高い反応を得るメールの書き方テクニック
・マルチパート配信を使ってメール到達率を上げる、HTMLメール配信活用法
デザインの参考になるメールマガジンを以下のブログでも多くご紹介しています。
・Webメディアから学ぶ!オウンドメディアのニュースレター向けHTMLメールデザイン17選
・HTMLメールマガジンの参考になるイケてるデザイン13選