企業にWebデザイナーとして勤務すると、稀に担当になってしまう場合があるHTMLメルマガの制作。
HTML5やCSS3、JSなんかも余裕!!というイケてる貴方もタジタジになること間違いなしHTMLメルマガ。なぜならHTML5やCSS3、JSなんかできても意味ないので、テーブルレイアウト、つまり1995年頃のインターネットを思い出す必要がある。
え? 1995年に生まれてなかったって? そんな人もいるかもしれませんね。
2019年時点の標準的なHTMLメルマガ
レスポンシブやゲームアプリが動いたりするWebブラウザと違い、同じ「HTML」であってもHTMLメルマガはOutlookやGmailなど主要なメールアプリの仕様がPCもスマホもヤバイので、通常のブラウザ用のHTMLとは違うノウハウが必要。
テーブルレイアウト
これは基本中の基本。世の中は広いのでテーブルレイアウトじゃないHTMLメールも存在するかもしれないが、一般的な企業が配信しているHTMLメルマガの多くは、テーブルレイアウトで作られている。
PCもSPも同一レイアウト
基本的にPCとSPは同じレイアウトのものが表示される。レスポンシブ対応ができたりできなかったりするので、一般的には同じものを表示される。そのため、幅600pxくらいで作り、どっちで表示されてもそこそこ良い感じに見えるようにする。
CSS指定
CSSのスタイル指定は基本的にインラインで書く。メーラーによって使えないCSSもあるので注意。
できるだけシンプルに作る
上記の条件があるため、Webページみたいな複雑なレイアウトは挑戦すると作成や検証で地獄を見るのでやらない方が良い。
画像は絶対パス
画像はメールとは別にFTPで上げておき、絶対パスで読み込む。作成中はローカルで相対パス、上げてから絶対パスに置換すると良いだろう。
サンプルソース
本文や画像はtable→tr→td内に記述する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type"
content="text/html; charset=iso-2022-jp">
</head>
<body bgcolor="#ffffff" text="#333333" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" width="600" height="650"><a href="#" target="_blank"><img src="絶対パスでxxx.jpg" width="600" height="650" style="display:block" alt="画像"></a></td>
</tr>
</table>
</body>
</html>
Outlookでの画像の隙間発生
特に厄介なのがOutlookだ。こいつの描画エンジンはWordなので、HTMLの構造的に正しくても、変な表示崩れや、画像に隙間ができたりする。
個人的にやっかいなのが画像。何も考えないで入れると、スライス画像などで隙間ができるとまずい場合でも容赦なく隙間ができる。長年の研究によると、下記の設定をしておけばutlookやiPhone、Gmailな主要なメーラーで大体、意図通りに表示される。
画像を使いたいからHTMLメールを作るのだろうから、大体のHTMLメルマガは画像中心になると思うけども、根本的に長いHTMLメールはメーラーや端末によって省略されたり、Outlookで意味不明の1px程度の隙間ができたりする。
一つのtableは適当に2000pxくらいで分割して、下にtableを複製していった方が、長年の研究によると、うまくケースが多い。
そもそも、MAX6000pxくらいにしないと誰もみないし、長くなると原因不明の表示崩れが起きやすいので、短めに、内容もシンプルに作るのが良いと思う。
