先日カラーミーショップの「HTMLメール」作成ツールを利用する機会がありました。プランによっては使えないこともあり本格的な利用は初めてでした。ただ使いやすそうな印象と異なり、なかなか思うようにデザインできません。苦労されている人も多いと思うので、対応中に気になった点などまとめてみます。
ただHTMLメールはかつてのIEのようにかなり独特です。以下内容はこちらの理解不足もあり得ますのであくまでも参考までにご覧ください。
カラーミーショップのHTMLメール
デフォルトテンプレートのソースを確認すると、既成のツールを流用されているようです。必要のないタグがあったり、逆に必要なタグがなかったりします。
２つあるテンプレートをそのまま使用し、単に色や文章、画像を差し替えるだけであれば、なんとか形にはなりそうです。ただ少しでもカスタマイズしようとすると大きくレイアウトが崩れるため、かなり難しい印象でした。
一番気になったのは、Gmailアプリへのレスポンシブ対応です。以前Gmailは<head>内のCSSを読み込まない仕様だったため、レスポンシブには対応できなかったようですが、現在は読み込むようになりました。そのため通常のHTMLメールであれば、おそらく問題なくレスポンシブ対応が可能です。
ただこのカラーミーショップのツールでは（理由がわからなかったのですが）「head」タグそのものがありません。「ソース」モードで自ら入力しても削除される仕様です。そのため、冒頭付近に<style>タグを設置してもGmailには正しく反映されませんでした。通常のレスポンシブ対応は諦めることになると思います。
最終的に、すべてインラインCSSでリキッドレイアウト（%による幅指定）とすることで解決しました。PC向けにアウトラインの横幅を制御する必要がありますが、この形であればGmailでも画面の幅に合わせて表示が変化するようになります。文字が小さくなることもありません。
またカラーミーショップのツール内ではなかなか意図したものにならないので、基本的にはHTMLを別途作成し、「ソース」モードで貼り付ける形が安全です。一般の方には抵抗があると思いますが、一度テンプレートさえできれば、テキストの修正なのでそこまで難しくはないと思います。
HTMLメールのおさらい
実際に配信されているメールマガジンなどを含め、時間が許す限り調べてみましたが、古い仕様と新しい仕様にどこまで対応するかというところで実装方法は様々でした。参考までに今回気をつけた点などまとめてみます。一部カラーミーショップのツールを想定したものになります。
- h1、ulなど通常のHTMLタグは使用しない方が無難です。唯一、tableタグはレイアウトのため必須です。その他フォントなどの指定はspan,divを利用しました。
- カラム（列）が必要なレイアウトにtableタグを使用します。ただしできるだけモバイルを意識し１カラムでの構成が理想です。
- margin、paddingの対応状況が不明なため、縦の余白はカラーミーショップのテンプレートで採用されている方法、table（td）のheight属性にて指定しました。改行<br>で思い通りの余白にならない場合に便利です。
- スタイルは全てインラインで記述します。ただしカラーミーショップのデフォルトテンプレートにある特殊なクラスは念のため<style>タグに残しました。
また、<style>タグからインラインCSSに変換してくれる便利なツールが「Mailchimp」にあります。 - カラーミーショップのツールでは、画像<img>タグの上下に余白が作られる問題の回避策として、imgタグにdisplay:blockが指定されています。これ自体は良いのですが、画像のセンタリングなど操作しづらくなります。インライン要素にするか、幅を決めて左右のマージンをautoにします。
- URLなど英数字の連続を記述すると改行できずレイアウトが崩れることがあります。「word-break: break-word;」などで改行を許す指定をしてもよいのですが、メールソフトの対応状況が不明なため、URLではなくリンク<a>で設置する形が無難です。
- メール内の画像はカラーミーショップの「画像ファイル管理」か、FTPディレクトリにアップし、原則削除しないルールを作ります。既にアップした商品写真などをそのまま使用すると、差し替えた際に表示されなくなる可能性があります。
- HTMLが複雑になるため、タグの閉じ忘れなどがないよう文法チェックはした方が良いと思います。ただほとんどの場合、正しいHTMLではないので、そのままではエラーが大量に表示されます。filteringを利用するとチェックしやすくなります。
冒頭に記載した通り、これらは参考までにご確認ください。
HTMLメールを使ったメールマガジンは今も多くのショップやサービスが配信していますが、コードを書いているとかなり昔のホームページ制作を思い出します。もう少し標準化の動きがあってもいいように思いました。