様々な画面サイズにワンソースで対応するレスポンシブWebデザインは、多くのサイトで使用されていますが、HTMLメールをレスポンシブ対応するにはどうしたらいいのでしょうか? Webサイトの場合、ブラウザで表示しますが、メールは、メーラーで表示します。メーラーは、CSSのサポート対応状況がブラウザと異なる為、従来のレスポンシブWebデザインのテクニックをそのまま流用する事は出来ません。
では、どのようにHTMLメールをレスポンシブ対応させるのか、その方法のひとつをご紹介いたします。
HTMLメールをレスポンシブ対応させる方法
まず、HTMLメール制作の基本的なポイントは「HTMLメールの制作時に気をつけたい9つのポイント | コリス」でご確認いただければと思います。
主要メーラーごとのCSSサポート状況を「Guide to CSS support in email | Campaign Monitor」で確認しますと、Outlook2007やGmailは、一部のCSSしか対応していません。 なお、iOSのメールアプリは、Media Queriesと多くのCSSが使用できますが、AndroidのGmailはインラインCSSしかサポートしておらず、Media Queriesが使用できません。Media Queriesが使用できない場合は、PC表示と同じ表示になる前提とします。
[PR]最大64%値下げしました!月額900円ではじめるメール配信ASP | さぶみっと!メール配信
レスポンシブHTMLメール作成のポイント
1. 旧式のテーブルレイアウトを使用するが、「列」は使用しない
→1つのtrにつき、tdが1つ。
2. tableの属性『align』と、CSSのMedia Queriesを使用して、レイアウトする
PC表示時にブロックを横並びさせる時は、tableの属性『align』を使用して回り込みをさせ、スマートフォン表示時には、tableのalign属性による回り込みをCSSを使用して解除します。
画像も同様にPC表示時には、HTMLのタグの属性『width』と『height』でサイズを指定し、スマホ表示時は、CSSでMedia Queriesを使用してサイズを変更します。
■サンプルコード■
<html> <br /> <head> <br /> <style type="text/css"> <br /> @media only screen and (max-width: 630px) { /* 630px以下のスマートフォン用の記述 */ <br /> table.table-block { <br /> width: 100% !important; <br /> margin: 0 0 20px !important; <br /> } <br /> table td img.images { <br /> width="100%" !important; <br /> height="auto" !important; <br /> } <br /> } <br /> </style> <br /> </head> <br /> <body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"> <br /> <table border="0" cellpadding="0" cellspacing="0" width="600"> <br /> <tr> <br /> <td> <br /> <table class="table-block" align="left" border="0" cellpadding="0" cellspacing="0" width="300"> <br /> <tr> <br /> <td><img class="images" src="http://sample.com/images/sample.png" width="300" height="150"></td> <br /> </tr> <br /> <tr> <br /> <td>コンテンツが入る</td> <br /> </tr> <br /> </table> <br /> <table class="table-block" align="right" border="0" cellpadding="0" cellspacing="0" width="300"> <br /> <tr> <br /> <td>コンテンツが入る</td> <br /> </tr> <br /> </table> <br /> </td> <br /> </tr> <br /> </table> <br /></body> <br /></html> |
ちなみにCSSを使用する場合は、HTMLメール用にインラインCSSを生成してくれる『HTML email inline styler』などのサービスを利用すると便利です。
テンプレートが出来ましたら、OutlookからWEBベースまで様々なメールクライアントでの表示を確認出来るサービス『Email Testing and Email Marketing Analytics – Litmus(有料)』で確認すると安心です。
メールは、受信者のシチュエーションにより、同じメールを様々な端末で閲覧される事が想定され、メールアドレスごとに最適化されたメールを送ることは困難です。PC向けのHTMLメールを自動的にスマートフォン対応されるようにレスポンシブのテンプレートを作る事で、一部スマートフォンが対応可能となります。
通常のPC用HTMLメールに、ひと手間を加える必要はありますが、複数列表示されている商品画像などが1列表示になり、画像が大きくなるだけでもクリック率等に変化があるのではないかと思います。ぜひ、お試しください。
PICK UP
-
タグ: CVランキング, ECマーケティング, Shopify, Shopifyアプリ連携, ecサイト構築, refactory, さぶみっと!レコメンド, コラム, レコメンドエンジン, 売上向上, 導入事例, 販売代理店
株式会社refactory様『さぶみっと!レコメンド』をShopify上に国内初導入&販売代理店契約を締結 -
タグ: エンジニア募集, オウンドメディア, コラム, ビジネス職, リモートワーク, レコメンドエンジン, 中途採用, 働きやすい環境, 採用強化, 社内文化, 翻訳ツール
【オープン社内報 2025年7月号】イー・エージェンシー プレミアムニュース -
タグ: エンジニア採用, キャリア採用, コミュニケーション, コラム, ブログ, リモートワーク, ワーケーション, 文化, 環境
2025年7月の募集職種一覧!ビジネス職を中心に採用強化中!|株式会社イー・エージェンシー公式note -
タグ: BIツール, GMP, Google Cloud, Looker Studio, Looker Studio Pro, コラム, データ分析, データ可視化, レポート自動化, 生成ai
【比較表あり】有料版Looker Studio Proと無料版の違いを徹底解説!導入で気をつけるべき3つのポイント -
岩崎人形総本店様:さぶみっと!レコメンドご利用事例
-
タグ: BigQuery, Eight EXPO, GA360, Google Cloud, Google アナリティクス 360, UX改善, Vertex AI Search for Commerce, イー・エージェンシー, コラム, データ活用, マーケティングDX, マーケティング支援, 営業DX, 展示会レポート, 生成ai
イベントレポート「Eight EXPO」に出展!営業マーケDXの熱い2日間