レスポンシブデザインで参考になるメルマガデザイン事例紹介!

2019.05.15

2019.05.15

デザインやってますY2です。僕がおすすめするレスポンシブデザインで参考になるメルマガのデザインを紹介したいと思います。

また、PC版のデザインとスマホ版でのデザイン画像もリンクを貼っておきますのでご覧ください。

最近ではスマホで見ることをはじめから意識してPCでみてもスマホで見ても同じレスポンシブデザイン風な感じでメルマガのデザインを作成している企業も多いです。そちらは今度ご紹介します!

ELLE SHOP.jp


1945年に創刊された、フランスの女性ファッション雑誌『ELLE』が行っているECのメルマガです。

画像のクオリティもよく、スマホでもとても見やすいデザインになっています。王道的なレスポンシブデザインですが、こういった基本に忠実なデザインは需要(見やすい)があるからこそお手本にしたいものです。

メンズもあります。男女で分かりやすくピンクとブルーの背景で分けているところも視覚的に分かりやすく、ここも基本的なデザインとして参考になると思います。

WOMEN PC版  スマホ版
MENS PC版  スマホ版

日本経済新聞

日本経済新聞社が配信している「日本経済新聞」は、日経電子版アプリで情報を見てもらうために行っているメルマガです。

このメルマガは見た目のデザインというよりは、スマホで見た時に各記事のサムネイルの右にスマホマークのアイコンが出てくるのです。そこをタップすると日経電子版アプリが起動する仕組みになっています。

デザインは見た目ではなく機能的なところもデザインの1つとして考えるのが大切です。ユーザーにとって考えられているメルマガだと思います。

PC版  スマホ版

Francfranc

インテリアや雑貨の販売やコーディネートなど、幅広く事業を手掛ける「Francfranc」が行っているECのメルマガです。

ELLE同様に写真のクオリティが高いのでとてもおしゃれです。商品の切り抜き画像などを配置しており、タップするとそのままECサイトへ誘導しています。もはやメルマガがECサイトのような機能になっています。

また、デザインではないですがメルマガ会員限定でオリジナルの待受画像をプレゼントしているのもスマホを意識した現代の施策だと思います。

PC版  スマホ版

inVision

アプリやホームページのプロトタイピングを複数人で効率的に作成することができるWebサービス「InVision」が行うメルマガです。主にサービスに関するブログに誘導しています。

海外のサービスなので、英語のメルマガです。デザインに関係する会社なので掲載している画像のグラフィックなどがとてもおしゃれです。サムネイルにGIFアニの画像を設置するなどお手本になりますね。PC版だと各サムネイルにマウスオーバーをすると画像の左下が折り曲がるなど遊び心が満載なメルマガなのでそういった楽しげなところをお手本にしたいものですね。

PC版  スマホ版

まとめ

少しタイプの違うメルマガデザインを紹介しました。いまでは当たり前になったレスポンシブデザインですが、基本のデザインはどこもそこまで変わらないと思います。大切なのはユーザーを意識した見やすい、使いやすいことや遊び心やコンバージョンに繋げられるようなデザインを心がけるということが大切だと思います。

みなさんもそういった点に気をつけてメルマガのデザインをしてみてはいかがでしょうか?

それでは、「HTMLメールで豊かなコミュニケーションがうまれますように!」

ページトップ