様々な画面サイズにワンソースで対応するレスポンシブ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
-
タグ: googlecloud, looker, アプリ開発, カスタマーレビュー, グローバルビジネス, ケーススタディ, コラム, デジタルマーケティング, データ分析, ニュース, パナソニック
イー・エージェンシー支援事例がGoogle Cloud Japan 公式ブログに掲載 -
タグ: BigQuery, google analytics, o2o, コラム, データ統合, マーケティング分析
オンライン・オフラインを横断すると成果がわからない…マーケティング施策の成果を追う方法 -
タグ: itreviewアワード, shutto翻訳, ウェブサイト翻訳, クラウドサービス, コラム, ニュース, リーダー賞, 顧客満足度
ITreview Grid Award 2024 Summerにて、ウェブサイト翻訳ツール部門で「Leader」を5年連続で受賞しました! -
タグ: eコマース, itreviewアワード, カゴ落ち対策, クラウドサービス, コラム, ニュース, 顧客満足度
ITreview Grid Award 2024 Summerにてカゴ落ち対策カテゴリー部門で「High Performer」を受賞しました! -
タグ: エンジニア採用, コミュニケーション, コラム, ブログ, 文化
AIを活用してnoteの記事を点数化する方法:ページビューやスキの数だけではない質重視のコンテンツ分析 -
タグ: BigQuery, GA4, GoogleMarketingPlatform, Googleアナリティクス, コラム, ニュース
イー・エージェンシーが9期連続で「Leader」受賞! ITreview Grid Award 2024 Summer(Google Marketing Platform導入パートナーカテゴリー)