【初心者向け】HTMLメルマガコーディングの基本｜テンプレート付き完全ガイド

2026年5月25日
2026年5月25日
Coding

「メルマガをHTMLで作りたいけど、何から始めればいいかわからない」「Webサイトのコーディング経験はあるけど、メルマガは勝手が違うらしい」――そんな方に向けて、HTMLメルマガコーディングの基礎から実装テンプレートまでをまとめて解説します。

この記事を読めば、メルマガHTMLの特殊なルールが理解でき、コピペで使える基本テンプレートを手に入れることができます。

1 メルマガHTMLとWebサイトHTMLの違い
2 メルマガコーディングの3つの基本ルール
3 HTMLメルマガ基本テンプレートの解説
4 よく使うコーディングスニペット
5 実コーディングの流れ
6 まとめ

メルマガHTMLとWebサイトHTMLの違い

まず大前提として、メールのHTMLは普通のWebサイトのHTMLとは別物だと考えてください。

Webサイトは Chrome や Safari など、最近のブラウザならどれもほぼ同じように表示してくれます。ところがメールの世界では、Outlook、Gmail、Apple Mail、iPhone、Android、それぞれが HTML / CSS の解釈をバラバラにします。

特に厄介なのが Windows版の Outlook で、これはなんと Microsoft Word の表示エンジンを使ってメールを表示しています。そのため、<div> や Flexbox といった現代的なレイアウト手法がほぼ使えません。

つまりメルマガでは、「90年代のWebサイトみたいな古い書き方」で組む必要があるのです。

メルマガコーディングの3つの基本ルール

メルマガHTMLには、絶対に押さえておくべき3つのルールがあります。

ルール1：レイアウトは`<table>`で組む

<div> ではなく <table>（テーブル）でレイアウトを組みます。Outlook など古いメーラーは Flexbox や Grid をサポートしていないため、テーブルの入れ子で構造を作るのが定石です。

ルール2：CSSはインラインで書く

<style> タグや外部CSSではなく、各要素に直接 style="..." を書きます。Gmail の一部や Outlook.com では <style> タグが無視されることがあるためです。

ルール3：Outlook用の特殊コメントを使う

 という、Windows版 Outlook でだけ読まれる特殊コメント を必要に応じて入れます。Outlook だけ表示が崩れる場合の応急処置に使います。

HTMLメルマガ基本テンプレートの解説

ここからは、実際のテンプレートを上から順に解説していきます。

①DOCTYPE宣言

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">

Webサイトでは <!DOCTYPE html> の1行で済みますが、メールでは XHTML 1.0 という古い形式を指定するのが定番です。Outlook など一部のメーラーがこの宣言だと安定して表示できるためで、「お決まりの呪文」と覚えていただければ大丈夫です。

②head内のメタタグ

文字化け防止、ピンチ拡大の許可、ダークモードの抑制などの設定を入れます。特に重要なのが次の1行です。

<meta name="format-detection" content="telephone=no,address=no,email=no,date=no" />

これは、本文中の電話番号や日付（「2024年12月」など）を iPhone が勝手に青いリンクに変換するのを防ぐ設定です。これを入れないとデザイナーが意図しない色のリンクが表示されてしまうため、ほぼ必須の記述です。

③リセットCSS

img {
display: block;
border: 0;
}

これがないと、画像の下に謎の数pxの隙間ができたり、リンクにした画像の周りに青い枠線が出たりします。メルマガコーディングの「あるあるトラブル」のひとつなので、最初から防いでおきましょう。

④レスポンシブ対応のメディアクエリ

スマホ表示用のスタイルは、メディアクエリで指定します。

@media only screen and (max-width: 740px) {
  .wrapper { width: 100% !important; }
  .responsive-img { width: 100% !important; height: auto !important; }
}

これによって「PCで見ると740px固定、スマホで見ると画面幅にぴったり収まる」という挙動になります。画像に class="responsive-img" を付けておけば、スマホ表示で自動的に幅100%に伸びる仕組みです。

なお、メルマガの幅はかつては 600px が主流でしたが、近年は 740px や 800px のワイド設計も増えてきています。デザインに合わせて調整してください。

⑤MSO条件分岐コメント

<!--[if mso]>
  Outlookだけに読ませたい内容
<![endif]-->

Windows版 Outlook でだけ読み込まれる特殊なコメント です。他のメーラーからは普通のコメントとして無視されます。Outlook だけ表示が崩れたときの応急処置や、後述の「ブレットプルーフボタン」で活躍します。

⑥プリヘッダー

<div style="display:none; font-size:1px; color:#ffffff; max-height:0px; overflow:hidden;">
  ここにプリヘッダーテキストを記載
</div>

これは画面には表示されませんが、Gmail などの 受信トレイで件名の横にちょこっと表示される説明文 になります。「★最大50%OFFセール開催中★」のような魅力的な一文を入れると、開封率向上に繋がります。

⑦レイアウトの基本構造

メルマガの骨組みはこのパターンが基本です。

<table width="100%">       <!-- ① 外側のテーブル（背景用、画面いっぱい） -->
  <tr><td align="center">
    <table width="740">    <!-- ② 内側のテーブル（740px固定、コンテンツ用） -->
      <tr><td>
        ここにコンテンツを入れる
      </td></tr>
    </table>
  </td></tr>
</table>

外側のテーブルで画面いっぱいに広げてコンテンツを中央寄せし、その中に固定幅のテーブルを置く、という二重構造です。

中央寄せに margin: 0 auto ではなく align="center" の属性 を使うのもポイントです。Outlook が margin をうまく解釈できないため、属性で指定する方が安全です。

よく使うコーディングスニペット

実コーディングで頻繁に使うパターンを紹介します。

スニペット1：画像にリンクを貼る

<a href="{LINK_URL}" target="_blank" style="text-decoration:none;">
  <img src="{IMAGE_URL}" width="740" alt="代替テキスト"
    class="responsive-img"
    style="display:block; width:100%; max-width:740px; height:auto; border:0;" />
</a>

メルマガの最も基本的な構成要素です。alt 属性は画像が表示されない場合に意味が伝わるよう、必ず設定しましょう。

スニペット2：スペーサー（余白）

<table width="100%">
  <tr>
    <td height="20" style="height:20px; line-height:20px; font-size:0;">&nbsp;</td>
  </tr>
</table>

セクション間の余白を作るときの定番パターンです。font-size:0 を入れておかないと、 （空白文字）の高さの影響で意図しない余白ができることがあります。

スニペット3：ブレットプルーフボタン

<table align="center">
  <tr>
    <td align="center" bgcolor="#52C6F9" style="border-radius:4px;">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
        href="{LINK_URL}" style="height:50px;v-text-anchor:middle;width:300px;"
        arcsize="8%" strokecolor="#52C6F9" fillcolor="#52C6F9">
        <w:anchorlock/>
        <center style="color:#ffffff;font-size:16px;">ボタンテキスト</center>
      </v:roundrect>
      <![endif]-->
      <!--[if !mso]><!-- -->
      <a href="{LINK_URL}" target="_blank"
        style="display:inline-block; padding:14px 40px; color:#ffffff;
        text-decoration:none; border-radius:4px; background-color:#52C6F9;">
        ボタンテキスト
      </a>
      <!--<![endif]-->
    </td>
  </tr>
</table>

中の <v:roundrect> という不思議な記述は VML（Vector Markup Language） という Outlook 専用の言語で、Outlook で角丸ボタンを表示するための呪文です。これがあるおかげで、Outlook でも他のメーラーと同じように角丸のボタンが表示されます。

「ブレットプルーフ（防弾）」と呼ばれるのは、どんなメーラーでも崩れずに表示されるためです。覚えるのは大変なので、テンプレートとしてコピペで使うのがおすすめです。

実コーディングの流れ

実際の作業手順をまとめます。

デザインカンプの確認（Figma、PSD など）
テキスト・画像・リンクURLの素材整理
Figmaから必要な画像を書き出し（画像で表現する部分をスライス）
画像をサーバーにアップしてURLを取得
テンプレートの各セクションを埋めていく（スニペットを活用）
テストメール送信で各メーラーでの表示確認

特に最後の表示確認は非常に重要です。Gmail、Outlook、Apple Mail、iPhone、Android、それぞれで実際に送信してみないと、意図通りに表示されているかわかりません。

社内の複数アドレスへ送る、もしくは Litmus や Email on Acid といったテスト専用ツールを使うと、複数メーラーでの表示を一括確認できて便利です。

まとめ

HTMLメルマガコーディングの基本を整理すると、以下のようになります。

メルマガHTMLは Web サイトHTMLとは別物。古い書き方が必要
レイアウトは <table>、CSSはインライン、Outlook用には特殊コメント
display:block border:0 で画像の隙間問題を防ぐ
スマホ対応は @media (max-width: 740px) で
ボタンは「ブレットプルーフボタン」でメーラー間の表示差を吸収
実装後は必ず各メーラーで表示確認

最初は古い書き方や特殊な記述に戸惑うかもしれませんが、慣れてしまえばパターンは決まっています。テンプレートとスニペットを手元に持っておけば、誰でもメルマガコーディングはできるようになります。

ぜひこの記事を参考に、HTMLメルマガコーディングに挑戦してみてください。