様々な画面サイズにワンソースで対応するレスポンシブ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
-
タグ: BigQuery, GA4, GoogleMarketingPlatform, Googleアナリティクス, コラム
【資料】GA4無料版をご利用の方必見! GA4導入後のよくあるお悩みと解決方法8選 -
タグ: ASEAN越境EC支援, Webサイト多言語変換サービス, shutto翻訳, クラウドサービス, コラム, ニュース
shutto翻訳、Webサイト翻訳部門で「Leader」を5年連続受賞!- ITreview Grid Award 2024 Winter -
タグ: CART RECOVERY, カゴ落ち対策, カートリカバリー, クラウドサービス, コラム, ニュース
CART RECOVERY、カゴ落ち対策部門で「High Performer」を受賞!- ITreview Grid Award 2024 Spring -
タグ: CART RECOVERY, カゴ落ち対策, カートリカバリー, クラウドサービス, コラム, ニュース
ECサイトの構築方法5選! 特徴と選び方を解説 -
タグ: コミュニケーション, コラム, ブログ, リモートワーク, ワーケーション, 文化, 環境
有楽町 森の本社オフィスのVR紹介記事がメディアに掲載されました!|公式note -
タグ: CART RECOVERY, カゴ落ち対策, カートリカバリー, クラウドサービス, コラム, ニュース
ECサイトとは? 役割と必要な機能・サイトの種類についてわかりやすく解説