【スマホ時代の必須課題】海外事例に学ぶレスポンシブEメールデザイン10選

もはやスマホ対応は喫緊の課題

長らく”スマホ後進国”と呼ばれてきた日本ですが、その実この1~2年で急速に普及が進んでいると言われています。総務省の調査によると、平成24年度末時点でスマートフォンの普及率は49.5%（前年比68.9%増）であり、特に10代20代においては既に従来型携帯電話（いわゆる”ガラケー”）を上回るそうです。

参考：平成24年通信利用動向調査（総務省）

このため、Web上でマーケティング活動を行う企業にとってスマートフォンへの対応はまさに”喫緊の課題”であり、メールマーケティングもまたその例外ではありません。今回はスマートフォン対応のHTMLメール”レスポンシブEメールデザイン”について、日本より一足早く”スマホ時代”を迎えている海外の事例をご紹介します。

＊以下の記事はEcausultancyに許可をいただき、「Responsive email design: 10 great examples」を加筆・修正したものです

モバイルによるメールの開封率が50％に

2013年10月、Litmus（ボストンに所在する大手メールサービスプロバイダー）はモバイル（スマートフォン・タブレット）からHTMLメールを開封する人が全体の47％に達したことを明らかにしました。また、同調査では年末までにはこの割合が50%に達すると予測しています。

＊参考：Mobile Opens Hit Record High of 47%

このことからも、メールマーケティングおいてスマートフォンやタブレットへの最適化がさらに進むことは想像に難くありません。後ほどご紹介するExpedia（ワシントンに所在する大手旅行代理店）やPlaystationの例はモバイルにどのように対応すべきかということを考えるうえで大変参考になるでしょう。

最近では、単なる見た目の最適化に留まらず、例えば”スマートフォンでメールを閲覧する場合にのみApple App StoreやGoogle Playのアイコンを表示する”といったコンテンツの最適化を行う企業もあらわれましたが、今後このような流れはさらに加速しそうです。

以下に、最近私が目にした中で最も優れたEメールデザインを10点紹介しましょう。

レスポンシブEメールデザインのポイント
・テキストや画像のサイズ
・テキストや画像のレイアウト
・ナビゲーションの配置
・アプリやソーシャルへの導線
・Click-to-Callの導線
・Click-to-Actionのデザイン

01. Domino’s

宅配ピザ「Domino’s」の事例です。テキストサイズが最適化され、さらにスマートフォンで閲覧した場合にFacebookやTwitterへの導線を強調されている点にも注目です。

02. Asos

アパレルブランド「Asos」の事例です。商品画像のレイアウトがデバイスごとに最適化されています。またスマートフォンで閲覧した場合はナビゲーションが下部に表示されるようになっていますね。これは各商品ページへの遷移を促すためと考えられます。

03. Expedia Cruise Ships

旅行代理店「Expedia Cruise Ships」の事例です。こちらもスマートフォンで閲覧した場合はナビゲーションが下部に表示されるようになっていますね。

04. Expedia

旅行代理店「Expedia」の事例です。PC・タブレット・スマートフォンそれぞれに最適化されていますね。またスマートフォンで閲覧した場合は、メール上部にApple App StoreやGoogle Playへの導線が表示されるようになっていますね。非常に効果的だと思います。

＊以下、スマートフォンで表示した場合のイメージ

05. Harvey Norman

家電量販店「Harvey Norman」の事例です。スマートフォンで閲覧した場合に、ヘッダー画像を小さくすることで、キャンペーン（「WIN $1,000」の箇所）がより強調されるようになっていますね。

06. Joy the store

アパレルショップ「Joy the store」の事例です。商品画像のレイアウトが最適化されている点は上記の「Asos」と同様です。こちらではさらに、スマートフォンで閲覧した場合にページ下部にClick -to-Call（ワンクリックで電話をかける）のボタンが配置されています。

07. Map My Run

フィットネス用品「Map My Run」の事例です。スマートフォンで閲覧した場合に、Click-to-Action（購買を喚起する導線、ここでは「Buy Now」）を強調することで購買へと繋げる工夫がされています。

08. Mr Porter

メンズアパレルブランド「Mr Porter」の事例です。スマートフォンで閲覧した場合は、上部に商品画像が表示されるようにレイアウトの変更が行われていますね。

09. Mulberry

アパレルブランド「Mulberry」の事例です。スマートフォンで閲覧した場合には、大胆な1カラムのレイアウトを採用することで商品を魅力を損なうことなく訴求していますね。

10. Playstation

最後は「Playstation」の事例です。Playstation4のリリースと関係があるのかもしれませんが、こちらのメールのヘッダーには4種類ものバリエーションがあります！

＊以下、メールヘッダーのバリエーション

いかがでしたか。上記の事例を参考に、ぜひレスポンシブEメールデザインにチャレンジしてみてくださいね！（執筆：Andrew King、翻訳／編集：陶山 大介）

＊本記事はEcausultancyに許可をいただき、「Responsive email design: 10 great examples」を加筆・修正したものです

＜原文著者＞
Andrew King
senior strategy consultant at Lyris. Andrew consultants with a variety of clients on their email strategy, design, mobile optimization, testing, segmentation, and much more.

関連記事：思わず回答したくなる！Webアンケート依頼メールの書き方まとめ

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

メルラボ編集部

「Mail Marketing Lab（メルラボ）」編集部。メールマーケティングの効果を上げるためのさまざまな情報を発信します。

最新記事 by メルラボ編集部 (全て見る)

• カスタマーサクセスのメール業務を効率化する秘訣とは？ 2つのツールをご紹介！ - 2024年3月29日
• Gmailの「ワンクリック解除」とは？2024年6月までに対応必須！ - 2024年3月14日
• 「CS」は何の略？ビジネスシーンで使われる3つの意味を解説！ - 2024年2月27日