メールクライアント対応が鍵:HTMLメールの効率的な作成手順

HTMLメール、失敗しない作り方・コーディング編 Web

先日、業務で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スタイルは記述しない
  • 「リキッドレイアウト+最大幅固定値」で対応(デバイスごとの表示はレスポンシブで対応しない)

テーブルレイアウトについてはここでは割愛させていただきます。詳しくは下記をご参考ください。

作って分かるHTMLメールの基本と使えるタグ/CSSまとめ (1/2)
マルチデバイス時代に対応したEメールの考え方「レスポンシブEメールデザイン」。今回から、デバイス環境によって表示状態を切り替える、基本的なレスポンシブEメールのテンプレートを実際に作成していきます。
HTMLメール制作編:コーディングサンプルや、役立つWebサービスのご紹介 | 株式会社グランフェアズ
HTMLメール制作の基本をご紹介する記事、後編です。 前回の「デザイン/コーディング前に押さえておきたい、HTMLメール作成の基礎知識」ではHTMLメールの制作にあたって事前に知っておきたいポイントを挙げてみましたが、今回はサンプルなども交...

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>

※「xxx」「○○○」は任意で設定する箇所です。

tableタグへの記述は上記が基本となります。widthやborderなどの設定は、それぞれの属性とstyle属性の両方で記述します。これはメールクライアントによってスタイルが効くタグがまちまちなため、HTMLメールの記述で使われる基本スタイルです。

後述のスタイル記述でも頻出しますので、HTMLメールのコーディング方法として、是非覚えておいてください。

テーブル幅は600700pxあたりで設定されることが多いです。その他の設定は、ほぼ固定なので都度書き換える必要ありません。

tdタグ テキストの設定例
<td style="font-family:xxx; color:xxx;">
<font size="3" color="xxx">○○○</font>
</td>

※「xxx」「○○○」は任意で設定する箇所です。

テキストに関するスタイルの記述は、style属性とfontタグに併記します。

実際にコーディングを行った際、最初はstyleタグにだけ記述していました。

するとテストメールをOutlook(PC版/Win,Mac)で確認した際、styleタグの記述が全く反映されませんでした。

記述の順番を入れ替えるなど、考えられる限り書き方をかえてみたのですが、全く反映されません。

苦肉の策、ダメ元でfontタグでの記述を加えてみたところ解消された、というのがこの併記の理由です。font 関連のスタイルだけが何故か反映されませんでした。

後日調べてみたところOutlookstyle属性が反映しないのは、私が書いたソースのどこかに原因があるようです。

tdタグ 画像の設定例
<d align="xxxx">
<a href="https://xxxxxxxx/" target="_blank">
<img src="https://xxxxxxxx" width="xxx" height="xxx" alt="xxx" style="width:100%; max-width:xxxpx; height: auto;">
</a>
</td>

※「xxx」「○○○」は任意で設定する箇所です。

画像の記述もテキストのケースと同様に、幅と高さの設定をそれぞれの属性とstyle属性に記述します。

ここで注目していただきたいのが、style属性にあるwidth100%とmax-widthの設定です。

こちらはリキッドレイアウトといって、デバイスのサイズに合わせて横スクロールが発生しないよう表示させるレイアウト手法です。

全体の幅は100%で指定、最大幅を画像データの原寸に設定することで、画像の原寸サイズよりもデバイスの幅がせまい時は、その幅に合わせて最適に調整、表示されます。

max-widthは設定は、画像ファイルの原寸を超えた際横に伸びすぎた表示にならないよう設定を入れています。

以上が基本的なスタイルの記述方法です。一旦インラインのみでコーディングを行ったら、テスト配信を行い、メールクライアントでの表示に不具合がないか検証していきます。

テスト配信の方法につきましては、こちらをご覧ください。

HTMLメール、失敗しない作り方・テスト配信編
HTMLメールは、メールクライントによって記述したスタイル通りに表示されないケースが多々発生します。そのため、事前にテスト配信をおこなって表示を確認し、不具合の修正を重ねていく必要があります。

まとめ

  • 対応するメールクライアントはhtmlメールの作成前に必ず決めておく
  • メールクライアント非対応のCSSスタイルは記述しない
  • 「リキッドレイアウト+最大幅固定値」で対応(デバイスごとの表示はレスポンシブで対応しない)
  • コーディングは必要最小限のスタイルから記述する
  • tabaleタグは「max-width」で PC対応、「リキッドレイアウト」でSP対応

コメント

タイトルとURLをコピーしました