メールフォーマットHTML化

視覚的なメールによる訴求力の向上に役立ちます。

リリース日 : 2017年5月24日(水)アップデート時

メインビジュアル

店舗から自動で送信するメールフォーマットの送信形式に「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 Pゴシック","MS PGothic",Sans-Serif; word-wrap:break-word; position:relative;}

 /*  すべてのタグのマージン・パディングの設定をリセット
 -------------------------------------------------------------*/
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,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,h5,h6{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.完了!

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

  • 受注確定メール(テキスト)
  • 受注確定メール(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 Pゴシック","MS PGothic",Sans-Serif; word-wrap:break-word; position:relative;}

/*  すべてのタグのマージン・パディングの設定をリセット
-------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,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,h5,h6{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)
番外編

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

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

  • 発送メール(HTML)_番外編_管理画面
  • 発送メール(HTML)_番外編

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

 お気に入り商品(ウィッシュリスト)機能をご利用いただいている店舗様が対象になります。当機能は無償オプション機能です。
 サイト会員がお気に入り商品にいれたまま ※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 Pゴシック","MS PGothic",Sans-Serif; word-wrap:break-word; position:relative;}

/*  すべてのタグのマージン・パディングの設定をリセット
-------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,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,h5,h6{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)

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

管理画面のメールフォーマット登録画面に「HTML形式」がありません。
メール配信機能をカスタマイズしている店舗様は、メニュー表示をOFFにしております。
追加をご希望される方は、サポート窓口までお問合せください。まずは、弊社にて影響範囲を調査いたします。
マルチパート配信ですか?
マルチパート配信です。メール受信者側の環境に応じて、HTMLメールとテキストメールの表示分けを行います。
配信形式で「HTML形式」を選択された状態でテキストメールの設定内容が未入力ですと、受信側の環境が「テキスト形式」の場合、空メールが届いてしまいます。 その為、管理画面上で入力エラーを表示するようにしています。
友達からの商品のおすすめメールで、商品画像を表示させたいです。
現時点(当機能リリース日)では、表示が出来ないため、今後のアップデートで対応を予定しております。
入荷お知らせメールで、商品画像を表示させたいです。
現時点(当機能リリース日)では、表示が出来ないため、今後のアップデートで対応を予定しております。

ebisumart機能特集

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

> ebisumart機能特集