【メルマガ制作におけるHTMLメール】その2 HTMLの作り方（続き）

はいさいーー

みなさんー、こんにちは！
じぃでごわす。

HTMLメールの連載で前回は、「テーブルコーディング」「style属性によるcss設定」をお伝えしました。

今回は前回の続きで、「リンク、画像のパス」、「難敵！Outlookで出し分けたい」をお伝えしたいと思います。

リンク、画像のパス

HTMLメールはWEBページと違い、制作したHTMLメールのファイルをサーバーに置けません。

なぜなら、制作したHTMLメールを使ってメールで送信するので、サーバーにHTMLメールを置くわけでは無いからです。

画像パス

画像パスは相対パスではダメで、絶対パスにしないといけません。

ちなみに、相対パスは、「置いていあるHTMLファイルから見てのパス」ということになります。

HTMLメールはサーバーに置いているわけではないので、
相対パスでは読み込むことが不可能です。

NGな例

<!-- 相対パスはNG -->
<img valign="top" src="./640x69.png" width="640" height="auto" alt="" style="line-height:0; vertical-align:top; display:block; width:100%; max-width:640px;">
<!-- ルート相対パスはNG -->
<img valign="top" src="/640x69.png" width="640" height="auto" alt="" style="line-height:0; vertical-align:top; display:block; width:100%; max-width:640px;">

OKな例

<!-- 絶対パスはOK -->
<img valign="top" src="http://via.placeholder.com/640x69.png" width="640" height="auto" alt="" style="line-height:0; vertical-align:top; display:block; width:100%; max-width:640px;">

上記のように画像は絶対パスで表示させサーバーにある画像を読み込ますようにします。

リンクパス

リンクパスも同じですが、絶対パスで記述する必要があります。

また、リンクに関しては「同窓で遷移」するということはできませんので、必ずtarget="_blank"を設定する必要があります。

NGな例

<!-- target="_blankがないのでNG -->
<a href="http://via.placeholder.com/640x69.png">
<img valign="top" src="./640x69.png" width="640" height="auto" alt="" style="line-height:0; vertical-align:top; display:block; width:100%; max-width:640px;">
</a>

OKな例

<!-- target="_blankがあるのでOK -->
<a href="http://via.placeholder.com/640x69.png" target="_blank">
<img valign="top" src="./640x69.png" width="640" height="auto" alt="" style="line-height:0; vertical-align:top; display:block; width:100%; max-width:640px;">
</a>

HTMLメールは送信したら一回きりですので、送信する前に、
・画像はしっかり表示されているか
・リンクは全てクリックして、別タブで遷移するか
というのは必ず確認しましょう！

難敵！Outlookで出し分けたい

以前の記事でもお伝えしましたが、Outlookはメルマガにとって一番厄介なものです。笑

そして、知見は海外にあったりするのですが解決されていないものも多く、
gmailはそのまま表示させたいが、Outlookのみ表示を出し分けたい場合があります。

その場合の出し分け方法を書きたいと思います。

Outlookでの出し分け方法

Outlookでの出し分け方法ですが、

<table style="mso-hide:all;">
 <tr>
   <td style="mso-hide:all;>ここはgmailで表示させたい。</td>
 </tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table>
 <tr>
   <td>ここはoutlookのみで表示させたい。</td>
 </tr>
</table>
<![endif]-->

上記のように記述することで、Outlookへの出し分けが可能になります。

mso-hide:all

gmailで表示させたい箇所に、mso-hide:allの記述があります。

このmsoは、MicrosoftのOffice系の文書をHTML化した際に、独自に当てることができるCSSになります。
参考

そしてmso-hide:all自体は書いてあるとおり、MSOffice（ここでいうとOutlook）では表示をさせないという設定になります。

display:noneでもいいじゃないか？

と思いますが、Can I emailで見ると、display:noneはtable要素には効かないとなっているため、
mso-hide:allで非表示にする必要があります。
Can I email

<!--[if (gte mso 9)|(IE)]>〜<![endif]-->

次にoutlookのみで表示の箇所のtableタグが、<!--[if (gte mso 9)|(IE)]>、<![endif]-->で囲まれています。

これは条件付きコメントと呼ばれ、
<!--[if (gte mso 9)|(IE)]>は、
gteはgreater thanという意味で、「MSOfficeバージョン9以上に対応させる」となります。

その他に、
<!--[if (lte mso 9)|(IE)]>というのもあり、
lteはless thanという意味で、「MSOfficeバージョン9未満に対応させる」で条件を変更できます。

lteはあまり使用しないので、基本的にはgteで条件付きコメントを書いていく形になります。

この条件付きコメントはif文で始まっているので、
出し分けをしたい場合、
出し分けの最後に<![endif]-->と、
if文の終了を明示的に記述必要がありますので、忘れずに記述してください。

このように条件付きコメントを使用することで、Outlookとそれ以外で出し分けをすることが可能になりますので、
Outlookで表示崩れが発生する場合は、条件付きコメントを使用して適宜調整するようにしてください。

次回

今回はHTMLの作り方の続編で、画像・リンクパス、outlookとの出し分けを書いていきました。

HTMLメールで画像訴求は最大のポイントになりますので、リンク切れがないようにしないといけません。
また、HTMLメールからWEBページへの導線がないと、詳細な訴求ができなくなりますので、画像・リンクは必ず配信前にチェックするようにしましょう。

HTMLメールの鬼門となるOutlookはどうしてもgmailと同じ表示ができるとか限りません。

その場合、コンテンツの表示方法を変更できるのあればいいのですが、クライントによってはそのままが良いというのが多いです。。

そういう場合の回避策として、Outlookとの出し分けをできるようにしておいたほうが、
クライントにも納得感が出るので、パターンとしてもっておくのがいいかと思います。

次回はHTMLメールを作成し、配信する前の検証方法について書いていきたいと思います。

次回もゆたしくです〜〜〜