楽天市場のリピーターを増やすためにもメルマガは有効な手段のひとつです。
しかし、メルマガを作成する際には、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">店舗URLa> <br>
商品・ご注文に関してのお問い合わせ <br>
<a href="##">問い合わせ先URLa><br>
〒000-0000 東京都渋谷区〇〇〇〇〇〇〇〇〇〇<br>
TEL:00-0000-0000　／　FAX:00-0000-0000font>td>
tr>
table>
td>
tr>
table>
td>
tr>
table>

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

まとめ

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

会員限定機能です。無料会員登録はこちら

未読記事一覧

この機能は会員限定です。ログインしてからお楽しみいただけます。
無料会員登録はこちら。

あわせて読みたい記事

新着記事

すべてのエピソードはこちら