先日、業務でHTMLメールを作成する機会があり、主担当としてコーディングを行いました。
HTMLメールといえば、かつてのコーディングでは主流だったテーブルレイアウトで組んでいきます。
2年前に入手した「レスポンシブEメールデザイン」という教本を久しぶりに読み返し、コーディングの基本を再確認。
さっそく取り掛かったところ、やはり出てくる不具合の数々…。
PCとスマホでの表示に関して、どこまで対応させるかによって、タグやスタイルの記述方法が変わってきます。
しかし、「とりあえず組んでみよう」といった曖昧な進め方をしてしまった結果、非効率な作業に陥ってしまいました。
今回のケースでは、クライアントとの仕様確認が不十分だったこともあり、テスト配信で発生した不具合に後手後手で対応することに…。最終的には最初から書き直す羽目になってしまいました。
この失敗談から、「HTMLメールを効率よく作成する手順」をまとめましたので、これからHTMLメールを作成する機会がある皆さんと共有できれば幸いです。
1. 成功するメール配信の鍵！対応メールクライアントの事前決定
HTMLメールは文字通り、受信者に「メールを送信すること」が目的です。
しかし、いつのまにか、「文字コードはShift-JIS」「テーブルレイアウトが基本」「コンテンツの幅は？」「画像かテキストか？」といった、HTMLメールを作成することに注力しすぎてしまい、これらの手段が目的にすり替わってしまいがちです。
手を動かす前に必ず決めておきたいことは、「どのメールクライアントまで対応させるか？」です。
「デザイン重視」か「より多くの受信環境に対応するか」等々、クライアントのリクエストによって仕様は変わってきます。そのすべてをここで紹介することはできませんが、「ユーザーの環境にはできるだけ対応したい」という前提であれば、下記仕様が考えられ、かなりのボリュームになります。
今回のケースでは、下記に極力対応できるよう仕上げました。
対応メールクライアント
【PC】
Windows
Outlook、Gmail（Chrome/FireFox）、 Yahooメール、Thunderbird
Mac
Mail、Outlook、Gmail（Safari/Chrome/FireFox）、 Yahooメール、Thunderbird
【スマホ】
Android（アプリ版、Web版）
Outlook、Gmail、 Yahooメール、Thunderbird
iOS
Mail、Outlook、Gmail、 Yahooメール、Thunderbird
2. レスポンシブは「あえて非対応」に！効率的なHTMLメールコーディングの考え方
HTMLメールは「より多くのユーザーに読まれるメルマガ」であることが大前提です。しかし、クライアントや制作側の意向で、どうしても「見栄えの良さ」に陥りがちです。
私がバイブルにしている「レスポンシブ Eメールデザイン（KADOKAWA）」には、HTMLメール制作のコツは「あまりデザインやレイアウトに無理をしない」ことを推奨していました。
では、具体的にはどうするか？下記3つを念頭においてコーディングを進めていきます。
- コーディングは「テーブルレイアウト」を基本とする
- メールクライアント非対応のCSSスタイルは記述しない
- 「リキッドレイアウト＋最大幅固定値」で対応（デバイスごとの表示はレスポンシブで対応しない）
テーブルレイアウトについてはここでは割愛させていただきます。詳しくは下記の記事もご参考ください。
3. トラブルを避ける！CSSの記述は「インラインのみ」で効率アップ
HTMLメールでは、外部のCSSファイルを読み込むことができません。そのため、以下のいずれかでCSSスタイルを記述します。
<head>の<style>タグに記述する- インラインでタグに直接記述する
しかし、複数のメールクライアントへの対応を考えている場合、上記①は避けて記述した方が無難です。<head>タグへの記述とインラインでの記述を同時に行うと、「テストメールで発生した不具合の原因を特定する」のが難しくなるためです。
やみくもにコーディングするのではなく、下記手順で進めていく方が、結果的に効率の良い作業となります。
- 必要最小限のスタイルでコーディングを行う
- 対応させたいメールクライアントで検証 → 不具合修正
- 上記①の仕様どおりにページを仕上げる
では、「必要最小限のスタイルでコーディングを行う」とは、どういうことでしょうか？失敗の経験から気づいた最適な手順は、以下のとおりです。
インラインに記述するべき基本スタイル
- 「サイズ（幅・高さ）」に関する記述
- 「フォント」に関する記述
具体的には、<table>タグ、<td>タグに下記サンプルを記述します。例えばメールの左右幅を640pxに設定したい場合、下記が基本の記述となります。
table>タグの設定例
HTML
<table width="640" border="0" cellpadding="0" cellspacing="0"
style="width:100%; border:none; margin:0 auto; max-width: 640px;"></table>
<table>タグは上記記述のみでOKです。その他のスタイル記述は原則不要です。widthやborderなどの設定は、それぞれの属性とstyle属性の両方で記述します。これは、メールクライアントによってスタイルが効くタグがまちまちであるため、HTMLメールの記述で使われる基本スタイルです。後述のスタイル記述でも頻出しますので、HTMLメールのコーディング方法として、ぜひ覚えておきましょう。- テーブル幅は600px～700pxあたりで設定されることが多いです。その他の設定はほぼ固定なので、都度書き換える必要はありません。
<td>タグ テキストの設定例
HTML
<td style="font-family:xxxx; color:xxxx;">
<font size="3" color="xxxx">○○○</font>
</td>
- テキストに関するスタイルの記述は、
style属性と<font>タグに併記します。 - 実際にコーディングを行った際、最初は
styleタグにだけ記述していました。すると、テストメールをOutlook(PC版/Win,Mac)で確認した際、styleタグの記述が全く反映されませんでした。記述の順番を入れ替えるなど、考えられる限り書き方を変えてみたのですが、全く反映されません。 - 苦肉の策、ダメ元で
<font>タグでの記述を加えてみたところ解消された、というのがこの併記の理由です。なぜかフォント関連のスタイルだけが反映されませんでした。後日調べてみたところ、Outlookでstyle属性が反映しないのは、私が書いたソースのどこかに原因があるようです。
<td>タグ 画像の設定例
HTML
<td align="xxxx">
<a href="https://xxxxxx/" target="_blank">
<img src="https://xxxxxx" width="xxx" height="xxx" alt="xxx" style="width:100%; max-width:xxxpx; height: auto;">
</a>
</td>
- 画像の記述もテキストのケースと同様に、幅と高さの設定をそれぞれの属性と
style属性に記述します。 - ここで注目していただきたいのが、
style属性にあるwidth:100%とmax-widthの設定です。これはリキッドレイアウトといって、デバイスのサイズに合わせて横スクロールが発生しないよう表示させるレイアウト手法です。 - 全体の幅は
100%で指定し、最大幅を画像データの原寸に設定することで、画像の原寸サイズよりもデバイスの幅が狭い時は、その幅に合わせて最適に調整・表示されます。 max-widthの設定は、画像ファイルの原寸を超えた際に横に伸びすぎた表示にならないよう設定を入れています。
以上が基本的なスタイルの記述方法です。一旦インラインのみでコーディングを行ったら、テスト配信を行い、メールクライアントでの表示に不具合がないか検証していきます。
テスト配信の方法につきましては、こちらの記事もご覧ください。
まとめ
今回の経験から得られた、HTMLメールを効率的に作成し、成功に導くためのポイントをまとめました。
- 対応するメールクライアントはHTMLメールの作成前に必ず決めておく
- メールクライアント非対応のCSSスタイルは記述しない
- 「リキッドレイアウト＋最大幅固定値」で対応（デバイスごとの表示はレスポンシブで対応しない）
- コーディングは必要最小限のスタイルから記述する
<table>タグはmax-widthでPC対応、リキッドレイアウトでSP対応を図る
これらのポイントを押さえることで、あなたのHTMLメール作成とメール配信がよりスムーズで成功に繋がることを願っています。
コメント