様々な画面サイズにワンソースで対応するレスポンシブ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年9月号】イー・エージェンシー プレミアムニュース -
タグ: エンジニア採用, キャリア採用, コミュニケーション, コラム, ブログ, リモートワーク, ワーケーション, 採用情報, 文化, 環境
2025年9月の募集職種一覧!ビジネス職を中心に採用強化中!|株式会社イー・エージェンシー公式note -
タグ: Cloud Shell構築, GA4, GA分析自動化, Gemini CLI, Google アナリティクスMCP, LLM連携, コラム, データ対話型分析, モデルコンテキストプロトコル, 自然言語分析
2025年7月発表!自然言語でGA4を分析できる「Google アナリティクスMCPサーバー」を構築する方法 -
タグ: AIエージェント, GA360, Gemini in Looker, Google Cloud Next, Next Tokyo, Vertex AI Search, イベントレポート, コラム, データ分析高度化, データ利活用, 検索体験向上, 生成AI活用
【Next Tokyoレポート】主役は生成AI!GA360×生成AIの最新活用法を紹介 -
タグ: ASEAN展開, Direct Engine, インドネシア, オフショア開発, グローバル協業, コラム, ジャカルタ, スラバヤ, ビジネス熱気, ファンデザイン室, 出張レポート, 文化共存
【出張レポート】インドネシアで見た、熱気と未来への可能性|株式会社イー・エージェンシー公式note -
タグ: AI実証実験, AI高速処理, ECサイトパーソナライズ, Groq API, HTML自動生成, UX最適化, Web制作, コラム, リアルタイムAIパーソナライズ, 技術進化
【ウェブ制作】AIを使ってウェブサイトをリアルタイムにパーソナライズしてみたい!|株式会社イー・エージェンシー公式note