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

2025 8/26

メルマガ配信はレスポンシブ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”」など懐かしい属性も出てきます。

以下ソースをコピペして利用してください。
次の３項目に注意してコーディングしてください。

CSSはソース内に記載する
画像ファイルは絶対パスで記載する
htmlはtableタグを基本に複雑なタグは使用しない

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="format-detection" content="date=no" />
  <meta name="format-detection" content="address=no" />
  <meta name="format-detection" content="telephone=no" />
  <title>HTMLメール雛形</title>
</head>

<body bgcolor="#e0e0e0" width="100%" style="margin: 0; color: #000; font-size: 16px; padding:0; margin:0; line-height:1.6;">
  <!-- bodyでベースを作る -->
  <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#e0e0e0" style="border-collapse:collapse;">
    <!-- 初めのtableでレスポンシブ化 --> 
    <tbody>
      <tr>
        <td style="text-align:center; padding:20px 0;">
<!-- contents block A start --> 
          <table width="80%" border="0" style="margin:auto; min-width:600px; max-width:800px;" bgcolor="#ffffff">
            <!-- コンテンツ大枠の白バック -->
            <tbody>
              <tr>
                <td style="text-align:center; padding:0 20px;">
                  <table bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" border="0" style="text-align:left; border-collapse:collapse; width:100%; min-width:600px; max-width:800px; margin:20px auto;">
                    <!-- コンテンツAの中身 -->
                    <tbody>
                      <tr>
                        <td colspan="2" style="text-align:center;">
                          <img src="https://hon-dana.org/xxxxxxxxx.jpg" width="560" height="35" border="0" align="" />
                        </td>
                      </tr>
                      <tr>
                        <td colspan="2" style="padding:20px 0;">メールユーザー 様</td>
                      </tr>
                      <tr>
                        <td style="padding:20px 0 20px;">
                          <table>
                            <tbody>
                              <tr>
                                <td bgcolor="#f00" width="4" valign="middle">
                                  <img src="https://hon-dana.org/xxxxxxxxx.jpg" width="5" height="1" alt="" />
                                </td>
                                <td style="font-size:20px; margin:0 0 10px; padding:0 0 0 20px" width="99%" nowrap="nowrap">
                                  <h3 style="margin:0">コンテンツA見出し</h3>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                      <tr>
                        <td style="padding:0 0 20px 0">
                          <table border="2" bordercolor="#F0F0F0" style="border-collapse:collapse; border-spacing:0; width:100%;">
                            <tbody>
                              <tr>
                                <td style="padding:10px;">

                                  <table style="border-collapse:collapse; border-spacing:0; width:100%; font-weight: 500;">
                                    <tbody>
                                      <tr>
                                        <td style="padding-bottom: 4px;">お知らせ</td>
                                        <td style="color: #f00; text-align: right; padding-bottom: 4px;">お知らせを確認してください。</td>
                                      </tr>
                                      <tr>
                                        <td style="padding-bottom: 4px;">来月の予定</td>
                                        <td style="color: #f00; text-align: right; padding-bottom: 4px;">予定を確認する。</td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                      <tr>
                        <td colspan="2"><a href="https://ja.wikipedia.org/wiki/HTML%E9%9B%BB%E5%AD%90%E3%83%A1%E3%83%BC%E3%83%AB">ウィキペディアのHTML電子メールより</a><br>電子メール（エイチティーエムエルでんしメール）は、プレーンテキストでは実現できない機能である「書式の指定」や「データの意味の指定」を行った電子メールである。マークアップにはしばしばHTMLの部分集合が使われているが、必ずしも明確に部分集合を定義したものばかりではない。<br>
                          <br>殆どの電子メールクライアントは、HTML電子メールに対応し、大半は既定されている[1]。これらのクライアントの多くは、HTML電子メールを作成するためのGUIエディタと、受け取ったHTML電子メールを表示するためのレンダリングエンジンの両方を含む。 
                          <br />
                          <a href="https://hon-dana.org/" style="color:#00f; text-decoration:none;">https://hon-dana.org/</a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
<!-- contents block A end --> 
          <br />
<!-- contents block B start --> 
          <table width="80%" border="0" style="margin:auto; min-width:600px; max-width:800px;" bgcolor="#ffffff">
            <!-- コンテンツ大枠の白バック -->
            <tbody>
              <tr>
                <td style="text-align:center; padding:0 20px;">
                  <!-- コンテンツBの中身 -->
                  <table bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" border="0" style="text-align:left; border-collapse:collapse; width:100%; min-width:600px; max-width:800px; margin:0 auto 20px;">
                    <tbody>
                      <tr>
                        <td colspan="2" style="padding:40px 0 20px;">
                          <table>
                            <tbody>
                              <tr>
                                <td bgcolor="#f00" width="4" valign="middle">
                                  <img src="https://hon-dana.org/xxxxxxxxx.jpg" width="5" height="1" alt="" />
                                </td>
                                <td style="font-size:20px; margin:0 0 10px; padding:0 0 0 20px" width="99%" height="20" nowrap="nowrap">
                                  <h3 style="margin:0">コンテンツB見出し</h3>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                      <tr valign="middle">
                        <td width="120" style="padding:0 20px 0 0">
                          <img src="https://hon-dana.org/xxxxxxxxx.jpg" width="120" height="120" alt="商品画像" />
                        </td>
                        <td width="99%">
                          <strong style="color: #111111; font-size: 16px; line-height:1.6">商品タイトルなど見出し商品タイトルなど見出し商品タイトルなど見出し商品タイトルなど見出し商品タイトルなど見出し</strong>
                          <br />
                          <a href="#" style="color: #00f; font-size: 16px; text-decoration:none;">テキストリンク</a>
                        </td>
                      </tr>
                      <tr valign="middle">
                        <td width="120" style="padding:0 20px 0 0">
                          <img src="https://hon-dana.org/xxxxxxxxx.jpg" width="120" height="120" alt="商品画像" />
                        </td>
                        <td width="99%">
                          <strong style="color: #111111; font-size: 16px;text-decoration:none; line-height:1.6">商品タイトルなど見出し商品タイトルなど見出し商品タイトルなど見出し商品タイトルなど見出し商品タイトルなど見出し</strong>
                          <br />
                          <a href="#" style="color: #00f; font-size: 16px; text-decoration:none;">テキストリンク</a>
                        </td>
                      </tr>
                      <tr>
                        <td colspan="2" align="center" style="padding:20px 0">
                          <a href="#" style="color:#f00; text-decoration:none;">
                            <img src="https://hon-dana.org/xxxxxxxxx.jpg" width="280" height="50" alt="ボタン画像でリンク" />
                          </a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
<!-- contents block B end --> 
<!-- footer start -->
          <table cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; width:100%; min-width:600px; max-width:800px; margin:20px auto 10px;">
            <tbody>
              <tr>
                <td align="center" nowrap="nowrap">
                  <a href="#" style="color: #00f; font-size: 14px;text-decoration:none; padding:0 10px">メール配信停止</a>
                </td>
                <td align="center" nowrap="nowrap">
                  <a href="#" style="color: #00f; font-size: 14px;text-decoration:none; padding:0 10px">プライバシーポリシー</a>
                </td>
                <td align="center" nowrap="nowrap">
                  <a href="#" style="color: #00f; font-size: 14px;text-decoration:none; padding:0 10px">特定商取引法に基づく表記</a>
                </td>
              </tr>
            </tbody>
          </table>
<!-- footer end -->
        </td>
      </tr>
    </tbody>
  </table>
</body>

</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
下記の記事を参考、コードをそのまま、あるいは改造して使用させていただきました。

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

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