HTMLメールのレスポンシブ化。

みやすい

こんにちは、藤中です。

最近、企業からの広告メールやメルマガは、ほとんどHTMLメールになりました。

パソコン用のHTMLメールをスマホで見ると、ちょっと見づらい。スマホサイトがここまで増えた今、HTMLメールもスマホ用の表示になってほしいものです。

最近、お客様からHTMLメールをレスポンシブ化して欲しいというご依頼がありました。調べてみると、HTMLメールのレスポンシブ化は一般的になりつつあり、情報もたくさん出ています。実際に制作していく中で、ネットで公開されている情報だけではうまくいかなかった箇所もあったので、まとめてみました。

今回は制作者向けの情報です。

HTMLメールのレスポンシブ化には、様々な制約があります。よく使われるメールソフトの制限を洗い出し、それを回避しながらコーディングしていきます。

コーディング時に気をつけること

  • 基本的にテーブルコーディング
    – Outlook（2007／2010／2013）がfloatに未対応
  • Media Queries（メディアクエリ）を使えるメールソフトのみ対応
  • CSSはインラインで記述するのが基本
    – Google Gmail（アプリ、Webメール）、Windows Live メールなど、<head>内のCSSに未対応のメールソフトが多い
  • 画像は絶対パス（URL）で記述
  • 同一画像を繰り返し使用しない
    – Google Gmail（Webメール）で2度目以降が表示されない。つまり、スペーサーGIFが事実上使用できない。<td width=”100″ height=”100″>で指定。
  • 画像を実サイズ以外で使う場合はインラインCSSでサイズを記述
    – Mac メールで画像が実サイズで表示される。
  • 背景画像は使用しない
    tdに背景画像を指定しても、表示されないメールソフトが多い。

主要メールソフトのCSS対応状況

ヘッダー、メタ情報

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-2022-jp">
<title>HTMLメールのレスポンシブ化</title>

DOCTYPEは古いメールソフトも対応している「HTML 4.01」、文字コードはメールで一般的な「iso-2022-jp」とします。

ヘッダー部のCSS

「CSSはインラインで記述するのが基本」と書きましたが、メディアクエリを含むCSSは<head>部に記述します。ブレークポイントは480pxで指定する場合が多いようですが、今回は余裕を持って640pxで指定してみました。

@media screen and (max-width: 640px) {
body {
  padding: 10px;
}
table {
  width: 100% !important;
  clear: both;
}
.spnone {
  display: none;
}
.fit {
  width: 100% !important;
  height: auto;
}
}

スタイルは基本的なもののみ入れています。

ボディは冗長に

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

テーブルコーディングを知っている方は懐かしい記述ですね。めんどうですが、しっかり書いてください。

段組

制作時、参考にしたサイトでは、<td>をブロック化することで、段組を解除する方法が紹介されていました。実際にやってみると、現在は段組が解除されません。（2014年10月現在）

いろんなテンプレートを参考にして、唯一段組が解除されたがこれ。

Responsive Email Templates(Playground from ZURB)

<td>ではなく、<table align=”left”>で段組を実装しています。わかってしまえば簡単ですが、見つけるまで苦労しました。

作ってみたメールは以下のようなものです。

テストメール

さて、この方法で、2段にも3段にも組めるわけですが、Outlook 2010で、<table align=”left”>を2回続けると、表と表の間に空きができます。ソース内の改行やタブを削除しても同じ。letter-spacingでも回避できません。

2段組の場合、左側をleft、右側をrightにすれば、間の余白で吸収できるので、あまり問題になりません。これが3段組以上になると問題になってきます。

3カラムの例

上はOutlook 2010で受信したメールのキャプチャ画像です。Outlookで<table align=”left”>を2回続けると、タイプ1のように想定以上に余白ができ不自然な表示になります。タイプ1の「B」は2列の表で、左に20pxの<td>を入れています。
ThunderbirdやWindows Live メール、Macのメールで上のメールを受信すると、タイプ1、2ともに表の間はきっちり20pxで表示されます。

Outlookでも正常に表示されるのがタイプ2で、2番目表を<table align=”right”>、3番目の表を<table align=”center”>にしています。表「B」「C」の順番がHTMLソースと入れ替わってしまいますが、これが一番綺麗に表示されます。

ソースコードを簡略化すると、以下のようになります。

2段組

/*1番目の表*/
<table width="310" border="0" cellpadding="0" cellspacing="0" align="left">
<tr>
<td>A</td>
</tr>
</table>
/*2番目の表*/
<table width="310" border="0" cellpadding="0" cellspacing="0" align="right">
<tr>
<td>B</td>
</tr>
</table>

3段組（タイプ2）

/*1番目の表*/
<table width="200" border="0" cellpadding="0" cellspacing="0" align="left">
<tr>
<td>A</td>
</tr>
</table>
/*2番目の表*/
<table width="200" border="0" cellpadding="0" cellspacing="0" align="right">
<tr>
<td>B</td>
</tr>
</table>
/*3番目の表*/
<table width="200" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>C</td>
</tr>
</table>

4段になると<table align=”left”>を2回続ける必要があるので、この手法では綺麗に表示するのが難しいかもしれません。Outlookで空きができることを最初から考慮し、デザイン処理で目立たなくするしかないでしょう。

画像

画像の扱いは段組に比べると簡単です。注意するのは先に書いた

  1. 画像は絶対パス（URL）で記述
  2. 同一画像を繰り返し使用しない
  3. 画像を実サイズ以外で使う場合はインラインCSSでサイズを記述

の3点だけです。高解像度端末に対応する場合、HTMLで画像を実サイズ以下に縮小して使う場合があので、3は特に注意してください。

<img src="https://nxpg.net/blog/wp-content/uploads/2014/10/20141015_001.gif" width="320" height="240" alt="" class="fit">

サンプルではスマートフォンで、画像が幅いっぱいになるよう、class=”fit”を入れています。CSSはヘッダーで指定しています。

.fit {
  width: 100% !important;
  height: auto;
}

送信テスト

ほとんどのメールソフトが、リッチテキストでの編集モードを持っていますが、自分で作ったプレーンなHTMLメールを送るのは、どのメールソフトでもできるわけではありません。
今回、Mozilla Thunderbirdで送信テストを行いました。

画像をサーバーにアップした後、「挿入」→「HTML」からHTMLソースを貼り付けて「挿入」ボタンをクリック。

HTML を挿入

「オプション」→「送信形式」→「HTML のみ」を選択。

HTML のみ

これで送信してください。

主要メールソフトでの表示

さて、上記の手法で、多くのメールソフトでHTMLメールのレスポンシブ対応ができるわけですが、完璧ではありません。
主要なメールソフトの表示をまとめてみました。

Windows
Windows Live メール ○PC表示
Mozilla Thunderbird ○PC表示（レスポンシブ対応）
Outlook 2010 ○PC表示
Mac
メール ○PC表示（レスポンシブ対応）
iPhone(iPhone5s、iOS8、メール)
メール ○スマホ表示
Gmail（アプリ） △PC表示
Android(Galaxy S2、Android 4.0.3、Eメール 4.0)
メール ○スマホ表示
Gmail（アプリ） △PC表示、「自動サイズ変更を元に戻す」を選択しなければならない場合が多い。
Webメール
Gmail ○PC表示
Outlook.com ×PC表示
Yahoo!メール ×スマホ表示、画像は下部にまとめて表示。

特に問題となるのは、「Yahoo!メール」でスマホ表示固定となることです。大画面で幅100％表示になるのは辛い。また、Android Gmail（アプリ）で、「自動サイズ変更」になっていると崩れます。

まとめ

HTMLメールのレスポンシブ化は、日本では、まだまだ大手企業が採用するケースは少ないのですが、最近はメールアドレスから端末が判別できないケースも多く、別ソースでの出し分けが困難になっています。HTMLメールのレスポンシブ化は、少しずつ普及していくのではないでしょうか。
個人的には、そろそろテーブルレイアウトは捨てたいところ。各メールソフトのレスポンシブ対応が進めば、特殊な技術は必要なくなるかもしれません。

データと参考サイト

知識・基本情報

制作方法

[HTML] カテゴリーの最新記事