htmlメールについて勉強しました。

2024年7月11日 10:41

こんにちは。YUIDEAでマークアップエンジニアをしているtanabeです。

ここ最近の猛暑のなか、庭いじりをしていたら熱中症のような症状が出て、休日を寝て過ごすハメになり、ちょっとショックを受けました。
「最近の夏は危ない！」と今更ながら気づき、できる限りお家に引きこもりたい今日この頃です。

皆様も熱中症にならないよう、水分補給・塩分補給・睡眠の確保など、
ご自愛ください。

さて、今回はHTMLメールについて書いていきたいと思います。
とある案件でちらっとお話に上がっていたので、改めてお勉強です。
よろしければお付き合いくださいませ。

HTMLメールとは

まず、HTMLメールとはなんぞや、と。
普通のメールとは違い、テキストだけではなく、画像などを用いてレイアウトを組めるメール形式です。
表現力が良く、視覚的にわかりやすいので、多くの企業が取り入れています。

HTMLメールのメリットはなんといっても、見た目の良さ、訴求力ではないでしょうか。
定期購読のメールマガジンや、イベント告知などでよく使用されている印象です。どんな商品なのか、どんなイベントなのかなど、テキストだけでは伝わりにくいことも、画像やレイアウトの力で一気に分かりやすくなります。
送信する側としてパラメータも入れ込めるため、メールの開封率やリンクのクリック率などを数値化することも可能です。

（htmlとcssの知識があることは前提として）

デメリットとしてはメーラーによって表示にバラつきが多少あり、検証作業が面倒なことでしょうか。
こっちのメーラーでは正しく表示されるのに、こっちのメーラーではpaddingが効いていない、marginが聞いていない！など。「Hotmail」や「Outlook」ではmarginタグのサポートを打ち切っています。
メールクライアントの種類によって、対応しているCSSに違いがあるようです。
画像を多く使えば使うほど、当然メールの容量が大きくなります。
あまりに容量をくう内容ですと、受信者がメールを開く際に表示に時間がかかり、受信者が「もう見なくていい」となることに繋がります。

（デザインはFixしていることを前提として）
気にしていることや、注意点など箇条書き
※下記内容は絶対ではありません。
私が気にしていることを箇条書きにしています。

HTMLメールは通常のwebページを作成する時とは勝手が違い、メールクライアントの環境でcssが効かない！と焦ることもしばしば。
また、容量が大きくなりすぎないよう「100KB」以下という言葉をよく目にします。

縛りも多いなか、初心者の私が作成したhtmlメールが綺麗にレイアウトされた状態で、受信を確認できるのは嬉しいことです。

ただ、たまにhtmlメールを送信するなら自前作成で良いかと思いますが、メルマガのようにバンバン送信する予定なら、メルマガ配信サービスを使用した方が良いかと思います。

検証作業やGoogle Analyticsとの連携、自動でマルチパート配信ができるなど、便利な機能がいっぱいありましたよ！