見出し画像

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

tanabe

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

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

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

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



HTMLメールとは


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


メリット

  1. HTMLメールのメリットはなんといっても、見た目の良さ、訴求力ではないでしょうか。
    定期購読のメールマガジンや、イベント告知などでよく使用されている印象です。どんな商品なのか、どんなイベントなのかなど、テキストだけでは伝わりにくいことも、画像やレイアウトの力で一気に分かりやすくなります。

  2. 送信する側としてパラメータも入れ込めるため、メールの開封率やリンクのクリック率などを数値化することも可能です。

デメリット

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

  1. デメリットとしてはメーラーによって表示にバラつきが多少あり、検証作業が面倒なことでしょうか。
    こっちのメーラーでは正しく表示されるのに、こっちのメーラーではpaddingが効いていない、marginが聞いていない！など。「Hotmail」や「Outlook」ではmarginタグのサポートを打ち切っています。
    メールクライアントの種類によって、対応しているCSSに違いがあるようです。

  2. 画像を多く使えば使うほど、当然メールの容量が大きくなります。
    あまりに容量をくう内容ですと、受信者がメールを開く際に表示に時間がかかり、受信者が「もう見なくていい」となることに繋がります。


htmlメール作成時、気にしていること

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

  • DOCTYPE宣言を記述する（「HTML 4.01 Transitional」「XHTML 1.0 Transitional」）

  • 文字コードは「iso-2022-jp」（最近は「utf-8」に対応しているメールクライアントも多い、らしい）

  • viewport（ビューポート）の指定

  • メールの内容によるかもしれませんが、bodyのcssに「word-break: break-all;」を指定

  • tableタグでレイアウトする（cssは埋め込み形式かインライン形式）

  • 画像読み込みは相対パスではなく絶対パス

  • 画像のaltは必須

  • 外枠の最大値（max-width）を固定して、画像は100％表示

  • フォントの一括指定は避ける

  • divタグや、h1(見出し)タグ、pタグは極力使用しない（段落などは<br>を使用）


まとめ


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

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

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

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

#YUIDEA #css #htmlメール #メルマガ

この記事が気に入ったらサポートをしてみませんか？