HTMLメールの話 ⛄️ 2021冬 #HTML

この記事はビビッドガーデン Advent Calendar 2021 の19日目です。

はじめまして、北関東に移住したばかりで食べチョクのエンジニアの @naoiwata です。

今回は、最近やっていたHTMLメール作成について、フルスクラッチで作りながら得た知見について書いてみます。

3行まとめ

HTMLメール界隈は特に目新しいアップデートはなさそう
90年代に戻ってHTMLを書こう
とにかく実機を使って検証検証検証！

前提

5年前くらいにHTMLメールを書いていた時期があり、今回久々に作るにあたって検証などしましたが、結論びっくりするほど目新しいアップデートはなさそうでした。
今は主流の flexbox はもちろん、float で組み立てることもできません。
外部 CSS ファイル読み込みや、Web font も使えないです。

作り方

今回はフルスクラッチで1からHTMLメールを作ってみました。

1. 基本の枠組みを作る

一般的なHTMLメールと同じです。要素の横並べや縦積みは基本的にすべて table コーディングとなります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="x-apple-disable-message-reformatting">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>食べチョク</title>
  </head>
  <body>
    <center>
      <table>
        <tbody>
        <!-- コンテンツを書いていく -->
        </tbody>
      </table>
    </center>
  </body>
</html>

2. 気をつけること

画像ファイルの読み込みは相対パスでなく絶対パスにする。
CSS のクラス名指定は使わず、全てのタグにインラインで直接プロパティを記述する。
text-shadow などの CSS3 プロパティや、 ::before などの指定は効かないことがあるので極力使わない。
長さの指定は rem や vh などは使えないので % や px を使う。
margin や padding は、margin: 0 10px; のような簡略した書き方をせずに margin: 0 10px 0 10px; のように逐一指定する。

作成中に気をつけた点について表にしてみました。¹

	🙅‍♀️使えない	🙆‍♀️使える
画像のパス指定	相対パス	絶対パス
CSSプロパティ指定	外部CSSファイル読み込み、クラス指定²	タグに直接記述
CSSプロパティ	text-shadow、::before、calc などの新しめのプロパティ	CSS3前からある既存のプロパティ
長さの指定	rem、vh、vw	%、px
margin、padding	`margin: 0 10px 0 10px;` 略称不可	`margin: 0 10px;`
background	`background-image: url(...); background-releat: ...; background-position: .....` 略称不可	`background: url() no-repeat 0 0;`

特に気をつけてほしいのは、メールクライアントによってデフォルトで指定されているCSSプロパティが継承されないように、文字色や文字サイズ、マージン等も逐一指定する必要があります。
li タグなども margin や padding を0にしておくのが基本です。

例えば a タグだと、HTMLデフォルトの下線や青色文字、文字フォントも継承されてしまうので、細かくスタイルを指定します。

<!-- a タグ記述例 -->
<a style="color: #ffffff; padding: 14px 42px 14px 42px; display: block; margin: 21px auto 0 auto; text-align: center; width: 80%; border-radius: 24px; font-weight: bold; font-size: 14px; text-decoration: none; background-color: #212121; font-family: arial,helvetica neue,helvetica,sans-serif;" href="https://www.tabechoku.com/">
  リンク
</a>

同様に、h1〜h6、pタグには文字サイズ、文字色を指定したり、table タグの tr、td にも逐一 width 指定します。

HTML メールの検証方法

Web ブラウザで一通りできてきたら、メールクライアントで表示の検証をします。手元で確認できるのか以下の環境だったので、以下でメールを送って表示を確認していきました。

Mac / Gmail
Mac / Yahoo Mail
Mac / Thunderbird
Mac / Outlook Mail
Mac / Mail
iPhone / Gmail
iPhone / Yahoo Mail
iPhone / Mail
Android / Gmail
Android / Yahoo Mail

手っ取り早くHTMLメールを送る方法

アナログなやり方ですが、さくっとやりたいときは、ブラウザのGmailから送るのが楽にできます。
新規メールを作成して、ブラウザ検証ツールを開いて「HTMLを編集」から無理やりDOMにHTMLを追加します。

貼り付けると…

これで送信して、検証したいメールクライアントで開いて見ます。

🧨 困った時

謎の下線が入る、フッターだけ中央寄せが効かない、文字が明朝体になる、、、実機で見てみるとメールクライアントによって表示が変わることがあります。

下線を消すプロパティを追加する、全てのタグに中央寄せ指定をする、文字の入ったタグ全てに font-family を指定する等、直接タグにプロパティを指定することである程度のメールクライアント依存の表示崩れは解消できます。

🌞 この先

今回は Rails に組み込むため、検証が終わったらリンクや画像などの変数となる箇所を書き換えて作業完了しました。
次は、タグや要素ごとにパーシャル化して、HTMLメールのパーツとして再利用できる仕組みを考えています。

🌽 最後に

HTMLメールを新規で作るにあたって、当初はテンプレートやジェネレーターなどのツールも考えましたが、

HTMLメールの仕組みを作り始めたところなので、テンプレートによって制限を増やして可能性を狭めたくない
デザイナーさんのクリエイティブを尊重してデザインを型にはめたくない
小規模コンテンツなので自分で1から作れそうだし、小さく1から作ることで知見をためたい、学びたい

という個人的な意思もあって、フルスクラッチで作らせていただきました。
もちろん今後の拡張や運用の方針によっては、仕組みやツールを柔軟に取り入れることも検討していきます。

以上、最後までお読みいただきありがとうございました。
弊社のエンジニアは、各々がそれぞれの意思を持ちながら同じ目標に向かって日々開発をやっています。
私のように地方移住組も他にもいますし、日々農産物で溢れている弊社オフィスから、最近は遠方勢へ野菜便が届くこともあります。³

ご興味を持たれた方は是非お声がけください :)

詳しくは https://www.caniemail.com/ が参考になりそうです。 ↩
クラス名指定して style タグ内に書いてもいいが、効かないことがあるので直接書くのがベター。 ↩
これぞオフィスチョク！ ↩