メールマガジンの航海術

楽天市場のHTMLメルマガ作成方法

楽天市場のリピーターを増やすためにもメルマガは有効な手段のひとつです。
しかし、メルマガを作成する際には、HTMLメールの知識がある程度必要になってきます。
今回は楽天市場のメルマガ作成で、誰でもすぐに使えるコーディング方法をご紹介します。

楽天市場のメルマガでできないこと

まずは楽天市場のメルマガ作成でできること・できないことをしっかり把握しておく必要があります。

楽天市場の商品ページを作るときと同様に、HTMLメルマガも制約は多く、できることも限られてきます。
ですので、後述するコーディング方法でレイアウトを組んでいく必要がでてきます。

どのメルマガ配信方法を選ぶべきか

楽天市場のメルマガ配信方法は下記の5つから選択が可能です。

◆PCテキストメール
PC宛に送信するテキストメールの作成・送信が可能です。

◆HTMLメール
HTMLメールの作成・送信が可能です。

◆レスポンシブメール
ひとつのメールでPCやスマートフォン、タブレットでの表示に適したレスポンシブメールの作成・送信が可能です。
レスポンシブメールはキャリア向けのアドレスには送信されません。

◆モバイルテキストメール
キャリアアドレス宛に送信するテキストメールの作成・送信が可能です。

◆モバイルHTMLメール
キャリアアドレス宛に送信するHTMLメールの作成・送信が可能です。

PC・スマホユーザーの両方にメルマガを配信したいため、ここではHTMLメールを選択します。
本来はレスポンシブメールを選択したいところですが…キャリアアドレス向けに送られないため、HTMLメール選択しておきましょう。

メルマガの基本構造

全体レイアウト

今回ご紹介するレイアウトは下記になります。
順番にコーディング方法を説明していきます。
※グレー画像の部分には店舗で作成した画像を挿入してください。

メルマガ全体に大枠の線を引く

<center>
<!--大枠-->
<table width="820">
<tr valign="top">
<!--メルマガ本編-->
<td width="800" align="center">
<!--メルマガ枠-->
<table width="700" cellspacing="1" cellpadding="0" bgcolor="#333">
<tr valign="middle" bgcolor="#FFFFFF">
<td align="center">
<!-----------------------------------------
  ここにメルマガの内容を記載する
------------------------------------------->
</td>
</tr>
</table>
<!--//メルマガ枠-->
</td>
<!--//メルマガ本編-->
</tr>
</table>
<!--//大枠-->
</center>

メルマガ全体に枠線を引いておきます。
「ここにメルマガの内容を記載する」の部分にコーディングしていきます。

ヘッダー画像

<!--ヘッダー画像-->
<table width="600" cellspacing="0" cellpadding="10">
<tr valign="middle">
<td align="center"><a href="##" target="_blank">
<img src="https://placehold.jp/600x90.png?text=店舗ロゴ" width="600" alt=""></a>
</td>
</tr>
</table>
<!--//ヘッダー画像-->

看板となる部分に画像を置いておきます。店舗ロゴなどを記載しておくとよいでしょう。

キャッチコピー・バナー表示部分

<table width="600" cellspacing="0" cellpadding="0" align="center">
<tr valign="top" bgcolor="#FFFFFF">
<td bgcolor="#FFFFFF" align="center">
<font size="6" color="#000000"><strong>お買い物マラソン開催中</strong></font><br>
<font size="6" color="#CC0000"><strong>全品20%OFF!!</strong></font><br>
<a href="##" target="_blank">
<img src="https://placehold.jp/600x300.png?text=セールバナーを表示"></a><br><br><br><br>
</td>
</tr>
</table>

キャッチコピーはフォントサイズを大きくし、色を付けたほうがより目を引きやすくなります。
キャッチコピー付近にはお買い物マラソンや楽天スーパーSALEなどのイベントバナーを貼って誘導するとよいでしょう。

商品画像部分

2カラム表示

<!--商品ラインナップ -->
<table width="600" cellspacing="0" cellpadding="16" bordercolor="#cccccc" border="1" align="center">
<tr valign="top">
<td width="50%" align="left">
<a href="https://item.rakuten.co.jp/moriyamilk/20201043" target="_blank">
<img src="https://placehold.jp/750x750.png?text=商品画像" width="100%"></a><br>
<p><font size="4"><b>商品名</b></font></p>
<p align="left">
<font size="4" color="#000000"><strong>通常価格 0,000円(税込)</strong></font>
<font size="4" color="#CC0000"><strong>【n%OFF】 0,000円(税込)</strong></font>
</p>
<a href="##"><img src="https://placehold.jp/265x43.png?text=購入する" width="100%"></a>
</td>
<td width="50%" align="left">
<a href="https://item.rakuten.co.jp/moriyamilk/20201043" target="_blank">
<img src="https://placehold.jp/750x750.png?text=商品画像" width="100%"></a><br>
<p><font size="4"><b>商品名</b></font></p>
<p align="left">
<font size="4" color="#000000"><strong>通常価格 0,000円(税込)</strong></font>
<font size="4" color="#CC0000"><strong>【n%OFF】 0,000円(税込)</strong></font>
</p>
<a href="##"><img src="https://placehold.jp/265x43.png?text=購入する" width="100%"></a>
</td>
</tr>
</table>
<br><br><br>
<!--商品ラインナップ↑ -->

商品名+商品価格+セール情報を記載します。
このコードを流用して、下部には「おすすめ商品カテゴリ」など、レコメンド導線を貼っておくのもよいでしょう。

署名部分

<!--署名-->
<table width="600" cellspacing="0" cellpadding="20">
<tr valign="top">
<td>
<table width="600" cellpadding="20" cellspacing="0">
<tr valign="top">
<td>
<table width="600" align="center" cellpadding="20" cellspacing="0" bgcolor="#999999">
<tr valign="middle">
<td width="10%" align="center" bgcolor="#eeeeee"><img src="https://placehold.jp/150x80.png?text=店舗ロゴ" width="150" height="80"></td>
<td width="90%" align="left" bgcolor="#eeeeee">
<font size="1" face="ヒラギノ角ゴ Pro W3, メイリオ, sans-serif">会社名 <a href="##" target="_blank">店舗URL</a> <br>
商品・ご注文に関してのお問い合わせ <br>
<a href="##">問い合わせ先URL</a><br>
〒000-0000 東京都渋谷区〇〇〇〇〇〇〇〇〇〇<br>
TEL:00-0000-0000 / FAX:00-0000-0000</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--//署名-->

店舗ロゴ・会社名・お問い合わせ先URL・住所・連絡先をまとめて記載します。

まとめ

今回は楽天市場のHTMLメールの作成方法をご紹介しました。
リピーターを増やすためにも、店舗のファンを作るためにもメルマガは重要な施策の一つです。しっかり作り込んでいきましょう!