効果あるレスポンシブHTMLメール【無料ダウンロードOK】

2022 9/07

メルマガ配信はレスポンシブHTMLメールで行う

アフィリエイトや企業コンテンツのメール配信は、効果が高い事で知られていますが、実際にはメジャーなメールクライアントでも非対応だったり、WEBサイトの様なコーディングが通用しない部分が多々あります。

無料のHTMLメールのテンプレートダウンロードもありますが、メール配信は直接ユーザーに届くもので、特定電子メール法などの法律もあるので配信する企業側にとっては神経質になる部分。
ですので、CSSがインラインで書かれる事もあり、ソースが複雑だったり、作りたいHTMLメールでは不要だったりする部分が多くあるので、クライアント納品物としては不安が残ります。

HTMLメールの基礎部分を分かりやすく、無駄を省いたソースを公開しますので、参考にしてみてください。

HTMLメールと効果について

メール配信スタンドや、ステップメールなどメールマガジンを配信する方法は多々ありますが、配信するHTMLのテンプレートも一緒に提供しているところは少ないです。Googleメールでもデフォルトで「画像を表示しない」としている人も多いと思います。

制作側としても「HTMLメールは普通のコーディングと違う」「レスポンシブにするのはどうしたら良いか分からない」と言う事から敬遠されていないでしょうか？

HTMLメールを推奨するためには「効果」があると思います。メールの内容や対象者によって差があり、効果が計りにくい事もるのですが、若い世代を中心にHTMLメールは効果がある統計結果があるようです。

HTMLメールとテキストメールの効果の差

参考文献・引用元

HTMLメールの構造を理解する

HTMLメールは、基本的に「tableタグで構成され、デザイン調整のCSSはインラインで書く」のが一般的です。これはメールクライアントによって対応しているタグの種類に差があるためです。

レスポンシブのHTMLメールは、WEBサイトのレスポンシブとは少し異なります。WEBサイトのレスポンシブはブラウザの幅によって最適化された表示になると言うものですが、HTMLメールのレスポンシブは異なるメールクライアントでもバランス良く表示されると言うものです。

下図は日本経済新聞のメールマガジンをGmailで受信したもの。ブラウザの幅が違っても崩れずバランスよく表示されている。

WEBサイトでは空欄として使う「alt=”XX”」もメールでは画像表示しない人も多いので必須です。

HTMLメールダウンロード

ダウンロードできるHTMLの雛形は以下の環境で動作チェックを行ってみました。（2022年5月現在）
ご利用頂く前には十分テストを行ってください。

Windows 標準メール
Gmail　PC（Windows）／スマートフォン（iOS、Android）
Outlook　PC（Windows Office365）

最終的な確認は実機及びメールクライアントになりますが、CSSもインラインで、画像は絶対パスなのでブラウザにドラッグ＆ドロップで確認する事ができるのは楽。
最近では使わなくなってきているtdタグに入れる「colspan=”XX”」「rowspan=”XX”」など懐かしい属性も出てきます。

HTMLメール雛形ダウンロード

メール配信スタンド

メール配信スタンドは、どこでもほぼ同じ様な機能で、無料のお試し期間があるサービスが多いです。
まずは、配信する内容、配信数、目的、金額で選んでみても良いかと思います。

個人的には「オートビズ」「オレンジメール」あたりが良いかと思ってます。

サービス名	お試し期間	最小プラン配信数	価格	無料プラン	契約期間
blastmail	〇	7,000件／月	3,000円～	✕	1ヵ月～
める配くん	〇	500件／月	0円～	〇	3ヵ月～
オートビズ	✕	14,000件／日	1,980円～	✕	1ヵ月～
WiLL Mail	〇	10,000件／月	4,000円～	✕	1ヵ月～
エキスパ	✕	5,000件／日	3,800円～	✕	1ヵ月～
マイスピー	✕	無制限	3,300円～	✕	1ヵ月～
オレンジメール	〇	2,000件	2,480円～	〇※¹	1ヵ月～
アスメル	✕	無制限	3,333円	✕	1ヵ月～
acmailer	―	―	―	―	サーバーソフト

※¹ 個人・サークルでご利用いただく方向けのみ

上記金額に初期費用がプラスされる場合があります。

特定電子メールの送信の適正化等に関する法律(特定電子メール法)

消費者庁のサイトにガイドラインなど記載があるので配信される時はチェックする事をお薦めします。

消費者庁特定電子メール法について

最後に

HTMLメールを配信するサイトはリニューアル案件、もしくはユーザー登録数があるサイトになります。メール配信スタンドや、MAクラウドサービスなど配信するサービスは多くありますが、ユーザーに届くものなので機能を100％信用しないで確実にテストを行って配信するようにした方が無難です。配信前に誤配信時のユーザー対応、クライアント対応、などのリカバリー手段の方法と確認も忘れずに。

Special Thanks
下記の記事を参考、コードをそのまま、あるいは改造して使用させていただきました。

※リンクは張られていないものは、リンク先のサイトアドレスが変更もしくは見つからなくなったためです。

＜ご注意＞上記の紹介は、提供者や販売・運営者様及びその企業を差別や批判するものではありません。個人的な見解結果としての紹介となりますので、最終判断は皆さまご自身でお願いいたします。また、掲載内容は変更されていくのでこの記事記載日以降は内容が異なる場合もあります事ご了承ください。