WCEX Cart Reminder Ver2.0 で追加された大きな機能の一つが、HTML形式のメール送信 です。テキスト形式しかなかった従来版から、ロゴ・ボタン・ブランドカラーを表現できる HTML メールへとアップグレードしたことで、お客様への印象が大きく変わります。
「HTMLメールを設定したけれど、どう作ればいいか分からない」「他社の事例はあっても、Welcart 向けのテンプレートが見つからない」というお声もよくいただきます。本記事では、WCEX Cart Reminder で使える「コピペで動くHTMLテンプレート3種類」と、クリック率を高めるための実践Tipsをまとめました。
ブランド体験を損なわず、コンバージョンも最大化する
目次
なぜカート離脱メールは「HTML化」すべきなのか
テキスト形式のメールにも、シンプルで読みやすい・到達率が高い・スパム判定されにくいといった独自の良さがあります。一方で Ver2.0 で HTML メール対応を実装した背景には、HTMLメールの方が訴求力で明らかに優位に立つという事実があります。
CTA ボタンで「カートへ戻る」を強く促せる
カート離脱メールの最終目的は、お客様に長文を読ませることではなく、「カートへ戻る」というワンクリック を引き出すことです。テキストメールでは URL がただの文字列にすぎませんが、HTML メールなら
- ブランドカラーで強調された、目立つボタン
- 「カートを確認して購入を完了する」など具体的な動作を示す文言
- ファーストビュー内に大きく配置
といった視覚的工夫でクリックを取りに行けます。
商品情報を「視覚的」に提示して、購買意欲を再点火できる
テキストメールでカート内容を表示すると、こんな具合になります。
ハンドグラインダー ウォールナット × 1
ハンドグラインダー マットブラック × 2
スパイスジャー（クリア）3個セット × 1
合計金額：¥12,980
整然としていますが、お客様が 「あ、あの商品だ」 と思い出すための訴求力には限界があります。HTML メールなら、表（テーブル）で罫線・余白・色を使って整理でき、お客様が「自分が選んだ商品」を視覚的に再認識しやすくなります。「合計金額」を大きく強調する、注意書きを薄く小さく添えるといった情報の階層化も自然にできます。
ブランド体験を損なわず、「いつものショップ感」を保てる
注文確認メールや配送通知メールが HTML 形式のショップで、カート離脱メールだけがプレーンテキストで届くと、お客様は無意識に 「いつもと違うメール」 と感じます。場合によってはフィッシングを疑われる可能性すらあります。
HTML メールなら
- ヘッダーにショップロゴ
- ブランドカラーを反映したレイアウト
- 既存の注文関連メールとの統一感
を実現でき、「いつものショップから届いた、いつものメール」という安心感を演出できます。これは、カート離脱メールに限らず ECブランドの一貫性を保つという意味でも重要です。
テキストメールにも独自の価値はある
公平を期すと、テキストメールにも固有のメリットがあります。
到達率の高さ
HTML を受信できない環境にも届く
スパム判定されにくい
シンプルな形式は迷惑メール扱いされる確率が低い
「個人からの手紙感」
BtoB の関係性重視の文脈では効果的（例：BtoB セミナー集客の A/B テストで、テキストメールが HTML メールの 2 倍超のクリック率を記録した事例も報告されています ─ アンダーワークス社）
ただしこれらは主に BtoB の関係性メール での話であり、EC のカート離脱メール（BtoC） では HTML の優位性が勝ります。
WCEX Cart Reminder Ver2.0 では、HTML テンプレートが空欄の場合は自動的にテキストモードでフォールバック送信 されます。「HTML を試してみて、合わなければテキストに戻す」も自由なので、安心して切り替えていただけます。
HTMLメールの設定 ─ 3 ステップで始められる
STEP 1
管理画面でメール形式を「HTML」に切り替え
- WordPress管理画面の「Welcart Shop」＞「カート離脱通知設定」をクリック
- 「メール設定」タブをクリック
- 「メール形式」の欄で「HTML形式」を選択
- ページ下部の「変更を保存」ボタンをクリック
テキスト用・HTML 用の本文は独立して保存されます：HTML モードからテキストモードに切り替えても、HTML の本文は消えません。後でまた HTML モードに戻すと、以前書いた HTML テンプレートがそのまま残ります。
STEP 2
HTMLテンプレートを「メール本文（HTML）」欄に貼り付け
このあと紹介するサンプルテンプレートをコピーし、編集の必要な部分（ショップ名・カラー・文章）だけを書き換えます。
STEP 3
プレースホルダーを正しく配置
HTMLメールで使えるプレースホルダーは以下の通りです。
| タグ | 置き換わる内容 |
|---|---|
| {customer_name} | お客様の名前（例：山田 太郎） |
| {recovery_url} | カートを復元するための URL（必須） |
| {cart_total} | カート内の合計金額（例：¥3,000） |
| {optout_url} | 配信停止のための URL |
| {item_loop}〜{/item_loop} | 商品ごとに繰り返すブロック（HTML モード専用） |
| {item_name} | 商品名（{item_loop} ブロック内でのみ使用可） |
| {item_quantity} | 数量（{item_loop} ブロック内でのみ使用可） |
{item_loop} の仕組みをマスターする
HTML メール最大のポイントは、商品行を動的に展開する {item_loop} タグです。{item_loop} と {/item_loop} で挟まれた部分が、カート内の商品数だけ繰り返し表示されます。
テンプレートに書く内容
{item_loop}
<tr>
<td>{item_name}</td>
<td>{item_quantity}</td>
</tr>
{/item_loop}
展開後（商品Aと商品Bがある場合）
<tr>
<td>商品A（青・Mサイズ）</td>
<td>2</td>
</tr>
<tr>
<td>商品B（赤・Lサイズ）</td>
<td>1</td>
</tr>
よくある間違い
- {item_loop} と {/item_loop} のどちらかが欠けている
→ 展開後 ： 1 件だけしか表示されない - {item_name} を {item_loop} の外に書いている
→ 展開後 ： エラーとなり表示されない - <table> の外に {item_loop} を置いている
→ 展開後 ： レイアウトが崩れる
HTMLテンプレート3選
ご紹介する 3 つのテンプレートには、見栄えのために 「在庫残りわずか」「送料無料まであと ¥◯◯」「14 日間返品交換可能」「2018年創業」 などの文言が含まれています。これらは プレースホルダーではなく、すべてのお客様に同じ内容で固定送信される静的テキストです。
実態と異なる文言を残したまま配信すると、景品表示法違反（優良誤認・有利誤認）や 顧客クレーム の原因になります。
必ず守っていただきたい 3 つのこと
1
プレースホルダー以外の文言はすべて静的テキストです
{customer_name} {recovery_url} {cart_total} {item_loop}〜{/item_loop} {item_name} {item_quantity} {optout_url} 以外は、すべて全顧客に同じ内容で送信されます
2
自社の実態と異なる文言は、必ず削除または修正してください
特に在庫状況・送料設定・返品ポリシー・創業年などの数値表現は要注意
3
本番運用前に必ず自社宛にテスト送信 し、すべての文言を一文ずつ確認してください
このあと紹介する各サンプルには、カスタマイズが必要な箇所のチェックリストを併記しています。
コピー＆ペーストでそのまま使うのではなく、必ず自社情報に置き換えてから本番運用してください。
サンプル 1
ミニマル・エレガント
余白と細い罫線、明朝体の見出しで「上質さ」を演出するベーシックなテンプレートです。
誰でも安心して使える王道の構成ながら、英字レターヘッド的なミニラベルや商品リストのナンバリングなど、細部までこだわったデザインになっています。
以下の部分を、自社情報に置き換えてからご利用ください。
- SHOP NAME（ヘッダーロゴ）
自社のショップ名に変更 - 2018年創業（右上の年表記）
実際の創業年に変更、または削除 - © SHOP NAME（フッター）
自社のコピーライト表記に変更 - 「カートに残されている商品をお知らせいたします…」（本文）
自社のトーン・案内文に合わせて調整
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カートに商品が残っています</title>
</head>
<body style="margin:0; padding:0; background-color:#ecebe7; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;" bgcolor="#ecebe7">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td align="center" style="padding:40px 12px;">
<!-- 上部のミニラベル -->
<table width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:600px; margin-bottom:14px;">
<tr>
<td align="center" style="font-size:11px; font-weight:700; letter-spacing:0.18em; color:#9a8f7e;">
─── お買い忘れのご案内 ───
</td>
</tr>
</table>
<table width="600" cellpadding="0" cellspacing="0" border="0"
style="width:100%; max-width:600px; background-color:#fdfcfa; border:1px solid #e6e3dc;">
<!-- ヘッダー -->
<tr>
<td style="padding:36px 44px 28px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:13px; font-weight:700; letter-spacing:0.18em; color:#2b2520;">
SHOP NAME
</td>
<td align="right" style="font-size:11px; letter-spacing:0.04em; color:#a8a098;">
2018 年創業
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:24px;">
<tr><td style="border-top:1px solid #d8d3c8; font-size:0; line-height:0;"> </td></tr>
</table>
</td>
</tr>
<!-- リードコピー -->
<tr>
<td style="padding:8px 44px 0;">
<p style="margin:0; font-family:Georgia,'Times New Roman','Yu Mincho','Hiragino Mincho ProN',serif; font-size:28px; line-height:1.55; color:#2b2520; letter-spacing:0.02em;">
お買い物の続き、<br>そのままになっていませんか。
</p>
</td>
</tr>
<!-- 本文 -->
<tr>
<td style="padding:24px 44px 0;">
<p style="margin:0 0 6px; font-size:13px; color:#6f6960; letter-spacing:0.02em;">
山田 太郎 様
</p>
<p style="margin:0; font-size:14px; line-height:1.95; color:#5a5249;">
カートに残されている商品をお知らせいたします。下記からそのままお買い物を続けていただけます。
入力途中のお客様情報も復元されますので、初めからのご入力は不要です。
</p>
</td>
</tr>
<!-- 商品セクション見出し -->
<tr>
<td style="padding:36px 44px 12px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:12px; font-weight:700; letter-spacing:0.08em; color:#8a8378;">
カートのご案内
</td>
<td align="right" style="font-size:11px; color:#a8a098; letter-spacing:0.04em;">
3 アイテム保管中
</td>
</tr>
</table>
</td>
</tr>
<!-- 商品テーブル -->
<tr>
<td style="padding:0 44px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td style="padding:18px 0; border-top:1px solid #ede9e1; font-size:11px; color:#a8a098; letter-spacing:0.12em; width:36px; vertical-align:middle;">
01
</td>
<td style="padding:18px 0; border-top:1px solid #ede9e1; font-size:14px; color:#2b2520; line-height:1.5;">
ハンドグラインダー ウォールナット
</td>
<td align="right" style="padding:18px 0; border-top:1px solid #ede9e1; font-size:13px; color:#6f6960; white-space:nowrap;">
× 1
</td>
</tr>
<tr>
<td style="padding:18px 0; border-top:1px solid #ede9e1; font-size:11px; color:#a8a098; letter-spacing:0.12em; width:36px; vertical-align:middle;">
02
</td>
<td style="padding:18px 0; border-top:1px solid #ede9e1; font-size:14px; color:#2b2520; line-height:1.5;">
ハンドグラインダー マットブラック
</td>
<td align="right" style="padding:18px 0; border-top:1px solid #ede9e1; font-size:13px; color:#6f6960; white-space:nowrap;">
× 2
</td>
</tr>
<tr>
<td style="padding:18px 0; border-top:1px solid #ede9e1; font-size:11px; color:#a8a098; letter-spacing:0.12em; width:36px; vertical-align:middle;">
03
</td>
<td style="padding:18px 0; border-top:1px solid #ede9e1; font-size:14px; color:#2b2520; line-height:1.5;">
スパイスジャー（クリア）3個セット
</td>
<td align="right" style="padding:18px 0; border-top:1px solid #ede9e1; font-size:13px; color:#6f6960; white-space:nowrap;">
× 1
</td>
</tr>
<tr>
<td colspan="3" style="padding:22px 0 0; border-top:2px solid #2b2520;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:12px; color:#8a8378; letter-spacing:0.04em;">
小 計
</td>
<td align="right" style="font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif; font-size:22px; font-weight:normal; color:#2b2520;">
¥12,980
</td>
</tr>
</table>
</td>
</tr>
</table>
<p style="margin:8px 0 0; font-size:10px; color:#a8a098; text-align:right; letter-spacing:0.04em;">
※ 送料・税は含まれておりません
</p>
</td>
</tr>
<!-- CTAボタン -->
<tr>
<td style="padding:44px 44px 0;" align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#2b2520" style="background-color:#2b2520; border-radius:2px;">
<a href="#recovery"
style="display:inline-block; padding:18px 56px; font-family:-apple-system,Helvetica,Arial,sans-serif; font-size:14px; font-weight:700; letter-spacing:0.1em; color:#fdfcfa; text-decoration:none;">
お買い物を再開する
</a>
</td>
</tr>
</table>
<p style="margin:14px 0 0; font-size:11px; color:#a8a098; letter-spacing:0.04em;">
ワンクリックでカートに戻れます
</p>
</td>
</tr>
<!-- フッター区切り -->
<tr>
<td style="padding:48px 44px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td style="border-top:1px solid #ede9e1; font-size:0; line-height:0;"> </td></tr>
</table>
</td>
</tr>
<!-- フッター -->
<tr>
<td style="padding:24px 44px 40px;">
<p style="margin:0 0 8px; font-size:11px; color:#8a8378; line-height:1.8; letter-spacing:0.02em;">
本メールはカートに商品が残っているお客様にお送りしています。
</p>
<p style="margin:0; font-size:11px; color:#a8a098; line-height:1.8; letter-spacing:0.02em;">
配信停止は <a href="#optout" style="color:#6f6960; text-decoration:underline;">こちら</a> から。
| © SHOP NAME
</p>
</td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
このテンプレートのポイント
1
ウォームグレー基調の上品な配色で、どんなショップにも馴染みやすい
2
明朝体の大見出しで、丁寧な印象を演出
3
商品リストに番号（01・02・03）を入れ、レターヘッド風の構成感
4
余白を多めに取り、視線の流れを丁寧にコントロール
5
まずはこれをベースに、ショップ名と「2018年創業」表記だけ変えて使ってみるのがおすすめ
サンプル 2
プレミアム・ブランド
ハイブランドのメルマガを意識した、上質感あふれるテンプレートです。
ロゴ周りの罫線装飾、明朝体の見出し、ベージュ系のアクセントカラーで、アパレル・コスメ・雑貨など、ブランド感を大切にしたいショップに合います。
以下の部分を、自社情報に置き換えてからご利用ください。
- YOUR BRAND（メインロゴ）
自社のブランド名に変更 - 上質な暮らしのために（サブコピー）
自社のキャッチコピーに変更、または削除 - ショップについて / 商品一覧 / お問い合わせ（フッターナビ）
リンク URL を自社のページに設定、または削除 - © YOUR BRAND（フッター）
自社のコピーライト表記に変更 - 「お選びいただいた品々を、大切にお預かりしております。」（本文）
自社のトーン・案内文に合わせて調整
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カートに商品が残っています</title>
</head>
<body style="margin:0; padding:0; background:#f4f0ea;" bgcolor="#f4f0ea">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td align="center" style="padding:40px 12px;">
<table width="560" cellpadding="0" cellspacing="0" border="0"
style="width:100%; max-width:560px;">
<!-- ブランドロゴエリア -->
<tr>
<td align="center" style="padding:0 0 32px;">
<table cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
<tr>
<td style="border-top:1px solid #c89878; width:40px; font-size:0; line-height:0;"> </td>
<td style="padding:0 16px; font-family:Georgia,'Times New Roman','Yu Mincho','Hiragino Mincho ProN',serif; font-size:12px; letter-spacing:0.16em; color:#c89878;">
お買い忘れのご案内
</td>
<td style="border-top:1px solid #c89878; width:40px; font-size:0; line-height:0;"> </td>
</tr>
</table>
<p style="margin:18px 0 0; font-family:Georgia,'Times New Roman','Yu Mincho','Hiragino Mincho ProN',serif; font-size:30px; font-weight:normal; color:#3d3530; letter-spacing:0.22em;">
YOUR BRAND
</p>
<p style="margin:4px 0 0; font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif; font-size:11px; letter-spacing:0.12em; color:#a8998a;">
上質な暮らしのために
</p>
</td>
</tr>
<!-- メインカード -->
<tr>
<td bgcolor="#ffffff"
style="background:#fff; padding:0; border-radius:4px; box-shadow:0 8px 28px rgba(61,53,48,0.08); overflow:hidden;">
<!-- カード上部の装飾バンド -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#c89878" style="background:#c89878; height:4px; font-size:0; line-height:0;"> </td>
</tr>
</table>
<!-- 本文上部 -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding:48px 48px 0;">
<table align="center" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto 22px;">
<tr>
<td style="font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif; font-size:32px; color:#c89878; line-height:1;">❦</td>
</tr>
</table>
<h1 style="margin:0; font-family:Georgia,'Times New Roman','Yu Mincho','Hiragino Mincho ProN',serif; font-size:26px; font-weight:normal; color:#3d3530; text-align:center; line-height:1.55; letter-spacing:0.04em;">
お買い物の続き、<br>お忘れではございませんか
</h1>
<table align="center" cellpadding="0" cellspacing="0" border="0" style="margin:24px auto 0;">
<tr>
<td style="border-top:1px solid #e6dac9; width:60px; font-size:0; line-height:0;"> </td>
</tr>
</table>
<p style="margin:24px 0 0; font-family:-apple-system,'Hiragino Sans','Helvetica Neue',sans-serif; font-size:13px; line-height:2.0; color:#6f6258; text-align:center;">
山田 太郎 様<br>
お選びいただいた品々を、大切にお預かりしております。<br>
お時間のあるときに、続きをお楽しみください。
</p>
</td>
</tr>
</table>
<!-- 商品セクション -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding:40px 48px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:12px; letter-spacing:0.08em; color:#c89878; font-weight:700;">
カート内の商品
</td>
<td align="right" style="font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif; font-size:11px; color:#a8998a;">
全 3 アイテム
</td>
</tr>
</table>
<!-- 商品リスト -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:18px;">
<tr>
<td width="34" valign="top" style="padding:20px 0; border-top:1px solid #ede4d6; font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif; font-size:11px; color:#c89878; letter-spacing:0.08em;">
01
</td>
<td valign="top" style="padding:20px 0; border-top:1px solid #ede4d6;">
<p style="margin:0; font-family:'Hiragino Sans',sans-serif; font-size:14px; color:#3d3530; line-height:1.6;">
ハンドグラインダー ウォールナット
</p>
<p style="margin:4px 0 0; font-size:11px; color:#a8998a;">
数量：1
</p>
</td>
</tr>
<tr>
<td width="34" valign="top" style="padding:20px 0; border-top:1px solid #ede4d6; font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif; font-size:11px; color:#c89878; letter-spacing:0.08em;">
02
</td>
<td valign="top" style="padding:20px 0; border-top:1px solid #ede4d6;">
<p style="margin:0; font-family:'Hiragino Sans',sans-serif; font-size:14px; color:#3d3530; line-height:1.6;">
ハンドグラインダー マットブラック
</p>
<p style="margin:4px 0 0; font-size:11px; color:#a8998a;">
数量：2
</p>
</td>
</tr>
<tr>
<td width="34" valign="top" style="padding:20px 0; border-top:1px solid #ede4d6; font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif; font-size:11px; color:#c89878; letter-spacing:0.08em;">
03
</td>
<td valign="top" style="padding:20px 0; border-top:1px solid #ede4d6;">
<p style="margin:0; font-family:'Hiragino Sans',sans-serif; font-size:14px; color:#3d3530; line-height:1.6;">
スパイスジャー（クリア）3個セット
</p>
<p style="margin:4px 0 0; font-size:11px; color:#a8998a;">
数量：1
</p>
</td>
</tr>
<tr>
<td colspan="2" style="padding:24px 0 0; border-top:2px solid #c89878;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:13px; color:#6f6258; letter-spacing:0.04em;">
小 計
</td>
<td align="right" style="font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif; font-size:26px; font-weight:normal; color:#3d3530;">
¥12,980
</td>
</tr>
</table>
</td>
</tr>
</table>
<p style="margin:10px 0 0; font-size:11px; color:#a8998a; text-align:right;">
※ 送料・税は別途加算されます
</p>
</td>
</tr>
</table>
<!-- CTAエリア -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding:44px 48px 48px;" align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#3d3530" style="background:#3d3530; border-radius:32px;">
<a href="#recovery"
style="display:inline-block; padding:18px 60px; font-family:'Hiragino Sans',sans-serif; font-size:14px; font-weight:600; letter-spacing:0.12em; color:#fff; text-decoration:none;">
お買い物を続ける
</a>
</td>
</tr>
</table>
<p style="margin:14px 0 0; font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif; font-size:11px; color:#a8998a; letter-spacing:0.04em;">
— カートの続きへ —
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- フッター -->
<tr>
<td style="padding:36px 16px 0;" align="center">
<table cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
<tr>
<td style="font-size:11px; letter-spacing:0.08em; color:#a8998a; padding:0 14px; border-right:1px solid #d8c9b3;">
ショップについて
</td>
<td style="font-size:11px; letter-spacing:0.08em; color:#a8998a; padding:0 14px; border-right:1px solid #d8c9b3;">
商品一覧
</td>
<td style="font-size:11px; letter-spacing:0.08em; color:#a8998a; padding:0 14px;">
お問い合わせ
</td>
</tr>
</table>
<p style="margin:20px 0 0; font-family:'Hiragino Sans',sans-serif; font-size:11px; color:#a8998a; line-height:1.9;">
本メールはカートに商品が残っているお客様にお送りしています。<br>
配信停止は <a href="#optout" style="color:#6f6258; text-decoration:underline;">こちら</a> から。
</p>
<p style="margin:18px 0 0; font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif; font-size:10px; color:#c89878; letter-spacing:0.22em;">
© YOUR BRAND
</p>
</td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
このテンプレートのポイント
1
ロゴ上下の罫線装飾＋小さなキャプションで、レターヘッド風の格調を演出
2
メインカード上部のベージュアクセントバンドが、シンプルながら高級感を生む
3
明朝体の見出しに装飾記号を組み合わせて、独自性を演出
4
ベージュ（#c89878）のアクセントカラーをロゴ装飾・罫線・タイトルなどに一貫使用
5
角丸の大きい CTA ボタンで、クリックを促す視覚的誘導
サンプル 3
モダン・緊急訴求
「カートに入れた商品が品切れになる前に」というメッセージを前面に出した、コンバージョン率重視のテンプレートです。
SaaS のオンボーディングメールを思わせる洗練された緊急訴求で、海外調査では 「scarcity（希少性）」を件名や本文に入れたカート離脱メールは全体の 44% に達しており、効果的な手法とされています。
このサンプルは特に注意：固定文言が多く含まれます。
残したまま配信すると 景品表示法違反（優良誤認・有利誤認）や クレーム の原因になります。
以下の部分を、自社情報に置き換えてからご利用ください。
- 「在庫残りわずか」（各商品のバッジ）
在庫が実際に少ない商品でない場合は 必ず削除。優良誤認に該当する可能性 - 「送料無料まで あと ¥2,020」
自社の送料設定金額に 必ず変更、または削除 - 「14 日間返品交換可能」
自社の返品ポリシーに 必ず合わせる、または削除 - 「SSL 暗号化で安全に決済」
該当しない場合は削除 - 「人気商品のため、お早めのご注文をおすすめいたします」（本文）
実態と合わない場合は 必ず変更 - 「約 30 秒で購入完了」
実態と合わない場合は 必ず変更 または削除 - SHOP NAME（ヘッダーロゴ）
自社のショップ名に変更 - お知らせ（バッジ）
そのまま使用可 / 不要なら削除
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カートに残された商品があります</title>
</head>
<body style="margin:0; padding:0; background:#0f172a; font-family:-apple-system,'Helvetica Neue','Hiragino Sans',sans-serif;" bgcolor="#0f172a">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td align="center" style="padding:32px 12px;">
<table width="600" cellpadding="0" cellspacing="0" border="0"
style="width:100%; max-width:600px; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,0.25);">
<!-- アラートヘッダー -->
<tr>
<td bgcolor="#0f172a" style="background:#0f172a; padding:0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#ef4444" style="background:#ef4444; height:3px; font-size:0; line-height:0;"> </td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding:24px 32px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:18px; font-weight:800; color:#fff; letter-spacing:0.04em;">
SHOP <span style="color:#ef4444;">NAME</span>
</td>
<td align="right">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#ef4444" style="background:#ef4444; border-radius:4px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding:6px 12px; font-size:11px; font-weight:800; color:#fff; letter-spacing:0.06em;">
⚡ お知らせ
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- ヒーローセクション -->
<tr>
<td style="padding:44px 32px 12px;">
<p style="margin:0 0 12px; font-size:12px; font-weight:800; color:#ef4444; letter-spacing:0.08em;">
▎ お買い忘れのご案内
</p>
<h1 style="margin:0; font-size:30px; font-weight:800; color:#0f172a; line-height:1.35; letter-spacing:-0.01em;">
{customer_name} 様、<br>
<span style="color:#ef4444;">あと一歩</span> で完了です
</h1>
</td>
</tr>
<tr>
<td style="padding:0 32px 32px;">
<p style="margin:0; font-size:14px; line-height:1.85; color:#475569;">
人気商品のため、お早めのご注文をおすすめいたします。<br>
下のボタンから、入力途中の情報も含めて元のカートにそのまま戻れます。
</p>
</td>
</tr>
<!-- ステップインジケーター -->
<tr>
<td style="padding:0 32px 28px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" width="25%" style="font-size:11px; font-weight:700; color:#22c55e;">
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td bgcolor="#22c55e" style="background:#22c55e; width:28px; height:28px; border-radius:14px; font-size:13px; font-weight:800; color:#fff; text-align:center; vertical-align:middle; line-height:28px;">
✓
</td>
</tr>
</table>
<div style="margin-top:8px;">カート追加</div>
</td>
<td align="center" width="25%" style="font-size:11px; font-weight:700; color:#22c55e;">
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td bgcolor="#22c55e" style="background:#22c55e; width:28px; height:28px; border-radius:14px; font-size:13px; font-weight:800; color:#fff; text-align:center; vertical-align:middle; line-height:28px;">
✓
</td>
</tr>
</table>
<div style="margin-top:8px;">情報入力</div>
</td>
<td align="center" width="25%" style="font-size:11px; font-weight:800; color:#ef4444;">
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td bgcolor="#ef4444" style="background:#ef4444; width:28px; height:28px; border-radius:14px; font-size:12px; font-weight:800; color:#fff; text-align:center; vertical-align:middle; line-height:28px;">
3
</td>
</tr>
</table>
<div style="margin-top:8px;">お支払い ← 今ここ</div>
</td>
<td align="center" width="25%" style="font-size:11px; font-weight:700; color:#cbd5e1;">
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td bgcolor="#e2e8f0" style="background:#e2e8f0; width:28px; height:28px; border-radius:14px; font-size:12px; font-weight:800; color:#94a3b8; text-align:center; vertical-align:middle; line-height:28px;">
4
</td>
</tr>
</table>
<div style="margin-top:8px; color:#94a3b8;">完了</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- 商品ボックス -->
<tr>
<td style="padding:0 32px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#f8fafc; border-radius:8px; border:1px solid #e2e8f0;">
<tr>
<td style="padding:22px 24px 8px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:12px; font-weight:800; color:#0f172a; letter-spacing:0.04em;">
🛒 お預かり中のカート
</td>
<td align="right" style="font-size:11px; color:#64748b; font-weight:700;">
3 アイテム
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:0 24px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
{item_loop}
<tr>
<td style="padding:14px 0; border-top:1px solid #e2e8f0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="32" style="font-size:11px; font-weight:800; color:#94a3b8;">
{item_index}
</td>
<td valign="top">
<p style="margin:0; font-size:14px; font-weight:700; color:#0f172a; line-height:1.5;">
{item_name}
</p>
<p style="margin:4px 0 0;">
<span style="display:inline-block; padding:2px 8px; background:#fef2f2; color:#dc2626; font-size:10px; font-weight:700; border-radius:3px;">
在庫残りわずか
</span>
</p>
</td>
<td valign="top" align="right" style="font-size:13px; font-weight:700; color:#475569; white-space:nowrap;">
× {item_quantity}
</td>
</tr>
</table>
</td>
</tr>
{/item_loop}
<tr>
<td style="padding:18px 0 22px; border-top:2px solid #0f172a;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:12px; font-weight:800; color:#64748b; letter-spacing:0.04em;">
合計金額
</td>
<td align="right" style="font-size:24px; font-weight:900; color:#0f172a; letter-spacing:-0.02em;">
{cart_total}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- CTA -->
<tr>
<td style="padding:32px 32px 12px;" align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#ef4444" style="background:#ef4444; border-radius:8px; box-shadow:0 8px 20px rgba(239,68,68,0.35);">
<a href="{recovery_url}"
style="display:inline-block; padding:20px 56px; font-size:16px; font-weight:800; color:#fff; text-decoration:none; letter-spacing:0.04em;">
▶ いますぐカートに戻る
</a>
</td>
</tr>
</table>
<p style="margin:14px 0 0; font-size:11px; color:#64748b;">
入力情報ごとワンクリックで復元 / 約 30 秒で購入完了
</p>
</td>
</tr>
<!-- 補足情報カード -->
<tr>
<td style="padding:8px 32px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="33%" align="center" style="padding:12px 8px; border:1px solid #e2e8f0; border-radius:6px;">
<p style="margin:0; font-size:18px;">🚚</p>
<p style="margin:4px 0 0; font-size:10px; font-weight:700; color:#475569;">送料無料まで<br>あと ¥2,020</p>
</td>
<td width="8"></td>
<td width="33%" align="center" style="padding:12px 8px; border:1px solid #e2e8f0; border-radius:6px;">
<p style="margin:0; font-size:18px;">🔒</p>
<p style="margin:4px 0 0; font-size:10px; font-weight:700; color:#475569;">SSL 暗号化で<br>安全に決済</p>
</td>
<td width="8"></td>
<td width="33%" align="center" style="padding:12px 8px; border:1px solid #e2e8f0; border-radius:6px;">
<p style="margin:0; font-size:18px;">↩️</p>
<p style="margin:4px 0 0; font-size:10px; font-weight:700; color:#475569;">14 日間<br>返品交換可能</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- フッター -->
<tr>
<td bgcolor="#f8fafc" align="center"
style="background:#f8fafc; padding:24px 32px; margin-top:24px; border-top:1px solid #e2e8f0;">
<p style="margin:32px 0 0; font-size:11px; color:#64748b; line-height:1.9;">
このメールはカートに商品が残っているお客様への自動配信です。<br>
配信停止は <a href="{optout_url}" style="color:#0f172a; text-decoration:underline;">こちら</a> からお手続きいただけます。
</p>
</td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
このテンプレートのポイント
1
ダークなヘッダー＋赤のアクセントラインで目を引きつつ、品位を保つ
2
「カート追加 → 情報入力 → お支払い → 完了」の 4 段階ステップインジケーター で「あと一歩」感を視覚化
3
商品ごとに「在庫残りわずか」バッジで個別商品単位の緊急感を演出
4
影付きの大きな赤 CTA ボタンで、クリックを誘発
5
下部に「送料無料まであと ¥◯◯」「SSL暗号化」「14日間返品交換」の 3 つの信頼バッジ で離脱不安を解消
再度ご確認ください
「在庫残りわずか」「送料無料まで あと ¥◯◯」「14 日間返品交換可能」などの表現は、上のチェックリストに従って 必ず自社の実態に合わせて修正または削除 してから配信してください。実態と異なる表現を残したまま配信すると、景品表示法違反やクレームの原因になります。本番運用前のテスト送信は必須です。
HTMLメールを成功させる5つの実践Tips
Tips 1
メールクライアント互換性を意識する
HTMLメールは Outlook・Gmail・Apple Mail・Thunderbird 等で表示が異なります。
以下のルールを守ると、ほぼ全環境で崩れにくくなります。
- <table> 構造で組む（<div> の flex や grid は Outlook で動かない）
- CSS は style 属性でインライン記述（外部 CSS は読み込まれない）
- bgcolor 属性と background-color プロパティを併記（古い Outlook 対応）
- 背景画像は使わない、または装飾の位置に限定（多くのメーラーで非表示）
- Web フォントは使わない（読まれないクライアントが多い）。sans-serif serif Georgia 等のシステムフォントで代用
Tips 2
ファーストビューに勝負を懸ける
メールが開かれた瞬間、最初に見える「ファーストビュー」で 80% が決まります。以下を必ず含めてください。
- ショップ名 / ロゴ
- 「カートに商品が残っています」のメッセージ
- お客様の名前（パーソナライズ）
- 大きく目立つ CTA ボタン
Tips 3
CTAボタンは画像ではなくHTML で
CTA を画像ボタンにすると、画像非表示設定の人には見えません。HTML の <a> タグに style で見た目を作る のが、確実に表示される方法です。
Tips 4
CTAのテキストは「具体的な完了動作」を示す
業界調査では、「complete your purchase（購入を完了する）」など、終点を明示するCTA が最も高いコンバージョン率 を示します。「return to cart（カートに戻る）」だと、戻ったあとまた離脱されるリスクがあるためです。
強いCTA
- カートを確認して購入を完了する
- いますぐ購入を再開する
- お買い物を最後まで進める
弱いCTA
- 詳しくはこちら
- もっと見る
- カートに戻る
Tips 5
テンプレートが空の場合のフォールバックを活用する
HTMLモードを選択していても、テンプレートの入力欄が空（または空白のみ）の場合は、自動的にテキストモードのテンプレートでメールが送信されます。
これは「誤って HTML 本文を全削除してしまっても、お客様にメールが届かなくなる事態を防ぐ」ためのフェイルセーフ機能です。HTML テンプレートの試行錯誤中に、いったん空にしてテキストモードに戻したいときにも便利です。
さらにデザインをカスタマイズしたい場合
「ボタンの色をブランドカラーに合わせたい」「フォントを変えたい」だけならテンプレート編集で完結します。
一方、カート復元時の本人確認ページや配信停止ページのデザインまでブランドに統一したい といったプラグイン全体のカスタマイズをご希望の場合は、Ver2.0で追加された開発者向けフックの活用が必要になります。
このようなカスタマイズは、ショップごとの環境や既存テーマとの兼ね合いで最適な実装方法が大きく変わります。自前で実装してトラブルになる前に、まずは Welcartのお問い合わせ窓口 までご相談ください。要件をうかがった上で、最適な実装方法のご提案や、こちらでの実装代行も承ります。
まとめ：HTMLメールで「ブランド体験」と「コンバージョン」を両立させる
カート離脱メールは、メール施策の中でも特にコンバージョンに直結する「最後の一押し」です。
Ver2.0 のHTML メール対応により、
- ロゴ・ブランドカラーで一目見て安心できるメール
- 目立つ CTA ボタンでクリック率を高める
- 商品情報を見やすく整理してパーソナライズ感を演出
という、テキストメールでは難しかった訴求が可能になりました。
最初は本記事の「サンプル1：ミニマル・エレガント」なテンプレートから始めて、運用に慣れてきたら 「サンプル2：プレミアム・ブランド」「サンプル3：モダン・緊急訴求」のような独自デザインに挑戦してみてください。
テキスト用・HTML 用は別々に保存されるので、いつでも安全に切り替えられます。
ブランド体験を損なわず、コンバージョンも最大化する
本記事で紹介した関連記事・マニュアル
プラグインの詳しい使い方・設定手順
プラグインの活用方法
カスタマイズのご相談
参考・引用情報
- List Finder「メールマーケティングの平均クリック率は？測定方法と向上させる 8 つのテクニック」 ─ HTML メールはボタン形式の CTA で視認性が高く、クリック率が向上すると明記
- エンバーポイント「メール配信のクリック率とは？業界別平均値や改善方法を徹底解説！」 ─ HTML メールはテキストメールよりクリック率の向上が期待できると明記
- アンダーワークス「テキストメールのクリック率は HTML メールの 2 倍！というテスト結果」 ─ BtoB セミナー集客における A/B テスト事例
PAGE TOP