HTMLメール作成サンプルを作成してみました

HTMLメール(企業用)のサンプルを2つほど作ってみました。

作成に当たり工夫したこと

HTMLメールは、通常のWEBページのHTMLとはかなり異なります。
ですので、いろいろ作成にあたり気をつけたことがあります。

レスポンシブにすること
WEBページでは、当たり前のことですが、企業のHTMLメールでもちゃんとレスポンシブになっているものは、少ないです。
自分に来ていたHTMLメールを調べてみましたが、1割程度がなんとかレスポンシブという状態でした。スマホでみると、やたら文字が大きかったり、左右のマージンを取りすぎていて、見にくいものがほとんどでした。けっこうな大企業ですら、そうでした。
で、今回はしっかりとPCだけでなく、スマホでもきれいに適度な大きさで見れるようにしました。
エンコードをいろいろ試してみた
エンコード処理がいろいろタイプがあるのですが、日本語のHTMLメールとして最適と思われるエンコードを選んだつもりです。
ハイブリッド型のHTMLメールにした
ここでいう「ハイブリッド型」というのは、HTMLでの表示が見えない機種やメールソフトでは、テキストメールが見えるようにしたということです。
つまり、HTML部分だけでなく、テキストもメールソースの中に入れておき、誰でもコンテンツがしっかりと見えるようにしたということです。
HTMLメールの構造は忠実に設定
HTMLメール特有のテーブルでのレイアウト、CSSのタグ書き込み、outlook対策なども、もちろんちゃんと入れました。
テンプレートとして使えるように差込送信するスクリプト
HTMLメールのデザインをテンプレート化して、毎回新規の記事を差し込みすることを前提に作成。また、その送信スクリプトも作ってしまいました。