無料HTMLメールテンプレート
事前構築済みのレスポンシブHTMLメールテンプレートを閲覧します。ニュースレター、ウェルカムメール、プロモーション、トランザクションメッセージのHTMLをプレビューしてコピーします。
Newsletter
Clean newsletter template with header, content sections, and footer.
HTMLソース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Newsletter</title>
</head>
<body style="margin:0;padding:0;background-color:#f4f4f5;font-family:Arial,Helvetica,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f4f5;">
<tr>
<td align="center" style="padding:40px 20px;">
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="background-color:#ffffff;border-radius:8px;overflow:hidden;">
<!-- Header -->
<tr>
<td style="background-color:#16a34a;padding:30px 40px;text-align:center;">
<h1 style="margin:0;color:#ffffff;font-size:28px;font-weight:bold;">Your Newsletter</h1>
<p style="margin:8px 0 0;color:#bbf7d0;font-size:14px;">Monthly updates and insights</p>
</td>
</tr>
<!-- Main Content -->
<tr>
<td style="padding:40px;">
<h2 style="margin:0 0 16px;color:#18181b;font-size:22px;">Featured Article</h2>
<p style="margin:0 0 20px;color:#52525b;font-size:15px;line-height:1.6;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<a href="#" style="display:inline-block;background-color:#16a34a;color:#ffffff;text-decoration:none;padding:12px 24px;border-radius:6px;font-size:14px;font-weight:bold;">Read More</a>
<hr style="margin:30px 0;border:none;border-top:1px solid #e4e4e7;">
<h2 style="margin:0 0 16px;color:#18181b;font-size:22px;">More Stories</h2>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="padding:12px 0;border-bottom:1px solid #f4f4f5;">
<h3 style="margin:0 0 4px;color:#18181b;font-size:16px;">Story Title One</h3>
<p style="margin:0;color:#71717a;font-size:13px;">Brief description of the first story goes here.</p>
</td>
</tr>
<tr>
<td style="padding:12px 0;border-bottom:1px solid #f4f4f5;">
<h3 style="margin:0 0 4px;color:#18181b;font-size:16px;">Story Title Two</h3>
<p style="margin:0;color:#71717a;font-size:13px;">Brief description of the second story goes here.</p>
</td>
</tr>
<tr>
<td style="padding:12px 0;">
<h3 style="margin:0 0 4px;color:#18181b;font-size:16px;">Story Title Three</h3>
<p style="margin:0;color:#71717a;font-size:13px;">Brief description of the third story goes here.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color:#f4f4f5;padding:24px 40px;text-align:center;">
<p style="margin:0;color:#71717a;font-size:12px;">You received this email because you subscribed to our newsletter.</p>
<p style="margin:8px 0 0;color:#71717a;font-size:12px;"><a href="#" style="color:#16a34a;">Unsubscribe</a> | <a href="#" style="color:#16a34a;">View in browser</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>How to Use HTML Email Templates
テンプレートを選択
実際の使用向けに設計されたニュースレター、ウェルカムメール、プロモーション、トランザクションテンプレートから選択します。
プレビューとカスタマイズ
iframeでレンダリングされたテンプレートをプレビューして、ソースHTMLを確認し構造を理解します。
HTMLをエクスポート
ワンクリックで完全なHTMLコードをコピーして、メールプラットフォームに直接貼り付けます。
Why Use HTML Email Templates
レスポンシブデザイン
すべてのテンプレートはすべての画面サイズとデバイスで正しくレンダリングするテーブルベースのレイアウトを使用します。
GmailとOutlookでテスト済み
テンプレートはすべての場所で一貫したレンダリングのためにメールクライアント互換性のベストプラクティスに従っています。
クリーンなコード
インラインCSSとセマンティックなテーブル構造が軽量で保守しやすいHTMLメールコードを生成します。
ダークモード対応
色の選択とコントラスト比はライトモードとダークモードの両方のメールクライアントで適切に機能します。
モバイルファースト
モバイルの読者を念頭に置いて設計され、横スクロールなしで小さな画面での読みやすさを確保します。
プライバシー優先
すべてのテンプレートはブラウザで読み込まれてレンダリングされます。データは収集されず外部サーバーに送信されません。
Who Uses HTML Email Templates
メールデザイナー
カスタムメールデザインの出発点として使用し、テーブルベースのレイアウト作業の時間を節約します。
マーケター
すぐに使用できるレスポンシブテンプレートでニュースレターとプロモーションキャンペーンを素早く開始します。
開発者
アプリケーションのプログラム的なメール生成の基盤としてクリーンなHTMLソースコードをコピーします。
代理店
事前構築済みのテスト済みの基盤を使用してクライアントにプロフェッショナルなメールテンプレートをより速く提供します。
Need More Power?
Sign up for a free Tomba account to unlock bulk processing, API access, CRM integrations, and 75 free searches per month.
HTML Email Templates
ここで回答が見つからない場合は、専用セクションをご覧ください ヘルプセンター .