無料HTMLメールテンプレート（テーブルレイアウト・ダークモード対応）
無料HTMLメールテンプレート
無料HTMLメールテンプレート：テーブルレイアウト・ダークモード対応の8種、コピーして使える | We.Inc
ページ上で編集・プレビューできる無料HTMLメールテンプレート8種：ウェルカム、領収書、パスワード再設定、ニュースレター、メールアドレス確認、発送通知、イベント招待、フィードバック依頼。テーブルレイアウト、壊れにくいボタン、ダークモード対応、テスト用チェックリスト付き。
確実に表示されるHTMLメールは、レイアウトに入れ子のテーブルを使い、スタイルをインラインで書き、コンテンツ幅を約600ピクセルにし、ボタンを画像ではなく余白付きのリンクで作り、すべての画像に代替テキストを付けます。下の8つのテンプレートはこれらのルールに従い、メールクライアントが対応していればダークモードにも対応します。コピーする前にその場で編集してプレビューできます。
8つのテンプレート
各テンプレートの左側のコードを編集すると、右側のプレビューが更新されます。プレビューはブラウザーで描画しているので、あくまで目安として扱ってください。メールクライアントによって表示が異なるため、ページ下部のテスト用チェックリストが重要になります。
- 送りたいメールに合うテンプレートを選びます。
- コード欄でテキスト、リンク、色を変更し、プレビューを確認します。
- HTMLをコピーして、メール配信サービスのカスタムHTML機能に貼り付けます。
- スマートフォンとパソコンの実際の受信箱に、ライトモードとダークモードの両方でテスト送信します。
- 1通のメールでのメインのアクションは1つに絞りましょう。ボタンが2つになると注意が半分に分かれます。
- プリヘッダーは意図して書きましょう。書かないと、メールクライアントは最初に見つけたテキストを表示します。
- 画像は自社ドメインかメール配信サービスに置き、https の絶対URLで指定しましょう。
- フォームに入力して作るほうがよければ、HTMLメールテンプレートビルダーを使ってください。
よくある質問
なぜHTMLメールではいまだにテーブルを使うのですか？
一部のメールクライアント、特に古いデスクトップ版は、最新のCSSレイアウトを無視するエンジンで描画します。テーブルは、そのすべてで機能する唯一のレイアウト方法です。
メールをダークモードに対応させるにはどうすればいいですか？
color-scheme のメタタグと、ダークモード用の色を指定した prefers-color-scheme メディアクエリを追加します。対応しているクライアントはそれを使い、そうでないクライアントは独自に色を反転することがあります。そのため、画像に文字を埋め込むのは避け、両方のモードでテストしてください。
これらのテンプレートを商用で使えますか？
はい。このページのために私たちが作成したものです。どのプロジェクトでも、コピーして変更し、送信してかまいません。
壊れにくいボタン（bulletproof button）とは何ですか？
画像の代わりに、色付きのテーブルセルの中に余白付きのリンクを置いて作るボタンです。画像がブロックされていても表示され、機能します。
プレーンテキストも大切です
- HTMLと一緒にプレーンテキスト版も送りましょう。多くのメール配信サービスは自動で生成しますが、一度は目を通してください。領収書やパスワード再設定のリンクは、書式がなくても意味が通じる必要があるからです。
8つのテンプレートをその場で確認
ウェルカムメール
お礼を伝え、次に何が起きるかを説明し、わかりやすいアクションを1つ示します。
領収書
入れ子のテーブルを使うことで、古いデスクトップ版を含むどのクライアントでも商品名と価格がきれいに揃います。
パスワード再設定
短く、有効期限と、本人が依頼していない場合の対処法を記載します。ボタンをブロックするクライアントのために、リンクをテキストでも載せておきましょう。
ニュースレター
1つのブロックに1つの話題を、見出し、1文、リンクで載せます。ここでの画像URLはプレースホルダーなので、プレビューでは画像がブロックされたときに読者が見るもの、つまり適切なサイズの枠に入った代替テキストが表示されます。
メールアドレス確認
登録の直後に使います。ボタンに加えてコードも載せておくと、別の端末でメールを開いた人にも便利です。
発送通知
追跡リンクを最初に配置します。読者がメールを開いたのはそのためだからです。
イベント招待
日付、時刻、場所をひと目でわかるブロックにまとめ、その後に1つのアクションを置きます。
フィードバック依頼
1つの質問にワンタップで答えられる形式のほうが、長いアンケートへのリンクよりはるかに多くの回答を得られます。
コードがこの形になっている理由
HTMLメールをどこでも正しく表示させるためのルール
- テーブルでレイアウトする（role="presentation"）
- 一部のデスクトップクライアントは、今でも flexbox、grid、多くの配置ルールを無視するため
- 重要なスタイルはインラインで書く
- 一部のクライアントやWebメールの表示では、style ブロックが削除または無視されるため
- コンテンツ幅を約600pxにする
- ほとんどのクライアントの閲覧ウィンドウに収まるため
- ボタンは色付きセルの中に余白付きのリンクで作る
- 画像をブロックし、一部のCSSを無視するクライアントでも崩れないため
- すべての画像に width、height、alt を指定する
- 読者が許可するまで画像がブロックされることが多いため
- 非表示のプリヘッダーを追加する
- 件名の後に表示されるプレビューテキストを制御できるため
- color-scheme メタと prefers-color-scheme を使う
- ダークモードに対応したクライアントが、色を反転する代わりに指定したダークモードの色を使うため
- マーケティングメールには配信停止リンクを入れる
- 迷惑メール対策の法律や大手メールプロバイダーで義務付けられているため
送信する前に
テスト用チェックリスト
- 実際のクライアント
- 大手Webメールサービスのアカウント、デスクトップクライアント、スマートフォンに送信します
- 画像オフ
- 画像の読み込みをオフにして、メールの意味が通じるか確認します
- ダークモード
- スマートフォンとデスクトップクライアントをダークモードに切り替えます
- リンク
- 配信停止リンクを含め、すべてのリンクをクリックします
- プレーンテキスト部分
- テキスト版も送ります。一部の読者やフィルターはそちらを使います
- 迷惑メールチェック
- 大量に送信する前に、ドメインを認証（SPF、DKIM、DMARC）します
フォームに入力して作るほうがよければ、こちらをどうぞ：
HTMLメールテンプレートビルダー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る