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