-HTMLメールハッカー-メルマガ担当者のブログCategory記事一覧デザインノウハウシステム・ツール記事一覧デザインノウハウシステム・ツールdesignレスポンシブデザインで参考になるメルマガデザイン事例紹介!2019.05.15design2019.05.15デザインやってますY2です。僕がおすすめするレスポンシブデザインで参考になるメルマガのデザインを紹介したいと思います。PC版のデザインとスマホ版でのデザイン画像もリンクを貼っておきますのでご覧ください。最近ではスマホで見ることをはじめから意識してPCでみてもスマホで見ても同じレスポンシブデザイン風な感じでメルマガのデザインを作成している企業も多いです。SHOP.jp1945年に創刊された、フランスの女性ファッション雑誌『ELLE』が行っているECのメルマガです。画像のクオリティもよく、スマホでもとても見やすいデザインになっています。王道的なレスポンシブデザインですが、こういった基本に忠実なデザインは需要(見やすい)があるからこそお手本にしたいものです。男女で分かりやすくピンクとブルーの背景で分けているところも視覚的に分かりやすく、ここも基本的なデザインとして参考になると思います。配信している「日本経済新聞」は、日経電子版アプリで情報を見てもらうために行っているメルマガです。このメルマガは見た目のデザインというよりは、スマホで見た時に各記事のサムネイルの右にスマホマークのアイコンが出てくるのです。そこをタップすると日経電子版アプリが起動する仕組みになっています。デザインは見た目ではなく機能的なところもデザインの1つとして考えるのが大切です。ユーザーにとって考えられているメルマガだと思います。スマホ版Francfrancインテリアや雑貨の販売やコーディネートなど、幅広く事業を手掛ける「Francfranc」が行っているECのメルマガです。ELLE同様に写真のクオリティが高いのでとてもおしゃれです。商品の切り抜き画像などを配置しており、タップするとそのままECサイトへ誘導しています。メルマガがECサイトのような機能になっています。デザインではないですがメルマガ会員限定でオリジナルの待受画像をプレゼントしているのもスマホを意識した現代の施策だと思います。スマホ版inVisionアプリやホームページのプロトタイピングを複数人で効率的に作成することができるWebサービス「InVision」が行うメルマガです。サービスに関するブログに誘導しています。海外のサービスなので、英語のメルマガです。デザインに関係する会社なので掲載している画像のグラフィックなどがとてもおしゃれです。サムネイルにGIFアニの画像を設置するなどお手本になりますね。PC版だと各サムネイルにマウスオーバーをすると画像の左下が折り曲がるなど遊び心が満載なメルマガなのでそういった楽しげなところをお手本にしたいものですね。スマホ版まとめ少しタイプの違うメルマガデザインを紹介しました。いまでは当たり前になったレスポンシブデザインですが、基本のデザインはどこもそこまで変わらないと思います。大切なのはユーザーを意識した見やすい、使いやすいことや遊び心やコンバージョンに繋げられるようなデザインを心がけるということが大切だと思います。みなさんもそういった点に気をつけてメルマガのデザインをしてみてはいかがでしょうか?それでは、「HTMLメールで豊かなコミュニケーションがうまれますように!」designY2Web制作会社でデザイナーとして働いております。世の中には面白いメルマガがたくさんあったりするなぁと様々なメルマガを購読しています。正解か不正解かはおいておき、自身の考えなどを記録するためにもメルマガのデザインについて色々と考察したり、思いを綴れたらなと思います。基本的にデザイン経験者向けになりますが、非デザイナーの方でも何かしらのお役に立てれば嬉しいな!なんて思います。関連記事HTMLのメールマガジンを作って送れる評判のメルマガ配信システムメルマガのメインビジュアルってどうやって作ってるの?HTMLメールのサンプルデザインと事例まとめY2Web制作会社でデザイナーとして働いております。世の中には面白いメルマガがたくさんあったりするなぁと様々なメルマガを購読しています。正解か不正解かはおいておき、自身の考えなどを記録するためにもメルマガのデザインについて色々と考察したり、思いを綴れたらなと思います。基本的にデザイン経験者向けになりますが、非デザイナーの方でも何かしらのお役に立てれば嬉しいな!なんて思います。