【備忘録】レスポンシブなメルマガの作成方法
今回案件でレスポンシブなメルマガの作成を任され、試行錯誤したので備忘録としてまとめておきます。
※本ページは広告・アフィリエイトプログラムにより収益を得ています。
作成するメルマガのレイアウト
作成したメルマガのレイアウトはシンプルに1カラムのレイアウトです。レスポンシブとは言ってもメルマガのコーディングなので、tableタグでガチガチに固めたレイアウトにしています。なのでブレークポイントでの大きなレイアウト変更は出来ません。
コンテンツと画像幅を640pxにし、ウィンドウサイズを659px以下に縮めていくことで画像も一緒に縮小して幅100%になるようなレイアウトを作成していきます。
▼PC（Gmail）スクリーンショット
▼スマホ（Gmail）スクリーンショット
画像のスライス
画像を書き出します。スマホで見た時に画像の比率がおかしくなってしまう可能性があるため、縦横どちらも2で割り切れる数で書き出します。
コーディングしてみる（ソース全体）
画像のスライスが終わったらコーディングしていきます。メルマガコーディングなのでtableで組んでいきます。CSSはインラインで指定します。
HTMLソース全文を載せた後、個別にポイントを紹介します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<title>レスポンシブメルマガテスト</title>
<style type="text/css">
html,body,div,table,tr,th,td {
margin:0;
padding:0;
}
</style>
</head>
<body style="background:#F4EACA;">
<table width="640" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:640px; margin:0 auto; table-layout:fixed;">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:640px; margin:0 auto; table-layout:fixed;">
<tr>
<th width="50%" style="text-align:left;"><a href="#"><img src="http://dummyimage.com/220x80/ffba52/ffffff.png&text=LOGO" alt="LOGO" style="max-width:100%; border:none; vertical-align:bottom;" /></a></th>
<td width="50%" style="text-align:right;">会員番号xxxxxxxxxx<br />
○○さんこんにちは！</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="https://creatorclip.info/demo/131204/img/key_visual.jpg" alt="キービジュアル" style="max-width:100%; border:none; vertical-align:bottom;" /></td>
</tr>
<tr>
<th><img src="http://dummyimage.com/640x80/ffba52/ffffff.png&text=TITLE01" alt="TITLE 01" style="max-width:100%; border:none; vertical-align:bottom;" /></th>
</tr>
<tr>
<td><a href="#"><img src="http://dummyimage.com/640x40/ffffff/ffba52.png&text=MENU01_MENU01_MENU01" alt="MENU 01" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
</tr>
<tr>
<td><a href="#"><img src="http://dummyimage.com/640x40/ffffff/ffba52.png&text=MENU02_MENU02_MENU02" alt="MENU 02" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
</tr>
<tr>
<td><a href="#"><img src="http://dummyimage.com/640x40/ffffff/ffba52.png&text=MENU03_MENU03_MENU03" alt="MENU 03" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
</tr>
<tr>
<th><img src="http://dummyimage.com/640x80/ffba52/ffffff.png&text=TITLE02" alt="TITLE 02" style="max-width:100%; border:none; vertical-align:bottom;" /></th>
</tr>
<tr>
<td><a href="#"><img src="http://dummyimage.com/640x80/ffffff/ffba52.png&text=BANNER" alt="BANNER" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
</tr>
<tr>
<th><img src="http://dummyimage.com/640x80/ffba52/ffffff.png&text=TITLE03" alt="TITLE 03" style="max-width:100%; border:none; vertical-align:bottom;" /></th>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:640px; margin:0 auto; table-layout:fixed; background:#ffffff;">
<tr>
<td height="20" colspan="8" style="font-size:0; line-height:0;"> </td>
</tr>
<tr>
<td> </td>
<td><a href="#"><img src="http://dummyimage.com/80x80/ffba52/ffffff.png&text=ICON01" alt="ICON 01" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
<td> </td>
<td><a href="#"><img src="http://dummyimage.com/80x80/ffba52/ffffff.png&text=ICON02" alt="ICON 02" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
<td> </td>
<td><a href="#"><img src="http://dummyimage.com/80x80/ffba52/ffffff.png&text=ICON03" alt="ICON 03" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
<td> </td>
<td><a href="#"><img src="http://dummyimage.com/80x80/ffba52/ffffff.png&text=ICON04" alt="ICON 04" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
<td> </td>
</tr>
<tr>
<td height="20" colspan="8" style="font-size:0; line-height:0;"> </td>
</tr>
<tr>
<td> </td>
<td><a href="#"><img src="http://dummyimage.com/80x80/ffba52/ffffff.png&text=ICON05" alt="ICON 05" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
<td> </td>
<td><a href="#"><img src="http://dummyimage.com/80x80/ffba52/ffffff.png&text=ICON06" alt="ICON 06" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
<td> </td>
<td><a href="#"><img src="http://dummyimage.com/80x80/ffba52/ffffff.png&text=ICON07" alt="ICON 07" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
<td> </td>
<td><a href="#"><img src="http://dummyimage.com/80x80/ffba52/ffffff.png&text=ICON08" alt="ICON 08" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
<td> </td>
</tr>
<tr>
<td height="20" colspan="8" style="font-size:0; line-height:0;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:640px; margin:0 auto;">
<tr>
<td height="10" colspan="3" style="font-size:0; line-height:0;"> </td>
</tr>
<tr>
<td width="10%"> </td>
<td width="80%" style="text-align:center;">※ここに注意書きが入ります。<br />
正しく表示されない場合は<a href="#">こちら</a></td>
<td width="10%"> </td>
</tr>
<tr>
<td height="10" colspan="3" style="font-size:0; line-height:0;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="width:100%; color:#ffffff; background:#ffba52; text-align:center;">
<tr>
<td height="5" style="font-size:0; line-height:0;"> </td>
</tr>
<tr>
<td>コピーライトコピーライトコピーライト</td>
</tr>
<tr>
<td height="5" style="font-size:0; line-height:0;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
コーディングのポイント
レスポンシブレイアウトのメルマガをコーディングをするときのポイントをご紹介します。
ポイント1:画像幅を可変させるには「max-width:auto;」
画像がウィンドウ幅に合わせて幅を可変させます。そのためには、imgに対して以下のように指定します。
<img src="https://creatorclip.info/demo/131204/img/key_visual.jpg" alt="キービジュアル" style="max-width:100%; border:none; vertical-align:bottom;" />
「max-width:auto;」以外にも、IEで画像の周りに線が付いてしまうのを防ぐ「border:none;」や、画像の小さな余白を消す「vertical-align:bottom;」などを一緒に指定します。
ポイント2:tableには「table-layout:fixed;」
Google Chromeでは上記の「max-width」のみでもレスポンシブ化することが出来ますが、FirefoxやIEでは幅可変にならず、横スクロールが発生してしまいます。
<table width="640" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:640px; margin:0 auto;">
〜省略〜
</table>
HTMLで「width=”640″」を指定し、インラインCSSで「width:100%;」「max-width:640px;」「margin:0 auto;」を指定したのでこれでバッチリ！と思いきや、大枠のtableが可変せずに固定幅になっているのが原因でした。
Google先生に助けを求めて検索した結果、以下のページで載っていた「table-layout:fixed;」を指定することで幅可変にすることが出来ました。
widthでtableの幅がうまく指定できない時の対策 | NeGiMeMo.net
<table width="640" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:640px; margin:0 auto; table-layout:fixed;">
〜省略〜
</table>
余白が大きい時には「font-size:0;」「line-height:0;」を入れる
余白部分にはtd要素に半角スペースを入れております。specer画像を作って入れるのもいいですが、少しでも軽くしたかったので、半角スペースで対応しました。
「width」や「height」で指定した数値以上の余白が開いてしまった時には、tdに対して「font-size:0;」と、「line-height:0;」を指定しましょう。
<td height="20" colspan="8" style="font-size:0; line-height:0;"> </td>
コーディングしてみる（HTML詳細）
レスポンシブメルマガコーディングのポイントが分かったところで、ブロックごとにHTMLを見ていきましょう。
ロゴ部分の作成
まずはロゴ部分を作成します。左半分にロゴが来て右半分に会員番号とあいさつが入るレイアウトです。もちろんfloatではなくテーブルで横並びにします。
<table cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:640px; margin:0 auto; table-layout:fixed;">
<tr>
<th width="50%" style="text-align:left;"><a href="#"><img src="http://dummyimage.com/220x80/ffba52/ffffff.png&text=LOGO" alt="LOGO" style="max-width:100%; border:none; vertical-align:bottom;" /></a></th>
<td width="50%" style="text-align:right;">会員番号xxxxxxxxxx<br />
○○さんこんにちは！</td>
</tr>
</table>
thとtdに「width=”50%”」を指定し、画面幅の半分の幅で横並びにします。会員番号やあいさつは右寄せにするため「text-align:right;」を入れています。
キービジュアル・見出し・リストメニュー・バナー部分の作成
キービジュアル・見出し・リストメニュー・バナー部分はテーブル幅いっぱいに広がるようにしています。
<tr>
<td><img src="https://creatorclip.info/demo/131204/img/key_visual.jpg" alt="キービジュアル" style="max-width:100%; border:none; vertical-align:bottom;" /></td>
</tr>
アイコン部分の作成
アイコン部分の箇所はこのようになっております。
<table cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:640px; margin:0 auto; table-layout:fixed; background:#ffffff;">
<tr>
<td height="20" colspan="8" style="font-size:0; line-height:0;"> </td>
</tr>
<tr>
<td> </td>
<td><a href="#"><img src="http://dummyimage.com/80x80/ffba52/ffffff.png&text=ICON01" alt="ICON 01" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
<td> </td>
<td><a href="#"><img src="http://dummyimage.com/80x80/ffba52/ffffff.png&text=ICON02" alt="ICON 02" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
<td> </td>
<td><a href="#"><img src="http://dummyimage.com/80x80/ffba52/ffffff.png&text=ICON03" alt="ICON 03" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
<td> </td>
<td><a href="#"><img src="http://dummyimage.com/80x80/ffba52/ffffff.png&text=ICON04" alt="ICON 04" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
<td> </td>
</tr>
<tr>
<td height="20" colspan="8" style="font-size:0; line-height:0;"> </td>
</tr>
<tr>
<td> </td>
<td><a href="#"><img src="http://dummyimage.com/80x80/ffba52/ffffff.png&text=ICON05" alt="ICON 05" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
<td> </td>
<td><a href="#"><img src="http://dummyimage.com/80x80/ffba52/ffffff.png&text=ICON06" alt="ICON 06" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
<td> </td>
<td><a href="#"><img src="http://dummyimage.com/80x80/ffba52/ffffff.png&text=ICON07" alt="ICON 07" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
<td> </td>
<td><a href="#"><img src="http://dummyimage.com/80x80/ffba52/ffffff.png&text=ICON08" alt="ICON 08" style="max-width:100%; border:none; vertical-align:bottom;" /></a></td>
<td> </td>
</tr>
<tr>
<td height="20" colspan="8" style="font-size:0; line-height:0;"> </td>
</tr>
</table>
余白のセルとアイコンを交互に並べてレイアウトしています。
一行目のtableタグに「table-layout:fixed;」を指定することで余白とアイコンの幅が均等に配置されます。
最後に
レスポンシブのメルマガ作成方法をご紹介しましたが、これが正しい方法なのかどうかググっても確かめられなかったので、まだまだレスポンシブのメルマガ作成の決定版がないようです。
今回は「私が作成して上手くいった例として」ご紹介しました。また何かいい例が見つかればご紹介していきます。
