メール文例集

告知

「*|〇〇|*」の部分はカスタマイズしてご使用ください。
差し込みタグとして本文に挿入することも可能です。

件名

  • デザイン
  • コード
<!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">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="format-detection" content="telephone=no,address=no,email=no,date=no">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="copyright" content="*|自社名|*">
<!--[if mso]><meta http-equiv="X-UA-Compatible" content="IE=edge" /><![endif]-->
<title></title>
<style type="text/css" class="general">
.l-wrapper { margin: 30px 0; }
@media screen and (max-width: 480px) {
.body { font-size: 75%; }
.l-wrapper { margin: 0; }
.l-oneColumn { padding: 0; }
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="body" bgcolor="#f0f0f0" style="font-family: YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; margin: 0 !important; padding: 0;">
<center class="l-wrapper" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding: 0; table-layout: fixed; width: 100%;">
<div class="l-wrapperInner" style="margin: 0 auto; max-width: 640px;">
<!--[if mso]>
<table width="640" align="center">
<tr>
<td>
<![endif]-->
<table class="l-main" align="center" cellpadding="0" cellspacing="0" style="background: #fff; border-collapse: collapse; border-spacing: 0; max-width: 680px; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td class="u-fullWidthImage" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<img src="https://files.ecumerun.com/email-templates/promotion/campaign/announcement-3/main_image.gif" alt="新商品 キャンペーン" style="border: 0 none; height: auto; line-height: 1; max-width: 640px; outline: none; text-decoration: none; width: 100%;">
</td>
</tr>

<tr>
<td class="l-oneColumn" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 0 15px;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<p class="u-center s-catch" style="font-size: 87.5%; line-height: 1.5; margin: 17px 0 0; text-align: center;">☆ チャンスは MM月DD日 00:00 まで ☆</p>
<div class="u-center s-title" style="color: #f44336; font-size: 190%; font-weight: bold; line-height: 1.25; margin: 14px 0 23px; text-align: center;">簡単応募! 新商品キャンペーン実施中<br>新商品の購入で○○○が当たるチャンス!</div>
</td>
</tr>
</table>
</td>
</tr>

<tr>
<!--[if mso]>
<table width="460" align="center">
<tr>
<td>
<![endif]-->
<td class="l-oneColumn" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 0 15px;">
<table width="100%" cellpadding="0" cellspacing="0" class="s-columnInner" align="center" style="border-collapse: collapse; border-spacing: 0; max-width: 460px; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<p class="s-text" style="font-size: 100%; line-height: 1.5; margin: 0 0 10px;">こんにちは! ○○○事務局です。<br>○○○では昨年に引き続き、新商品キャンペーンを開催いたします。<br>今年はなんと、新商品をご購入いただいた方の中から 抽選で○○○名様に○○○をプレゼント!<br>新商品を体験できるこの機会をぜひお見逃しなく!!</p>
</td>
</tr>
</table>
</td>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</tr>

<tr>
<td class="u-fullWidthImage s-line--top" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding-top: 16px;">
<img src="https://files.ecumerun.com/email-templates/promotion/campaign/announcement-3/line.png" width="640" alt="" style="border: 0 none; height: auto; line-height: 1; max-width: 640px; outline: none; text-decoration: none; width: 100%;">
</td>
</tr>

<tr>
<td class="l-oneColumn" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 0 15px;">
<!--[if mso]>
<table width="460" align="center">
<tr>
<td>
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" class="s-columnInner" align="center" style="border-collapse: collapse; border-spacing: 0; max-width: 460px; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<div class="s-hero u-center" style="color: #f44336; font-size: 190%; font-weight: bold; letter-spacing: -.02em; line-height: 1.25; margin: 27px 0 23px; text-align: center; white-space: nowrap;">☆ 新商品キャンペーン ☆</div>
<table class="s-list" width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; margin: 10px 0; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td class="s-list__disc" style="border-collapse: collapse; line-height: 1.5; mso-table-lspace: 0; mso-table-rspace: 0; text-align: center; vertical-align: top; width: 16px;">・</td>
<td class="s-list__item" style="border-collapse: collapse; line-height: 1.5; mso-table-lspace: 0; mso-table-rspace: 0;">対象商品: 新商品○○○</td>
</tr>
<tr>
<td class="s-list__disc" style="border-collapse: collapse; line-height: 1.5; mso-table-lspace: 0; mso-table-rspace: 0; text-align: center; vertical-align: top; width: 16px;">・</td>
<td class="s-list__item" style="border-collapse: collapse; line-height: 1.5; mso-table-lspace: 0; mso-table-rspace: 0;">応募方法: 商品についているシリアルナンバーをフォームに入力いただくだけ!</td>
</tr>
<tr>
<td class="s-list__disc" style="border-collapse: collapse; line-height: 1.5; mso-table-lspace: 0; mso-table-rspace: 0; text-align: center; vertical-align: top; width: 16px;">・</td>
<td class="s-list__item" style="border-collapse: collapse; line-height: 1.5; mso-table-lspace: 0; mso-table-rspace: 0;">実施期間: YYYY年MM月DD日 00:00 まで</td>
</tr>
<tr>
<td class="s-list__disc" style="border-collapse: collapse; line-height: 1.5; mso-table-lspace: 0; mso-table-rspace: 0; text-align: center; vertical-align: top; width: 16px;">・</td>
<td class="s-list__item" style="border-collapse: collapse; line-height: 1.5; mso-table-lspace: 0; mso-table-rspace: 0;">お一人さま何度でもご応募いただけます。</td>
</tr>
</table>

<!--[if mso]>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 0;"><img src="https://files.ecumerun.com/email-templates/promotion/campaign/announcement-3/spacer.gif" alt="" width="1" height="24" border="0" class="spacer" /></td>

</tr>
<tr>
<td bgcolor="#f44336" style="color: #fff; font-weight: bold; font-size: 130%; text-align: center; padding: 20px; background: #f44336;">
<![endif]-->
<a class="s-button" href="https://www" title="キャンペーンに応募する" target="_blank" style="background: #f44336; border-radius: 6px; color: #fff; display: block; font-size: 130%; font-weight: bold; line-height: 1.5; margin: 24px auto 0; max-width: 420px; padding: 20px; text-align: center; text-decoration: none;">キャンペーンに応募する</a>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>


<tr>
<td class="u-fullWidthImage s-line--bottom" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 30px 0 10px;">
<img src="https://files.ecumerun.com/email-templates/promotion/campaign/announcement-3/line.png" width="640" alt="" style="border: 0 none; height: auto; line-height: 1; max-width: 640px; outline: none; text-decoration: none; width: 100%;">
</td>
</tr>

<tr>
<td class="l-oneColumn" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding: 0 15px;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td class="u-center" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; text-align: center;">
<p class="s-footerText" style="font-size: 100%; line-height: 1.5; margin: 16px 0 10px;">*|名前|*様からのご応募をお待ちしています。</p>
</td>
</tr>
</table>
</td>
</tr>

<tr>
<td class="u-fullWidthImage s-footer" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding-bottom: 10px;">
<img src="https://files.ecumerun.com/email-templates/promotion/campaign/announcement-3/footer.png" alt="" width="100%" style="border: 0 none; height: auto; line-height: 1; max-width: 640px; outline: none; text-decoration: none; width: 100%;">
</td>
</tr>

<tr>
<td class="l-copyright s-copyright" style="background: #f0f0f0; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<p style="font-size: 81.25%; margin: 10px 0; text-align: center;">*|自社名|* &copy; 2017</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>