無料ニュースレターテンプレート:業界別おすすめデザイン 15 選
EC、SaaS、エージェンシーなど業界別に無料のニュースレターテンプレート 15 点を紹介。どのメールプラットフォームでもすぐにカスタマイズして使えます。
白紙のキャンバスからニュースレターを作るのは大変です。空のエディタを前に、どうコンテンツを整理するか、どのレイアウトを使うか、デザインに何時間もかけずにプロらしく見せるにはどうすればいいか、頭を悩ませることでしょう。
ニュースレターテンプレートがその問題を解決します。実績のある構成とプロ品質のデザインが用意されており、コンテンツ、ブランディング、画像でカスタマイズするだけです。優れたテンプレートはモバイル対応、複数のメールクライアントに対応しており、コンバージョンを意識したデザインになっています。
このガイドでは、業界・用途別に整理した 15 種類の無料ニュースレターテンプレートを紹介します。各テンプレートについて、デザイン原則、推奨コンテンツ構成、カスタマイズのコツを解説します。
効果的なニュースレターテンプレートの条件
具体的なテンプレートに入る前に、良いテンプレートと優れたテンプレートを分けるものを理解しておきましょう。
技術的な要件
| 要件 | 重要な理由 |
|---|---|
| モバイル対応 | メールの 60% 以上がモバイルデバイスで開封される |
| クロスクライアント対応 | Gmail、Outlook、Apple Mail などで正しく表示される |
| 高速読み込み | 画像は合計 1MB 未満、テンプレートは 100KB 未満 |
| ダークモード対応 | メールクライアントでの普及が進んでいる |
| アクセシビリティ | スクリーンリーダー対応、十分なコントラスト比 |
| ウェブセーフフォント | プラットフォーム間で一貫したレンダリング |
デザイン原則
視覚的階層。 最も重要なコンテンツが最も目立つようにします。サイズ、色、配置を使って読者の目を上から下へ自然に誘導します。
スキャンしやすいレイアウト。 メールの受信者のほとんどはじっくり読まずにスキャンします。見出し、箇条書き、短い段落、明確なセクション区切りを使ってコンテンツを消化しやすくします。
一貫したブランディング。 ニュースレターはすぐに認識できるものでなければなりません。ブランドカラー、ロゴ、タイポグラフィをすべての号で一貫して使用します。
モバイルでは 1 カラム。 複数カラムのレイアウトはモバイルで崩れることがあります。1 カラムのレイアウトを使用するか、複数カラムのセクションが小さい画面できれいにスタックされることを確認します。
動いている4つのレイアウト
下の各パネルは、テンプレートそのものの実際のメールHTMLを、実寸の幅の枠に収めたものです。幅を375pxまで狭めて、列が縦に積み重なる様子をご覧ください。
ご覧のテーマに追随します。もう一方を見るにはヘッダーで切り替えてください。
The Letter のHTMLを読む
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Letter</title>
<style>
body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
a { text-decoration:underline; }
@media only screen and (max-width:620px) {
.wrap { width:100% !important; }
.stack { display:block !important; width:100% !important; max-width:100% !important; }
.gutter { padding-left:20px !important; padding-right:20px !important; }
.cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
.h1 { font-size:26px !important; line-height:32px !important; }
.thumb { width:100% !important; height:auto !important; max-width:100% !important; }
/* A digest row is the one two-column layout that should NOT stack: the
thumbnail shrinks and stays beside the headline, because a roundup is
read by scanning and a full-width decorative image per story destroys
that. */
.row-thumb { width:80px !important; }
.row-thumb img { width:80px !important; height:80px !important; }
.hide-sm { display:none !important; }
}
@media (prefers-color-scheme: dark) {
.d-bg { background-color:#151515 !important; }
.d-card { background-color:#1c1c1c !important; }
.d-ink { color:#f2f2f2 !important; }
.d-mute { color:#a8a8a8 !important; }
.d-rule { border-color:#3a3a3a !important; }
}
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f0efec;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">メモアプリに残しているその引用は、あなたのコンテンツカレンダーよりよく働いています。</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f0efec;">
<tr><td align="center" style="padding:32px 12px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">
<tr><td style="padding:0;">
<img src="/_astro/letter-masthead.BcPkHvz4.png" width="600" height="250" alt="Meridian Press のヘッダー:同心円状の青い弧を斜めの帯が横切る" style="width:100%;height:auto;max-width:600px;">
</td></tr>
<tr><td class="gutter" style="padding:36px 88px 0 88px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Meridian Press · 第47号</p>
</td></tr>
<tr><td class="gutter" style="padding:0 88px;font-family:'Hiragino Mincho ProN','Yu Mincho','MS PMincho',serif;">
<h1 class="h1 d-ink" style="margin:0 0 20px 0;font-size:34px;line-height:42px;font-weight:400;color:#141414;">アーカイブこそが製品だ</h1>
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">3週間前、2019年に書いた文章を探して見つかりませんでした。サイトにも、書き出したファイルにも、プラットフォーム自身の検索にもありません。1200号あって、機能していた索引は私の記憶だけでした。</p>
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">6年ニュースレターを続けることについて、誰も教えてくれないのがこの部分です。送るのは簡単です。残すのは簡単ではありません。</p>
</td></tr>
<tr><td class="gutter" style="padding:8px 88px 28px 88px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td class="quote" style="border-left:3px solid #0084d1;padding:4px 0 4px 0;padding-left:20px;font-family:'Hiragino Mincho ProN','Yu Mincho','MS PMincho',serif;">
<p class="d-ink" style="margin:0;font-size:19px;line-height:30px;font-style:italic;color:#141414;">公開したものはすべて預け入れです。引き出しの仕組みを作る人はほとんどいません。</p>
</td></tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 88px;font-family:'Hiragino Mincho ProN','Yu Mincho','MS PMincho',serif;">
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">そこで今週、過去号を本物のアーカイブとして作り直しました。タグ、全文検索、恒久的なURL付きで。9日かかりました。購読者数は動きませんでした。サイト滞在時間は3倍になりました。</p>
<p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">うまくいかなかった部分も含めて、すべて以下にあります。</p>
</td></tr>
<tr><td class="gutter" style="padding:0 88px 36px 88px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<a href="https://example.com" style="font-size:17px;line-height:24px;font-weight:600;color:#0084d1;text-decoration:underline;">本号を全文読む →</a>
</td></tr>
<tr><td class="gutter d-rule" style="padding:0 88px;border-top:1px solid #e4e2de;"></td></tr>
<tr><td class="gutter" style="padding:24px 88px 40px 88px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:22px;color:#6b6b6b;">毎週木曜、手で書いています。返信してください、必ず読みます。</p>
<p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Meridian Press, 14 Harbour Lane, Bristol BS1 4TT<br>
<a href="https://example.com" class="d-mute" style="color:#8a8a8a;">配信停止</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">ブラウザーで表示</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> ご覧のテーマに追随します。もう一方を見るにはヘッダーで切り替えてください。
The Digest のHTMLを読む
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Digest</title>
<style>
body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
a { text-decoration:underline; }
@media only screen and (max-width:620px) {
.wrap { width:100% !important; }
.stack { display:block !important; width:100% !important; max-width:100% !important; }
.gutter { padding-left:20px !important; padding-right:20px !important; }
.cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
.h1 { font-size:26px !important; line-height:32px !important; }
.thumb { width:100% !important; height:auto !important; max-width:100% !important; }
/* A digest row is the one two-column layout that should NOT stack: the
thumbnail shrinks and stays beside the headline, because a roundup is
read by scanning and a full-width decorative image per story destroys
that. */
.row-thumb { width:80px !important; }
.row-thumb img { width:80px !important; height:80px !important; }
.hide-sm { display:none !important; }
}
@media (prefers-color-scheme: dark) {
.d-bg { background-color:#131313 !important; }
.d-card { background-color:#1b1b1b !important; }
.d-ink { color:#f3f3f3 !important; }
.d-mute { color:#a5a5a5 !important; }
.d-rule { border-color:#333333 !important; }
.d-chip { background-color:#10352f !important; color:#7fd8c6 !important; }
}
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f4f3f0;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">あなたの火曜日に値する6件。うち2件は価格の話です。</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f4f3f0;">
<tr><td align="center" style="padding:28px 12px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;border-radius:6px;">
<tr><td class="gutter" style="padding:30px 32px 22px 32px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" style="font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-ink" style="margin:0;font-size:20px;line-height:26px;font-weight:800;color:#141414;">The Tuesday Digest</p>
<p class="d-mute" style="margin:4px 0 0 0;font-size:14px;line-height:20px;color:#6b6b6b;">2026年8月26日 · 6件 · 9分</p>
</td>
<td valign="middle" align="right" class="hide-sm">
<span class="d-chip" style="display:inline-block;background:#e2f4ef;color:#00614f;border-radius:999px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:12px;font-weight:700;padding:6px 12px;">第212号</span>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:2px solid #141414;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="gutter" style="padding:0 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
<tr>
<td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
<img src="/_astro/digest-1.gDWNYw1C.png" width="112" height="112" alt="斜めの帯が横切る抽象的なターコイズの弧" style="width:112px;height:112px;border-radius:4px;">
</td>
<td valign="top" style="font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;color:#007d6a;">01 · 価格設定</p>
<p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
<a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">3社が従量課金へ移り、2社が戻った</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">戻った2社は同じことを言います。サポートの負荷が売上より先に増えた、と。</p>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="gutter" style="padding:0 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
<tr>
<td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
<img src="/_astro/digest-2.ch7Avmad.png" width="112" height="112" alt="焦点をずらした抽象的なターコイズの環" style="width:112px;height:112px;border-radius:4px;">
</td>
<td valign="top" style="font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;color:#007d6a;">02 · 到達性</p>
<p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
<a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">Gmail の大量送信者向けルールから1年。実際に変わったのはこれです</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">苦情率だけが、誰かが近づいた唯一のしきい値でした。残りはもともと当たり前でした。</p>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="gutter" style="padding:0 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
<tr>
<td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
<img src="/_astro/digest-3.DP0eG3wj.png" width="112" height="112" alt="オフホワイトの地に抽象的な同心円状のターコイズの弧" style="width:112px;height:112px;border-radius:4px;">
</td>
<td valign="top" style="font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;color:#007d6a;">03 · 手仕事</p>
<p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
<a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">ニュースレターのアーカイブはリンク集ではなく検索プロダクトだ</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">9日の作業、購読者の増加ゼロ、サイト滞在時間3倍。面白いのはこの交換条件のほうです。</p>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="gutter" style="padding:24px 32px 34px 32px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-mute" style="margin:0 0 14px 0;font-size:15px;line-height:24px;color:#555555;">残り3件は下にあります。みんなが返信してくる請求書の話もそこに。</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#007d6a" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#007d6a;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">6件すべて読む</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
<tr><td class="gutter d-rule" style="padding:0 32px;border-top:1px solid #eceae6;"></td></tr>
<tr><td class="gutter" style="padding:20px 32px 30px 32px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">The Tuesday Digest, 9 Fitzroy Street, Manchester M1 2AL<br>
<a href="https://example.com" class="d-mute" style="color:#8a8a8a;">配信停止</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">配信設定</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">ブラウザーで表示</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> ご覧のテーマに追随します。もう一方を見るにはヘッダーで切り替えてください。
The Storefront のHTMLを読む
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Storefront</title>
<style>
body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
a { text-decoration:underline; }
@media only screen and (max-width:620px) {
.wrap { width:100% !important; }
.stack { display:block !important; width:100% !important; max-width:100% !important; }
.gutter { padding-left:20px !important; padding-right:20px !important; }
.cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
.h1 { font-size:26px !important; line-height:32px !important; }
.thumb { width:100% !important; height:auto !important; max-width:100% !important; }
/* A digest row is the one two-column layout that should NOT stack: the
thumbnail shrinks and stays beside the headline, because a roundup is
read by scanning and a full-width decorative image per story destroys
that. */
.row-thumb { width:80px !important; }
.row-thumb img { width:80px !important; height:80px !important; }
.hide-sm { display:none !important; }
}
@media (prefers-color-scheme: dark) {
.d-bg { background-color:#141210 !important; }
.d-card { background-color:#1d1a18 !important; }
.d-ink { color:#f5f2ef !important; }
.d-mute { color:#aaa39d !important; }
.d-rule { border-color:#38322d !important; }
.d-tile { background-color:#241f1c !important; }
}
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#efece8;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">新作プリント4点。港の1点は40部で、今週は持ちません。</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#efece8;">
<tr><td align="center" style="padding:24px 12px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">
<tr><td class="gutter" style="padding:22px 24px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td class="d-ink" style="font-size:17px;line-height:22px;font-weight:800;color:#141414;">Northlight</td>
<td align="right" class="d-mute hide-sm" style="font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:13px;line-height:20px;color:#6b6b6b;">秋の発売 · 04</td>
</tr></table>
</td></tr>
<tr><td style="padding:0;">
<img src="/_astro/shop-hero.r4mykM_E.png" width="600" height="360" alt="Northlight の新作プリント4点:温かみのあるオフホワイトに重なる錆色の弧" style="width:100%;height:auto;max-width:600px;">
</td></tr>
<tr><td class="gutter" style="padding:30px 40px 0 40px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<h1 class="h1 d-ink" style="margin:0 0 12px 0;font-size:30px;line-height:38px;font-weight:800;color:#141414;">4点のプリント。各40部。</h1>
<p class="d-mute" style="margin:0 0 22px 0;font-size:16px;line-height:26px;color:#555555;">この発売のプリントはすべて手刷りで番号入り、なくなればそれきりです。ここでは何も増刷しません。</p>
</td></tr>
<tr><td class="gutter" style="padding:0 40px 26px 40px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">発売を見る</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
<tr><td class="gutter" style="padding:0 32px 8px 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
<tr><td style="padding:0;"><img src="/_astro/shop-print-1.B7Z7OyM8.png" width="272" height="272" alt="Harbour、錆色の抽象プリント" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
<tr><td style="padding:16px 16px 18px 16px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Harbour</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">50 × 70 cm · コットンラグ紙にジクレー</p>
<p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£85</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">カートに入れる</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</td>
<td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
<tr><td style="padding:0;"><img src="/_astro/shop-print-2.CMBKLJ38.png" width="272" height="272" alt="Dusk、琥珀色の抽象プリント" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
<tr><td style="padding:16px 16px 18px 16px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Dusk</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">50 × 70 cm · コットンラグ紙にジクレー</p>
<p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£85</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">カートに入れる</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</td>
</tr>
<tr>
<td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
<tr><td style="padding:0;"><img src="/_astro/shop-print-3.C9XLoBz6.png" width="272" height="272" alt="Tide、菫色の抽象プリント" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
<tr><td style="padding:16px 16px 18px 16px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Tide</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">40 × 50 cm · コットンラグ紙にジクレー</p>
<p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£65</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">カートに入れる</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</td>
<td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
<tr><td style="padding:0;"><img src="/_astro/shop-print-4.jL_6WDwF.png" width="272" height="272" alt="Quarry、深緑の抽象プリント" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
<tr><td style="padding:16px 16px 18px 16px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Quarry</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">40 × 50 cm · コットンラグ紙にジクレー</p>
<p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£65</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">カートに入れる</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:6px 40px 30px 40px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#faf9f7;border-radius:4px;">
<tr><td style="padding:16px 20px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-ink" style="margin:0;font-size:15px;line-height:24px;color:#242424;"><strong>英国内は75ポンド以上で送料無料。</strong> 額装はご購入手続きで選べます。額装なしは30日以内なら返品可能。</p>
</td></tr>
</table>
</td></tr>
<tr><td class="gutter d-rule" style="padding:0 40px;border-top:1px solid #ebe7e2;"></td></tr>
<tr><td class="gutter" style="padding:20px 40px 30px 40px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Northlight Print Co., Unit 4 Wharf Road, Leeds LS10 1JQ<br>
<a href="https://example.com" class="d-mute" style="color:#8a8a8a;">配信停止</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">ブラウザーで表示</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> ご覧のテーマに追随します。もう一方を見るにはヘッダーで切り替えてください。
The Brief のHTMLを読む
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Brief</title>
<style>
body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
a { text-decoration:underline; }
@media only screen and (max-width:620px) {
.wrap { width:100% !important; }
.stack { display:block !important; width:100% !important; max-width:100% !important; }
.gutter { padding-left:20px !important; padding-right:20px !important; }
.cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
.h1 { font-size:26px !important; line-height:32px !important; }
.thumb { width:100% !important; height:auto !important; max-width:100% !important; }
/* A digest row is the one two-column layout that should NOT stack: the
thumbnail shrinks and stays beside the headline, because a roundup is
read by scanning and a full-width decorative image per story destroys
that. */
.row-thumb { width:80px !important; }
.row-thumb img { width:80px !important; height:80px !important; }
.hide-sm { display:none !important; }
}
@media (prefers-color-scheme: dark) {
.d-bg { background-color:#121212 !important; }
.d-card { background-color:#1a1a1a !important; }
.d-ink { color:#f2f2f2 !important; }
.d-mute { color:#a6a6a6 !important; }
.d-rule { border-color:#333333 !important; }
.d-tile { background-color:#232323 !important; }
.d-track { background-color:#2c2c2c !important; }
}
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f1f0f4;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">返信率が4ポイント上がりましたが、理由はまだ分かりません。現時点の推測を中に書きました。</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f1f0f4;">
<tr><td align="center" style="padding:26px 12px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;border-radius:6px;">
<tr><td style="padding:0;background:#141414;border-radius:6px 6px 0 0;">
<img src="/_astro/brief-band.CsaAK-Uv.png" width="600" height="150" alt="Ledger Weekly のヘッダー:ほぼ黒の地に菫色の弧" style="width:100%;height:auto;max-width:600px;border-radius:6px 6px 0 0;">
</td></tr>
<tr><td class="gutter" style="padding:26px 32px 18px 32px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p style="margin:0 0 4px 0;font-size:12px;line-height:16px;color:#8f83ff;">Ledger Weekly · 第35週</p>
<h1 class="h1 d-ink" style="margin:0;font-size:26px;line-height:34px;font-weight:800;color:#141414;">返信率は動いたのに、誰も何もリリースしていない</h1>
</td></tr>
<tr><td class="gutter" style="padding:0 26px 8px 26px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
<tr><td style="padding:18px 16px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">31.4%</p>
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">開封率</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">▲ 1.2ポイント</p>
</td></tr>
</table>
</td>
<td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
<tr><td style="padding:18px 16px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">8.9%</p>
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">クリック率</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#b8442d;">▼ 0.4ポイント</p>
</td></tr>
</table>
</td>
<td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
<tr><td style="padding:18px 16px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">6.1%</p>
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">返信率</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">▲ 4.0ポイント</p>
</td></tr>
</table>
</td>
</tr></table>
</td></tr>
<tr><td class="gutter" style="padding:20px 32px 0 32px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-ink" style="margin:0 0 18px 0;font-size:16px;line-height:26px;color:#242424;">送信側は何も変えていません。同じリスト、同じ木曜日、同じテンプレート。見つかった唯一の変数は、件名が11号ぶりに疑問文になったことです。</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:12px;line-height:16px;color:#6b6b6b;">セグメント別の返信</p>
</td></tr>
<tr><td class="gutter" style="padding:0 32px 22px 32px;">
<table role="presentation" class="chart" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:15px;line-height:20px;color:#242424;">有料購読者</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="100%" style="width:100%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">11.2%</td>
</tr>
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:15px;line-height:20px;color:#242424;">無料・90日以内に活動</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="57%" style="width:57%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">6.4%</td>
</tr>
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:15px;line-height:20px;color:#242424;">無料・休眠</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="16%" style="width:16%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">1.8%</td>
</tr>
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:15px;line-height:20px;color:#242424;">トライアル</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="44%" style="width:44%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">4.9%</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px 28px 32px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#141414" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#141414;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">詳細な分析を読む</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
<tr><td class="gutter d-rule" style="padding:0 32px;border-top:1px solid #e9e7ee;"></td></tr>
<tr><td class="gutter" style="padding:20px 32px 28px 32px;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;">
<p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Ledger Weekly, 2 Cathedral Square, Edinburgh EH1 2QN<br>
<a href="https://example.com" class="d-mute" style="color:#8a8a8a;">配信停止</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">ブラウザーで表示</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> 無料ニュースレターテンプレート 15 選
1. ベーシックな会社アップデート
おすすめの業種: B2B 企業、エージェンシー、専門サービス
シンプルで実用的な構成のテンプレートです。
- 会社のロゴとヘッダー
- 簡単な編集挨拶(2〜3 文)
- 見出し、短い説明文、CTA を持つコンテンツブロック 3〜4 個
- ソーシャルリンクと配信停止を含むフッター
デザインのポイント: 余白を十分に取ったクリーンでプロフェッショナルなレイアウト。見出しと CTA ボタンにブランドのメインカラーを使用します。画像はヒーロー画像 1 枚と小さなサムネイルに絞ります。
コンテンツ構成:
- チームメンバーからの個人的な挨拶
- 注目記事またはお知らせ
- サブコンテンツ 2〜3 件
- クイックリンクまたはリソースセクション
- 連絡先情報を含むフッター
2. EC 商品ショーケース
おすすめの業種: オンラインショップ、リテールブランド、DTC 企業
販売を促進するための商品フォーカスのレイアウトです。
- 注目商品またはプロモーションのヒーローバナー
- 画像、商品名、価格、購入ボタン付きの商品グリッド(2x2 または 3x1)
- 顧客レビューまたはお客様の声セクション
- サブプロモーションまたは新着商品
デザインのポイント: 大きくて高品質な商品画像が不可欠です。モバイルでは 1 カラムにスタックするグリッドレイアウトを使用します。価格と CTA ボタンはすぐに見えるようにします。
Tajo と Brevo を利用している EC ブランドでは、各購読者の閲覧・購買履歴に基づいたパーソナライズされた商品レコメンドをこれらのテンプレートに動的に表示できます。パーソナライゼーション戦略については EC メールマーケティングのガイドをご覧ください。
3. コンテンツダイジェスト
おすすめの業種: メディア企業、コンテンツクリエイター、出版社
複数の記事を紹介するコンテンツ重視のテンプレートです。
- 大きな画像と抜粋を持つ注目記事
- タイトルと 1 行サマリーを持つ追加記事 5〜8 件
- 各記事のカテゴリラベル
- 「人気記事」または「編集部おすすめ」のコールアウト
デザインのポイント: 読みやすいタイポグラフィと十分な行間でレイアビリティを優先します。各記事エントリーに一貫したフォーマットを使用して、読者が素早くスキャンできるようにします。
4. パーソナルニュースレター
おすすめの業種: 個人事業主、思想的リーダー、コンサルタント
個人的な手紙のような雰囲気のミニマルでテキスト中心のテンプレートです。
- 著者の写真と名前
- 長文コンテンツ(500〜800 ワード)
- 最小限の画像とデザイン要素
- スタイリングされたボタンではなくシンプルなテキストリンク
- 個人的な結びのあいさつ
デザインのポイント: シンプルさで成功するテンプレートです。1 カラムレイアウト、標準フォント、最小限のスタイリングを使用します。マーケティングコミュニケーションではなく個人メールのように感じさせることが目標です。
5. SaaS 製品アップデート
おすすめの業種: ソフトウェア企業、テックスタートアップ、開発ツール
製品アップデートを伝えるための機能フォーカスのレイアウトです。
- バージョン番号またはアップデートタイトルのヘッダー
- スクリーンショットまたは GIF を持つ機能ハイライト
- 改善点と修正の箇条書きリスト
- 次期バージョンのティーザー
- 新機能を試す CTA
デザインのポイント: 説明するのではなく見せるために製品スクリーンショットまたはインターフェイス画像を含めます。ソフトウェアの美的感覚を反映したクリーンでモダンなデザインを使用します。
6. イベント招待
おすすめの業種: イベント主催者、カンファレンス、ウェビナーホスト
登録を促すことだけに特化したテンプレートです。
- イベント名とビジュアルブランディング
- 日時と場所(またはオンラインプラットフォーム)
- 写真と経歴を持つスピーカーハイライト
- アジェンダの概要
- 目立つ登録 CTA
- 早期割引または席数限定の緊急性
デザインのポイント: CTA ボタンはスクロールしなくても見える位置と詳細の後の 2 か所以上に配置します。適切な場合はカウントダウンや緊急感のある言葉を使用します。
7. ウィークリーラウンドアップ
おすすめの業種: 業界ニュースレター、キュレーテッドコンテンツ出版社
ウェブからのコンテンツをキュレートするための構造化されたテンプレートです。
- 編集者メモ(2〜3 文)
- ソース帰属、タイトル、簡単なコメントを持つキュレーテッドリンク 5〜10 件
- 番号またはカテゴリ分けされたセクション
- 収益化している場合の「スポンサー」または「注目」セクション
- 読者アンケートまたはフィードバックプロンプト
デザインのポイント: 各キュレーテッドアイテムの明確な番号付けと一貫したフォーマットで読者がナビゲートしやすくします。微妙な境界線または背景色でセクションを分けます。
8. 非営利団体のインパクトレポート
おすすめの業種: 慈善団体、NGO、社会的企業
インパクトストーリーを共有し、寄付を促すためのテンプレートです。
- インパクト統計の見出し(「今月 1,000 家族を支援しました」)
- 写真付きのストーリー(受益者またはプロジェクト 1 件)
- キャンペーン目標に向けた進捗バー
- ボランティアまたはイベントの機会
- 寄付 CTA ボタン
デザインのポイント: 写真と実際のストーリーで感情的なインパクトを先行させます。進捗バーと統計で具体的な成果を示します。
9. 季節プロモーション
おすすめの業種: 小売、ホスピタリティ、季節ビジネス
祝日・季節キャンペーン向けのビジュアルに富んだテンプレートです。
- フルワイドの季節ヒーロー画像
- 明確な条件を持つプロモーションオファー
- キュレーテッドな商品セレクションまたはギフトガイド
- 締め切りまたはカウントダウン要素
- 全体に複数の CTA
デザインのポイント: ボールドカラーと季節のイメージで緊急性を生み出します。プロモーションオファーがスクロールなしですぐにわかるようにします。画像の多いメールはクライアント間でレンダリングの問題が生じる可能性があるため、徹底的にテストします。
10. 教育シリーズ
おすすめの業種: オンラインコース、コーチングビジネス、教育機関
教育コンテンツを提供するための構造化されたテンプレートです。
- レッスン番号とシリーズタイトル
- 主要な学習ポイントまたは学習目標
- 明確なセクションを持つメインコンテンツ
- 実践演習またはアクションアイテム
- 進捗インジケーター(レッスン 3/8 など)
- 次のレッスンまたは関連リソースへの CTA
デザインのポイント: シリーズのすべてのレッスンで一貫した構成を使用して、購読者が何を期待するかわかるようにします。完了を促すために進捗インジケーターを含めます。
11. 不動産リスティング
おすすめの業種: 不動産エージェント、プロパティ管理会社
リッチなビジュアル要素を持つ物件フォーカスのテンプレートです。
- 大きなフォトギャラリーを持つ注目物件
- 物件詳細(価格、寝室数、バスルーム数、面積)
- グリッド形式の追加物件 3〜4 件
- 市場情報または近隣エリアのスポットライト
- 写真付きのエージェント連絡先情報
デザインのポイント: 高品質な物件写真が不可欠です。クリックしなくても価格、サイズ、場所などの重要な詳細がすぐに見えるようにします。
12. レストラン・フードビジネス
おすすめの業種: レストラン、フードデリバリー、ケータリング会社
食欲をそそるビジュアルのテンプレートです。
- 注目料理またはメニューアイテムのヒーロー画像
- 週替わりスペシャルまたは新メニューアイテム
- 予約または注文の CTA
- 顧客レビューのハイライト
- 場所と営業時間
デザインのポイント: フード写真はプロフェッショナルで食欲をそそるものにします。温かみのある色と十分な余白を使用します。メインの CTA(注文、予約、来店)を見逃せないようにします。
13. フィットネス・ウェルネス
おすすめの業種: ジム、パーソナルトレーナー、ウェルネスブランド
モチベーションとアクションに特化したエネルギッシュなテンプレートです。
- モチベーションを高めるヒーロー画像
- 今週のワークアウトまたはウェルネスのヒント
- クラススケジュールまたは今後のイベント
- メンバースポットライトまたはトランスフォーメーションストーリー
- 予約またはメンバーシップの CTA
デザインのポイント: アクション指向の写真とボールドなタイポグラフィを使用します。押しつけがましくないながらもモチベーションを高めるトーンを維持します。
14. エージェンシーのポートフォリオショーケース
おすすめの業種: クリエイティブエージェンシー、フリーランサー、デザインスタジオ
最近の作品を紹介するポートフォリオスタイルのテンプレートです。
- 大きなビジュアルと簡単なケーススタディを持つ注目プロジェクト
- グリッド形式の最近のプロジェクト 2〜3 件
- クライアントの声
- チームまたは採用情報のアップデート
- 潜在的なクライアントへの問い合わせ CTA
デザインのポイント: 大きな高品質ビジュアルで作品自体を語らせます。テキストは最小限にして、プロセスの説明よりも成果に焦点を当てます。
15. コミュニティニュースレター
おすすめの業種: 会員制組織、オンラインコミュニティ、地域ビジネス
エンゲージメントを促進するコミュニティフォーカスのテンプレートです。
- コミュニティニュースとお知らせ
- メンバースポットライトまたはインタビュー
- 今後のイベントカレンダー
- ディスカッションプロンプトまたはアンケート
- ユーザー生成コンテンツセクション
- 参加・エンゲージの CTA
デザインのポイント: コミュニティのつながりを育てるために、許可を得たメンバーの写真と名前を含めます。温かく包括的なトーンを使い、返信や参加を促します。
無料ニュースレターテンプレートの入手先
メールマーケティングプラットフォーム
ほとんどのプラットフォームは無料プランにテンプレートを含んでいます。
| プラットフォーム | 無料テンプレート数 | カスタマイズ | 無料プラン |
|---|---|---|---|
| Brevo | 60 種類以上 | ドラッグ&ドロップエディタ | あり |
| Mailchimp | 100 種類以上 | ドラッグ&ドロップエディタ | あり(制限付き) |
| HubSpot | 45 種類以上 | ドラッグ&ドロップエディタ | あり |
| MailerLite | 80 種類以上 | ドラッグ&ドロップエディタ | あり |
| Constant Contact | 200 種類以上 | ドラッグ&ドロップエディタ | なし |
Brevo のテンプレートライブラリは、商品告知、注文確認メール、プロモーションキャンペーンなど、Tajo 経由でストアデータと連携する EC ビジネス向けのテンプレートが充実しています。
サードパーティのテンプレートソース
- Litmus Community: クロスクライアント互換性データ付きの無料テストされたテンプレート
- Really Good Emails: インスピレーション向けの実際のニュースレター事例キュレーション
- Stripo: 1,500 種類以上のデザインを持つ無料メールテンプレートビルダー
- BeeFree: 200 種類以上の無料レスポンシブテンプレートを持つドラッグ&ドロップエディタ
- MJML: コードでレスポンシブメールテンプレートを構築するためのオープンソースフレームワーク
ブランド向けにテンプレートをカスタマイズする
必須のカスタマイズ
使用前にすべてのテンプレートで必要な変更:
- ロゴとブランドカラー: デフォルトのブランディングを自社のものに置き換える
- タイポグラフィ: ブランドフォントを使用する(ウェブセーフフォールバックあり)
- フッター情報: 事業詳細と法的要件で更新する
- ソーシャルメディアリンク: 実際のプロフィールを追加する
- 配信停止リンク: すべてのマーケティングメールに法的に必要
高度なカスタマイズ
テンプレートに慣れてきたら、以下の強化を検討しましょう。
- ダイナミックコンテンツブロック: 異なる購読者セグメントに異なるコンテンツを表示する
- パーソナライゼーショントークン: 購読者の名前、場所、嗜好を挿入する
- 条件付きセクション: 購読者の属性に基づいてセクションを表示・非表示にする
- インタラクティブ要素: アンケートや AMP 対応のインタラクティブ機能を追加する
ニュースレターテンプレートのベストプラクティス
送信前にテストする。 最低でも Gmail、Outlook、Apple Mail、Yahoo にテストメールを送りましょう。包括的なクロスクライアントテストには Litmus や Email on Acid などのツールを使用します。
画像を最適化する。 すべての画像を圧縮して読み込み時間を短縮します。メールクライアントが画像をブロックした場合に備えて、すべての画像に alt テキストを含めます。
ファイルサイズを抑える。 メールの合計サイズ(HTML と画像)は HTML で 100KB 未満、コンテンツ全体で 1MB 未満に抑えます。それ以上大きいメールは Gmail でクリップされたり、スパムフィルターでブロックされたりするリスクがあります。
一貫性を維持する。 毎号同じテンプレート構成を使用します。購読者は慣れたレイアウトに読み癖をつけ、一貫性が信頼を築きます。
プレーンテキストを含める。 HTML をレンダリングしないメールクライアント向けに、常にプレーンテキスト版を提供します。ほとんどのプラットフォームでは自動生成されますが、読みやすさを確認しましょう。
メール配信到達率を定期的にテストする。 美しいテンプレートもスパムに入ってしまえば意味がありません。デザインの努力と並行して、送信者レピュテーションと認証(SPF、DKIM、DMARC)を監視しましょう。
はじめ方
業界とコンテンツスタイルに合ったテンプレートを選びましょう。まずブランドカラー、ロゴ、フッターなど最小限のカスタマイズから始め、最初の号を送りましょう。開封率とクリックデータを通じてオーディエンスに響くものがわかってきたら、デザインとコンテンツ構成を改善していきましょう。
最高のニュースレターテンプレートは、最も視覚的に印象的なものではありません。オーディエンスが定期的に読み、クリックし、受け取ることを楽しみにしてくれるものです。