HTML初心者のデザイナーが作る！楽天メルマガ配信作成（HTML本文作成編）
こんにちは！さなです。
今回は楽天のメルマガ配信作成方法について、私のメモがてら作成いたします。
『HTMLは苦手だからレスポンシブメール一択…だけどいろいろできるようになりたいな……』
『クライアントにメルマガお願いしますって言われたけどわからない…』
『メルマガって機能使ってみたい！』
という初心者向けの内容になっています。
私はコーダーさんではないので、本当に簡単な構成しかできません汗（本当に…難しいよコーディング……）
本格的なコーディングをお求めの方は回れ右でお願いします。
それではどうぞ！
（申し訳ございませんが、都合上キャプチャが取れないのでテキストのみになっています。順番にやっていくとできます！）
そもそも楽天メルマガって何？
楽天メルマガ、登録されている方も多いと思います。
楽天市場で販売を行う店舗から顧客へ直接メールを送信できるサービスです。
クリスマスやブラックフライデーなどのイベント、セール告知などで販売促進に繋がります。
楽天メルマガの種類
楽天のメルマガには以下の5つの種類があります。
1) PCテキストメール
2) HTMLメール
3) レスポンシブメール
4) モバイルテキストメール
5) モバイルHTMLメール
1) PCテキストメール
主にPCで閲覧されることを想定して作成され、画像や装飾はなく、テキストのみのメールです。
2) HTMLメール
HTMLを使って作成されたメールです。
テキストだけでなく、画像をいれたりテキストの色を変えたりなどの装飾が可能です。
今回はこのメール作成方法について書いています。
3) レスポンシブメール
ひとつのメールでPCやスマートフォン、タブレットでの表示に適したレスポンシブメールです。注意点として、キャリア向けのアドレスには送信されません。
4) モバイルテキストメール
キャリアアドレス宛に送信するテキストメールです。
5) モバイルHTMLメール
キャリアアドレス宛に送信するHTMLメールです。
主に使うのは以下の3つが多いです。
1) PCテキストメール
2) HTMLメール
3) レスポンシブメール
今回はHTMLメール作成方法について書いています。
1) 構成、内容を考える
メルマガの構成、内容を考えます。メルマガで伝えたいこと、推したい商品や情報などを整理し、ユーザーに伝わりやすい構成、内容にしましょう。
（今回は詳しく書きません）
2) 画像を作成する
メルマガに載せる画像を作成します。構成案によって必要バナーやサイズは変わります。
データ拡張子は.jpg .pngがおすすめ。
それぞれのファイル名は
『メルマガ配信する日付_何に使うバナーか_何枚目か_画像サイズ』
など、わかりやすくしておくと後々楽です。
・メインバナー
店舗名やメルマガのタイトルになる最初のバナーです。
例文）
『今だけ！クリスマスセール！』
『メルマガ会員様限定セール！』
サイズについて（目安です）
横幅600〜750px
縦300～400px
・ポイントバナー
クーポンへの誘導やタイトルになるバナーです。
例文）
『対象商品10%OFF！』
『1000円クーポンはこちらから！』
『▽今回の目玉商品！▽』
サイズについて（目安です）
横幅300〜750px
縦120～300px
・回遊バナー
商品リンクに繋げるバナーです。
例文）
『詳しくはこちら！』
『他にもお得な商品がたくさん！』
サイズについて（目安です）
横幅300〜750px
縦120～300px
サイズは横に何枚並べるかによっても変わります。あくまで目安として捉えていただけると幸いです。
3) 作成した画像を構成案に入れ、確認
作成した画像と構成案で出た商品のサムネイル、載せるテキストを組み合わせてメルマガのイメージ画像を作成。クライアントに確認します。
バナーのみで確認していただくよりわかりやすいと思います。
4)画像決定後、Rakuten RMS に格納する
OKが出た画像をRakuten RMSに格納します。
Rakuten RMSにログイン
2.店舗設定から、画像・動画登録へ
3.画像管理へ
4.画像をアップロード
作成した画像をフォルダに入れます。その際、適切なフォルダがなかったら新しくフォルダを作って管理するとやりやすいです。
画像アップロードはファイルをドラックで行えます。
これで画像の準備は終わりです！
5) メルマガ本文作成
メルマガ本文はHTMLで作成します。
楽天メルマガの注意点として
・基本的にHTMLのみ
・CSS、jsが使えない
・使えるコードが限られている（2024年11月現在）
と、通常のコーディングとは違った知識が必要になります。
約20年前のHTML時代をご存知の方は得意かもしれません！
<br>で改行したり、カラーやサイズを全てHTMLに書き込んでいたあの時代です…！（個人ページが盛んで、私もイラストサイトを自分で作っていましたw）
よく使うコード
ここではよく使うコードを記載します。（他にも使用できるものがあります。）
<a></a>
リンクを貼る
<br>
改行。余白作りにも使える。
paddingやmarginなどがつかえないので、余白はbrでやります。
<table></table>
テーブル（表）を作成
<tr></tr>
テーブルタグとセットで使用。表の横の設定
<td></td>
テーブルタグとセットで使用。表のマス目の設定
<p></p>
段落・テキスト
<font></font>
テキスト
<b></b>
テキストを太字にする
<center></center>
真ん中寄せ
<!-- テキスト—>
コメントアウト。表示はされないのでメモのように使用します。
よく使う属性
CSSが使えないのでclassをつけたりidはつけたりしません。書き方も少し変わります。
基本的にはHTMLとセットで使います。他にも使用できるものがありますが、ここではよく使うコードを記載します。
<a href="URL" target="場所">
リンクを貼り、開いた先を決めます。
<font color="色" size="サイズ">
テキストの色とサイズ
<img alt=“テキスト” border=“枠線の幅”. height=“高さ” wigth=“横幅”>
画像が表示されなかった場合のテキスト、画像につける線の幅、画像の高さ、画像の横幅
高さ、横幅は以下のようにする場合が多いです。
height="auto" wigth="100%"
高さは自動、横幅は画面の100%表示。
このようにすると画像サイズが画面より大きい場合でもユーザーの機種に合わせて自動で画像を拡大、縮小してくれます。
<table bgcolor="背景の色" border="枠線の幅" bordercolor="枠線の色" height="高さ" wigth="横幅" align="中央よせ、左寄せ、右寄せ">
<tr bgcolor="背景の色" bordercolor="枠線の色" height="高さ" wigth="横幅”"valign=“位置”>
<td bgcolor="背景の色" height="高さ" wigth="横幅" valign="位置" >
この3つはテーブル（表）を作るときに使用。
表だけでなく、商品を並べる時の枠組みとしても使用します。
例えば横に2商品並べる場合は
<table border="0" width="100%"> 枠線なしのテーブルの枠組み
<tr align="center"> 中央よせ
<!-- 左側td -->
<td width="50%"> 左側50%（半分）
<a href="商品URL" target="_top"> 商品のリンク
<img border="0" src="サムネイルURL" width="100%"> 画像を枠線なしで表示。td内横幅100%
</a> リンクここまで
<p><font color="black">商品名</font> 黒いテキストで商品名
</p></td>
<!-- 右側td -->
<td width="50%"> 右側50%（半分）
<a href="商品URL" target="_top"> 商品のリンク
<img border="0" src="サムネイルURL" width="100%"> 画像を枠線なしで表示。td内横幅100%
</a> リンクここまで
<p><font color="black">商品名</font> 黒いテキストで商品名
</p>
</td></tr></table>となります。
他にも属性があるので、気になる方は調べてみてください！
コーディングはVSCodeというアプリを使用しています。
不安な方は…
もし既存でメルマガを送ったことがある&構成が同じなら、コピーして使うのもありです！
その際、直接編集ではなくVS Codeにコピペしてから、テキストやURLの修正をします。（既存メルマガは変更保存しないように！！！！！注意！！！！）
主な修正箇所
リンクURL
画像URL
商品名
商品価格
案内テキスト
画像URLについて
画像は直接リンクという形になります。（他にも方法あったら教えて欲しい…！）画像格納フォルダから、画像URLをコピーし、差し替えします。
6) メルマガ配信準備
本文が完了したので、いよいよ本番環境に移します！
1.Rakuten RMSにログイン
2.メール・SNSマーケティング→メルマガ配信
3.メール本文編集をクリック
4.メール種別選択画面になるので、HTMLメールを編集開始
7) メール本文にて
1.『クリックインセンティブ』の設定
ポイント付きメールを配信するかを設定します。
メルマガ原稿内のURLをクリックしたユーザに「インセンティブポイント」を付与することができます。
2.『件名』を記入
メルマガは開封せずに削除されがちなので、どんなタイトルなら開いてもらえるか、興味を持ってもらえるかを考えながら作成します。
例文）
【告知】クリスマスセール開催！対象商品○%OFF！！
【本日限定！】最大ポイント○○倍！人気商品がさらにお得に！
3.『メール本文(HTML)』に作成したメルマガ本文HTMLをコピペ
4.レコメンド商品表示数を決める
メルマガに自動で表示される商品数です。サイト内での閲覧・購入履歴などの履歴を元にし、おすすめ商品を表示します。
5.メール本文（テキスト）を記入
メール本文（テキスト）はHTMLが使用できません。テキストのみになります。長すぎても読まれないので、HMTLで作った内容をまとめるイメージです。
6.ここまで終わったら『プレビュー画面』で確認します！
どうでしょう？もしかして表示されない…なんて事ありませんか？
その場合、エラーメッセージが上部に出てくるので、1つずつ解決していきます。
例）
件名が記入されていない
メール本文（テキスト）が記入されていない
HTMLに禁止タグが使用されている
HTMLのコードミス（全角が入っていないか、閉じタグのミスはないかなど）
7.エラーメッセージが消えるとプレビューが見られます。
プレビューで表示崩れや画像URLのミス、テキスト間違えなどがないか確認します。
間違えていた場合は前へ戻って修正。
ミスなしの場合は『送信一覧に保存する』をクリック。
その際、まずは自分のアドレスにテストメールを送り、確認します。
プレビューではちゃんと見えていたのにメールで送られてくるものは崩れている…なんてこともあるので確認します。
8) メルマガチェック
作成したメールがちゃんと表示がされるか等のチェックを行います。
ここではいくつかのチェック項目を記載します。
・件名
・バナー表示（日付、テキスト、クーポン等）
・推移先
・掲載商品
・掲載商品名、商品の価格
・レイアウト
・レスポンシブでも崩れがないか
など。
私がよく間違えるのは
・商品の価格（上のtdをコピペして変更し忘れ）
・推移先（上のtdをコピペして変更し忘れ）
・レイアウト（レスポンシブで崩れる）
など………
ミスが多いので、本当に大丈夫か疑いながら確認します。
ミスがなければ、ディレクターへ送信し、Wチェックをお願いします。
ディレクターからOKが出たら、クライアントにも確認してもらいます。
これでメールを送る土台は整いました！
最後に
お疲れ様でしたーー！！
ここまでいかがだったでしょうか？
私は普段コーディングをあまりしないので、簡単なレイアウトでもへっとへとになってしまいましたw
完全に無理！デザインのみやりたい！という方はコーダーさんと組んで行うのもおすすめです。
コーダーさんは普段のコーディングとはちょっと違うコーディングになるので、慣れるまではちょっとやりづらいかもしれません汗
どなたかのお役に立てれば嬉しいです！
配信予約についてはこちらからどうぞ！
感想等いただけると喜びます！
X:https://x.com/sana_070901
ちょっと宣伝です！
普段はフリーランスデザイナーをしている私が2000万円貯めた家計管理術&節約方法を解説しています！
家計管理初心者〜中級者向けの内容です。
浪費しがちな年末年始に向け、気を引き締められるように無料部分だけでもぜひ読んでみてください！