視覚的なメールによる訴求力UP！店舗からのメールをHTMLで配信するには！？

サンプルソースあり！

店舗から自動で送信するメールフォーマットの送信形式に「HTML形式」を追加しました。例えば、注文受付時のお知らせメールや、出荷時のお知らせメールなど、従来のテキスト形式に加えHTML形式でも配信できるようになります。

商品の写真やバナー画像など、視覚的なメールによる訴求力の向上にお役立ていただけます。

下記、メールフォーマット設定で「HTML形式」を選択した場合の使用例をご紹介します。

1．注文確定時送信メール（注文確認メール）をHTMLで作成する

2．出荷処理時送信メール（出荷お知らせメール）をHTMLで作成する

3．お気に入り商品自動リマインドメールをHTMLで作成する

注文確定時送信メール（注文確認メール）

STEP1．メールフォーマット設定

[ショップ管理ツール] ＞ [お店を作る] ＞ [メールフォーマット登録・照会] ＞ [注文確定時送信メール（注文確認メール）]を選択。

[メール送信形式]で[HTML]を選択し、[本文内容]にHTMLソースを記述します。

商品名や、商品画像、商品URL等、商品情報をメールに出力させたい場合、「#ITEM_INFO#」という置換文字を本文に記述します。
「#ITEM_INFO#」が指定された際に出力する内容は、別途フォーマットを作成する必要がありますが、そのサンプルは「STEP2」でご紹介します。

●メールフォーマット設定 HTMLサンプル文

	
 <!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" lang="ja">
 <head>
 <meta name="viewport" content="width=device-width" />
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>メールマガジンサンプル</title>
 </head>
 <body>
 <style type="text/css">
 /* =================================================================
 1.reset
 =================================================================*/
 body{background:#FFF; color:#535353; line-height:1.5; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",verdana,Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; word-wrap:break-word; position:relative;}

 /*  すべてのタグのマージン・パディングの設定をリセット
 -------------------------------------------------------------*/
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h4,h4,pre,form,fieldset,input,textarea,p,blockquote,th,td,hr,iframe{margin:0; padding:0;}
 li{list-style-type:none;}
 table{border-collapse:collapse; border-spacing:0;}
 img{max-width:100%; height:auto; vertical-align:middle; border:0;}
 label{cursor:pointer;}
 hr{display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
 form{margin:0;}
 input,button,select,textarea{font-size:93%; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;}
 input,select{vertical-align:middle;}
 input:focus:invalid:focus,textarea:focus:invalid:focus,select:focus:invalid:focus {border-color:#666666; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;}
 h1,h2,h3,h4,h4,h4{font-weight:normal;}
 </style>

 <div style="width:100%; padding:0 20px 10px; margin:0 auto;">
     <h1 style="text-align:center; background:#393939;">
         <a href="" style="text-decoration:none; color:#FFF;">ebisumart SHOP</a>
     </h1>
 </div>

 <div style="width:560px; padding:0 40px; margin:0 auto;">
     <p style="font-size:10px; text-align:right; margin-bottom:30px;">
             注文番号:   #ORDER_NO#<br />
             注文受付日: #ORDER_DATE#<br />
     </p>

     <p style="font-size:12px;margin-bottom:40px;">
             #L_NAME# #F_NAME# 様<br /><br />
             この度は、「ebisumart SHOP」でのお買い上げ誠にありがとうございます！<br />
             ご注文情報をお送りいたします。
     </p>

     <h2 style="color:#393939; font-size:18px; font-weight:bold; text-align:center; position: relative; padding: 0.5em 0; border-bottom: solid 1px #393939; border-top: solid 1px #393939; margin-bottom:30px; width:100%;">注文内容</h2>

     <!-- カラム -->
     <div style="width:560px; margin-bottom:10px;">
         <div style="float:left; width:120px; margin:0px 10px;">
             <p style="font-size:13px; text-align:center;">商品画像</p>
         </div>

         <!-- 商品名 -->
         <div style="float:left; width:180px; margin:0px 10px;">
             <p style="font-size:13px; text-align:center;">商品名</p>
         </div>

         <!-- 数量 -->
         <div style="float:left; width:60px; margin:0px 10px;">
             <p style="font-size:13px; text-align:center;">数量</p>
         </div>

         <!-- 単価 -->
         <div style="float:left; width:110px; margin:0px 10px;">
             <p style="font-size:13px; text-align:right;">単価</p>
         </div>
     </div>
     <hr style="border:1px solid #f0f0f0; margin-bottom:10px; clear:both;" />

     <!-- 商品情報 -->
     #ITEM_INFO#<br />
     <hr style="border:1px solid #f0f0f0; clear:both;" />

     <!-- 合計金額 -->
     <div style="margin-right:20px;">
         <p style="font-size:12px; text-align:right;">
             商品の小計：#SYOKEI#円<br />
             消費税：#TAX#円<br />
             送料：#SORYO#円<br /><br />
             <span style="font-size:14px; text-align:right; font-weight:bold;">合計：#GOKEI#円</span><br /><br />
             決済方法：#PAYMENT#
         </p>
     </div>
     <hr style="border:1px solid #f0f0f0; margin-bottom:40px; clear:both;" />

     <h2 style="color:#393939; font-size:18px; font-weight:bold; text-align:center; position: relative; padding: 0.5em 0; border-bottom: solid 1px #393939; border-top: solid 1px #393939; margin-bottom:30px; width:100%;">お届け情報</h2>

     <!-- 商品情報 -->
     <div style="margin-bottom:40px;">
         <p style="font-size:12px; margin:10px 10px;">
             配送方法：#HAISO#<br />
             配送希望日：#SEND_HOPE_DATE#<br />
             配送希望時間：#SEND_HOPE_TIME#<br /><br />
             氏名:#SEND_L_NAME# #SEND_F_NAME# 様<br />
             住所：#SEND_ADDR#<br />
             電話番号：#SEND_TEL#
         </p>
     </div>

     <div style="margin-bottom:20px;">
         <p style="font-size:12px; margin:10px 10px;">
             またのご利用をお待ちしております！
         </p>
     </div>
 </div>

 <div style="width:560px; padding:0 10px; margin:10px auto;">
     <p style="background:#f3f3f3; padding:10px; font-size:13px; font-weight:normal;">
         お問合せ先<br />
         ebisumart SHOP問合せ窓口<br />
         00-0000-0000（受付時間 平日9:30 - 18:00）<br />
         info@XXXX.co.jp
     </p>
 </div>

 <div style="width:100%;">    
     <p style="background:#393939; color:#FFF; text-align:center; font-size:10px; padding:3px 0; margin:0 auto; min-width:560px;">
         株式会社○○
     </p>
 </div>

 </body>
 </html>

STEP2．「#ITEM_INFO#」で出力する情報の設定

[ショップ管理ツール] ＞ [システム設定] ＞ [システム設定マスタ] ＞ [注文完了メール明細フォーマット（HTML）]を選択。

「#ITEM_INFO#」が指定された際に出力する内容のフォーマットを設定します。
※テキストメールのフォーマットは、当メニューの [注文完了メール明細フォーマット]で設定してください。

●「#ITEM_INFO#」で出力する情報サンプル文

	
<div>
 <!-- 画像 -->
 <div style="float:left; width:120px; margin:0px 10px;">
     <img src="#ITEM_IMAGE_URL1#" alt="#ITEM_NAME#" title="商品画像" width="120px" />
 </div>

 <!-- 商品名 -->
 <div style="float:left; width:180px; margin:0px 10px;">
     <p style="font-size:13px;">
         #ITEM_NAME#
     </p>
 </div>

 <!-- 数量 -->
 <div style="float:left; width:60px; margin:0px 10px;">
     <p style="font-size:13px; text-align:center;">
         #QUANTITY#
     </p>
 </div>

 <!-- 単価 -->
 <div style="float:left; width:110px; margin:0px 10px;">
     <p style="font-size:13px; text-align:right;">
         #TEIKA#円
     </p>
 </div>

 <hr style="border:1px solid #FFF; margin:10px 10px; clear:both;" />
</div>

STEP3．完了！

　下記のようなメールが「注文確定時」に送信されます。

出荷処理時送信メール（出荷お知らせメール）

STEP1．メールフォーマット設定

[ショップ管理ツール] ＞ [お店を作る] ＞ [メールフォーマット登録・照会] ＞ [出荷処理時送信メール（出荷お知らせメール）]を選択。

[メール送信形式]で[HTML]を選択し、[本文内容]にHTMLソースを記述します。

商品名や、商品画像、商品URL等、商品情報をメールに出力させたい場合、「#ITEM_INFO#」という置換文字を本文に記述します。
「#ITEM_INFO#」が指定された際に出力する内容は、別途フォーマットを作成する必要がありますが、そのサンプルは「STEP2」でご紹介します。

●メールフォーマット設定 HTMLサンプル文

	
<!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" lang="ja">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>メールマガジンサンプル</title>
</head>
<body>
<style type="text/css">
/* =================================================================
1.reset
=================================================================*/
body{background:#FFF; color:#535353; line-height:1.5; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",verdana,Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; word-wrap:break-word; position:relative;}

/*  すべてのタグのマージン・パディングの設定をリセット
-------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h4,h4,pre,form,fieldset,input,textarea,p,blockquote,th,td,hr,iframe{margin:0; padding:0;}
li{list-style-type:none;}
table{border-collapse:collapse; border-spacing:0;}
img{max-width:100%; height:auto; vertical-align:middle; border:0;}
label{cursor:pointer;}
hr{display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
form{margin:0;}
input,button,select,textarea{font-size:93%; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;}
input,select{vertical-align:middle;}
input:focus:invalid:focus,textarea:focus:invalid:focus,select:focus:invalid:focus {border-color:#666666; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;}
h1,h2,h3,h4,h4,h4{font-weight:normal;}
</style>

<div style="width:100%; padding:0 20px 10px; margin:0 auto;">
    <h1 style="text-align:center; background:#393939;">
        <a href="" style="text-decoration:none; color:#FFF;">ebisumart SHOP</a>
    </h1>
</div>

<div style="width:560px; padding:0 40px; margin:0 auto;">
    <p style="font-size:10px; text-align:right; margin-bottom:30px;">
            注文番号:   #ORDER_NO#<br />
    </p>

    <p style="font-size:12px;margin-bottom:40px;">
            #L_NAME# #F_NAME# 様<br /><br />
            この度は、「ebisumart SHOP」でのお買い上げ誠にありがとうございます！<br />
            発送した商品情報をお送りいたします。
    </p>

    <h2 style="color:#393939; font-size:18px; font-weight:bold; text-align:center; position: relative; padding: 0.5em 0; border-bottom: solid 1px #393939; border-top: solid 1px #393939; margin-bottom:30px; width:100%;">発送商品</h2>

    <!-- カラム -->
    <div style="width:560px; margin-bottom:10px;">
        <div style="float:left; width:120px; margin:0px 10px;">
            <p style="font-size:13px; text-align:center;">商品画像</p>
        </div>

        <!-- 商品名 -->
        <div style="float:left; width:180px; margin:0px 10px;">
            <p style="font-size:13px; text-align:center;">商品名</p>
        </div>

        <!-- 数量 -->
        <div style="float:left; width:60px; margin:0px 10px;">
            <p style="font-size:13px; text-align:center;">数量</p>
        </div>

        <!-- 単価 -->
        <div style="float:left; width:110px; margin:0px 10px;">
            <p style="font-size:13px; text-align:right;">単価</p>
        </div>
    </div>
    <hr style="border:1px solid #f0f0f0; margin-bottom:10px; clear:both;" />

    <!-- 商品情報 -->
    #ITEM_INFO#<br />

    <hr style="border:1px solid #f0f0f0; margin-bottom:40px; clear:both;" />

    <h2 style="color:#393939; font-size:18px; font-weight:bold; text-align:center; position: relative; padding: 0.5em 0; border-bottom: solid 1px #393939; border-top: solid 1px #393939; margin-bottom:30px; width:100%;">お届け先情報</h2>

    <!-- 配送先 -->
    <div style="margin-bottom:40px;">
        <p style="font-size:12px; margin:10px 10px;">
            配送方法：#HAISO#<br />
            氏名:#SEND_L_NAME# #SEND_F_NAME# 様<br />
            住所：#SEND_ADDR#<br />
            電話番号：#SEND_TEL#
        </p>
    </div>


    <div style="margin-bottom:20px;">
        <p style="font-size:12px; margin:10px 10px;">
            またのご利用をお待ちしております！
        </p>
    </div>
</div>

<div style="width:560px; padding:0 10px; margin:10px auto;">
    <p style="background:#f3f3f3; padding:10px; font-size:13px; font-weight:normal;">
        お問合せ先<br />
        ebisumart SHOP問合せ窓口<br />
        00-0000-0000（受付時間 平日9:30 - 18:00）<br />
        info@XXXX.co.jp
    </p>
</div>

<div style="width:100%;">    
    <p style="background:#393939; color:#FFF; text-align:center; font-size:10px; padding:3px 0; margin:0 auto; min-width:560px;">
        株式会社○○
    </p>
</div>

</body>
</html>

STEP2．「#ITEM_INFO#」で出力する情報の設定

[ショップ管理ツール] ＞ [システム設定] ＞ [システム設定マスタ] ＞ [注文完了メール明細フォーマット（HTML）]を選択。

「#ITEM_INFO#」が指定された際に出力する内容のフォーマットを設定します。「#ITEM_INFO#」は、注文完了時のメール明細フォーマットでも使用しています。予めご了承ください。

※テキストメールのフォーマットは、当メニューの [注文完了メール明細フォーマット]で設定してください。

●注文完了メール明細フォーマット（#ITEM_INFO#で出力する情報）サンプル文

	
<div>
 <!-- 画像 -->
 <div style="float:left; width:120px; margin:0px 10px;">
     <img src="#ITEM_IMAGE_URL1#" alt="#ITEM_NAME#" title="商品画像" width="120px" />
 </div>

 <!-- 商品名 -->
 <div style="float:left; width:180px; margin:0px 10px;">
     <p style="font-size:13px;">
         #ITEM_NAME#
     </p>
 </div>

 <!-- 数量 -->
 <div style="float:left; width:60px; margin:0px 10px;">
     <p style="font-size:13px; text-align:center;">
         #QUANTITY#
     </p>
 </div>

 <!-- 単価 -->
 <div style="float:left; width:110px; margin:0px 10px;">
     <p style="font-size:13px; text-align:right;">
         #TEIKA#円
     </p>
 </div>

 <hr style="border:1px solid #FFF; margin:10px 10px; clear:both;" />
</div>

STEP3．完了！

下記のようなメールが「出荷処理時」に送信されます。

番外編

受注データ管理画面上のメール[編集]ボタンをクリックすると、該当受注に対してのメールが個別編集できます。
ここにも、[HTML形式]が選択できるようになっています。

例えば、「該当会員に対しての発送の時のみバナーを表示させたい！」「この地域の会員には発送メールで専用LPへのボタンをメールに入れよう！」など、個別でメールの内容を変更することが可能です。

お気に入り商品自動リマインドメール

　お気に入り商品（ウィッシュリスト）機能をご利用いただいている店舗様が対象になります。当機能は無償オプション機能です。
　サイト会員がお気に入り商品にいれたまま ※X日が経過した際、メールでリマインドします。　※X日…経過日数は店舗様で設定可能です。

STEP1．メールフォーマット設定

[ショップ管理ツール] ＞ [お店を作る] ＞ [メールフォーマット登録・照会] ＞ [お気に入り商品自動リマインドメール]を選択。

[メール送信形式]で[HTML]を選択し、[本文内容]にHTMLソースを記述します。

お気に入りリストに入れた商品情報をメールに出力させたい場合、「#WISHLIST_INFO#」という置換文字を本文に記述します。
「#WISHLIST_INFO#」が指定された際に出力する内容は、別途フォーマットを作成する必要がありますが、そのサンプルは「STEP2」でご紹介します。

●メールフォーマット設定 HTMLサンプル文

	
<!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" lang="ja">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>メールマガジンサンプル</title>
</head>
<body>
<style type="text/css">
/* =================================================================
1.reset
=================================================================*/
body{background:#FFF; color:#535353; line-height:1.5; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",verdana,Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; word-wrap:break-word; position:relative;}

/*  すべてのタグのマージン・パディングの設定をリセット
-------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h4,h4,pre,form,fieldset,input,textarea,p,blockquote,th,td,hr,iframe{margin:0; padding:0;}
li{list-style-type:none;}
table{border-collapse:collapse; border-spacing:0;}
img{max-width:100%; height:auto; vertical-align:middle; border:0;}
label{cursor:pointer;}
hr{display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
form{margin:0;}
input,button,select,textarea{font-size:93%; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;}
input,select{vertical-align:middle;}
input:focus:invalid:focus,textarea:focus:invalid:focus,select:focus:invalid:focus {border-color:#666666; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;}
h1,h2,h3,h4,h4,h4{font-weight:normal;}
</style>

<div style="width:100%; padding:0 20px 10px; margin:0 auto;">
    <h1 style="text-align:center; background:#393939;">
        <a href="" style="text-decoration:none; color:#FFF;">ebisumart SHOP</a>
    </h1>
</div>

<div style="width:560px; padding:0 40px; margin:0 auto;">
    <p style="font-size:12px;margin:40px 0px;">
            #L_NAME# #F_NAME# 様<br /><br />
            いつも「ebisumart SHOP」をご利用いただきありがとうございます。<br />
            #L_NAME#様のお気に入りリストに、商品が入ったままになっておりますので<br />
            是非チェックしてみてください！
    </p>

    <hr style="border:1px solid #f0f0f0; margin-bottom:20px;"/>

    <!-- お気に入り商品情報 -->
    #WISHLIST_INFO#<br />

    <hr style="border:1px solid #f0f0f0; margin-bottom:40px; clear:both;" />


    <div style="margin-bottom:20px;">
        <p style="font-size:12px; margin:10px 10px;">
            またのご利用をお待ちしております！
        </p>
    </div>
</div>

<div style="width:560px; padding:0 10px; margin:10px auto;">
    <p style="background:#f3f3f3; padding:10px; font-size:13px; font-weight:normal;">
        お問合せ先<br />
        ebisumart SHOP問合せ窓口<br />
        00-0000-0000（受付時間 平日9:30 - 18:00）<br />
        info@XXXX.co.jp
    </p>
</div>

<div style="width:100%;">    
    <p style="background:#393939; color:#FFF; text-align:center; font-size:10px; padding:3px 0; margin:0 auto; min-width:560px;">
        株式会社○○
    </p>
</div>

</body>
</html>

STEP2．「#WISHLIST_INFO#」で出力する情報の設定

[ショップ管理ツール] ＞ [システム設定] ＞ [システム設定マスタ] ＞ [お気に入り商品リマインダーメール明細フォーマット（HTML）]を選択。

「#WISHLIST_INFO#」が指定された際に出力する内容のフォーマットを設定します。
※テキストメールのフォーマットは、当メニューの [お気に入り商品リマインダーメール明細フォーマット]で設定してください。

●お気に入り商品リマインダーメール明細フォーマット（#WISHLIST_INFO#で出力する情報）サンプル文

	
<div>
    <!-- 画像 -->
    <div style="float:left; width:120px; margin:0px 20px;">
        <img src="#ITEM_IMAGE_URL1#" alt="#ITEM_NAME#" title="商品画像" width="120px" />
    </div>

    <!-- 商品名 -->
    <div style="float:left; width:360px; margin:0px 10px;">
        <p style="font-size:15px; font-weight:bold; margin-bottom:10px;">
            #ITEM_NAME#
        </p>
        <p style="font-size:13px;">
            #TEIKA#円
        </p>
    </div>

    <hr style="border:1px solid #FFF; margin:10px 10px; clear:both;" />

    <!-- 詳細ボタン -->
    <div style="margin:5px 25px;">
        <a style="background:#60ac31; text-align:center; display:block; color:#FFF; text-decoration:none; height:24px; border-bottom:5px solid #5a8831; padding-top:9px; font-size:12px; margin-bottom:30px;" href="#ITEM_URL#">商品ページを見る</a>
    </div>
</div>

STEP3．完了！

下記のようなメールが「注文確定時」に送信されます。

メールフォーマットHTML化について Q＆A

管理画面のメールフォーマット登録画面に「HTML形式」がありません。: メール配信機能をカスタマイズしている店舗様は、メニュー表示をOFFにしております。
追加をご希望される方は、サポート窓口までお問い合わせください。まずは、弊社にて影響範囲を調査いたします。
マルチパート配信ですか？: マルチパート配信です。メール受信者側の環境に応じて、HTMLメールとテキストメールの表示分けを行います。
配信形式で「HTML形式」を選択された状態でテキストメールの設定内容が未入力ですと、受信側の環境が「テキスト形式」の場合、空メールが届いてしまいます。その為、管理画面上で入力エラーを表示するようにしています。

ebisumart機能特集

毎週アップデートされるebisumartの機能の中から厳選して、おすすめ機能をご紹介します！ご要望やお気づきの点がありましたらお気軽にお問い合わせください。

> ebisumart機能特集

サポートサイト