様々な画面サイズにワンソースで対応するレスポンシブ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
-
株式会社キャンビー様:さぶみっと!レコメンドご利用事例
-
タグ: エンジニア採用, キャリア採用, コミュニケーション, コラム, ブログ, リモートワーク, ワーケーション, 文化, 環境
2025年5月の募集職種一覧!ビジネス職を中心に採用強化中!|株式会社イー・エージェンシー公式note -
タグ: エンジニア募集, オウンドメディア, コラム, ビジネス職, リモートワーク, レコメンドエンジン, 中途採用, 働きやすい環境, 採用強化, 社内文化, 翻訳ツール
【オープン社内報 2025年5月号】イー・エージェンシー プレミアムニュース -
タグ: AIトランスフォーメーション, AI音声生成, Google Workspace, Notebook LM, gemini, イー・エージェンシー, コラム, ポッドキャスト化, 広報DX, 生成ai, 社内コミュニケーション, 社内コンテンツ活用, 社内ブログ活用, 自動音声要約, 音声メディア
「10分で“読む資料”が“聴くコンテンツ”に!」──Notebook LMの新機能を遊んでみた話|株式会社イー・エージェンシー公式note -
タグ: Webサイト多言語変換サービス, shutto翻訳, コラム, 事例紹介
株式会社明石工業様:shutto翻訳ご利用事例 -
タグ: Webサイト多言語変換サービス, shutto翻訳, コラム, 事例紹介
株式会社崎陽軒様:shutto翻訳ご利用事例