HTMLメルマガを作成するためのツールマニュアルです。
<メルマガエディタとは>
HTMLやCSSが苦手でも大丈夫。
HTMLメルマガを誰でも簡単に見栄え良く作れるツールです。
エディター内にあるパーツを組み合わせて自由にメルマガのレイアウトを設定したら、お好きな画像や文章を入力すると簡単にメルマガが作れます。
HTML、CSSがわかると、さらにデザインのアレンジができます。
楽天RMSにてメルマガを配信するためのタグも作成できるので、コピペするだけで簡単に楽天用HTMLメルマガを作成できます。
<ログインする>
ログインURL:https://mcm.mqm.co.jp/login
![](/upload/file/www/ImagesBlog/20220815/ce350887-a20f-4599-806a-c6e28116e08f.png)
①ユーザーID:楽天市場のショップURLを入力します。
https://www.rakuten.co.jp/○○○○/
https://www.rakuten.ne.jp/gold/○○〇〇/
※トップページURLにある「○○○○」の部分です。
②パスワード:初回のみ、メールで送られた仮パスワードを入力します。2回目以降は、変更後のパスワードを入力します。
③画像認証:画像の「?」にあてはまる数字1桁を半角で入力して、ログインします。
<パスワードの変更>
パスワードを変更する際に、使用します。
※初回のログイン後、必ずパスワードを変更してください。
![](/upload/file/www/ImagesBlog/20220815/d5054701-ebc8-4ee8-a963-f4df48314d04.png)
設定>パスワード変更 より変更できます。
![](/upload/file/www/ImagesBlog/20220815/7b56b469-6aeb-4b36-8284-3e52c9c9ec05.png)
①現在のパスワード:変更前のパスワードを入力します。
※メールに記載しているログインパスワードを入力してください。
②新しいパスワード:変更後のパスワードを半角英数字6~15文字を入力します。
③※(再入力)新しいパスワード:変更後のパスワードをもう一度入力して、保存ボタンをクリックするとパスワードが変更されます。
<登録情報の確認及び変更>
![](/upload/file/www/ImagesBlog/20220815/e63d1dc5-e054-4260-bebf-c01798852856.png)
RMSの登録情報が表示されますので、変更箇所があれば入力して、保存ボタンをクリックします。
<ライセンスキー>
![](/upload/file/www/ImagesBlog/20220815/733281b8-fc46-47c3-9ed4-29c99349212c.png)
![](/upload/file/www/ImagesBlog/20220815/d7bd061e-4fba-4b00-bade-92d80fb17374.png)
RMS>拡張サービス一覧>2.各種申請・設定変更>システム開発企業からのAPIアクセス許可設定>設定変更をクリックします。
![](/upload/file/www/ImagesBlog/20220815/2a77ec22-3521-42c1-bb6c-32b1f5767eed.png)
ご利用中の製品で、「株式会社mqm」「メルマガエディタ for 楽天市場」のライセンスキーが「承認待ち」であることを確認して、「確認」へ進みます。
![](/upload/file/www/ImagesBlog/20220815/66eb5313-596d-4c50-91b8-d197db9faad0.png)
ページの最下部にある「アクセス承認」をクリックします。
![](/upload/file/www/ImagesBlog/20220815/73928bc3-daec-48b3-a90c-484cd144a168.png)
ライセンス承認完了の画面を確認して、「一覧へ戻る」をクリックします。
![](/upload/file/www/ImagesBlog/20220815/aad0e2c2-9836-4c39-a94c-ea1f5934913f.png)
表示されているライセンスキーとをコピーし、メルマガエディタの画面に貼り付けて、保存ボタンをクリックします。
![](/upload/file/www/ImagesBlog/20220815/3c82a009-8203-4188-858f-71ee19cd38e0.png)
※アクセス承認してから、設定できるまで、およそ30分かかります。
<メルマガを作成する手順>
![](/upload/file/www/ImagesBlog/20220815/1c835fc0-4084-4f80-b3c3-21d69cba9ae2.jpg)
メルマガエディタにログインし、「テンプレート追加」ボタンをクリック→「テンプレート名:メルマガのタイトルなどを設定する」→「次へ」と進みます。
※ログインしてすぐに「テンプレート一覧」になりますが、こちらは作成したテンプレートが表示される場所です。
新規にテンプレートを作成される場合に限らず、既存テンプレートから作成される場合も、まずは上記同様「テンプレート追加」よりお進みください。
「テンプレート追加」![](/upload/file/www/ImagesBlog/20220815/67592a40-84bc-4956-91dc-d0f48fb2f108.png)
下記のウィンドウが立ち上がりますので、ご使用になりたいテンプレートを選択→OKをクリック
![](/upload/file/www/ImagesBlog/20220815/26533c3e-9220-4d64-8e1e-0c95906ad6a4.png)
この先の編集方法は下記と同様に進めていただけます。
<メルマガエディタの編集画面および操作方法>
![](/upload/file/www/ImagesBlog/20220815/4cacc647-aae8-4f2f-aef5-48d910e2eefd.png)
【ナビゲーション】
![](/upload/file/www/ImagesBlog/20220815/90a0fabe-ae30-47e9-8216-54ff6d200b88.png)
①マニュアル:メルマガエディタのマニュアルを見ることができます。
②フィードバック:操作に関する不具合等を弊社あてに送信できます。
不具合やご提案がありましたら、こちらから弊社へご連絡ください。
③一覧に戻る:保存しているメルマガの一覧へ戻ります。
【編集画面】
![](/upload/file/www/ImagesBlog/20220815/ca732a76-ad6b-4c47-b377-49202563586d.jpg)
①テンプレートから作成:テンプレートから作成できます。
②結合:結合したいパーツを結合できます。結合したいパーツのドラッグ横にあるチェックボックスにチェックを入れて結合を押すことで結合ができます。
③置換:文字やURLを一括で置き換えることができます。
④プレビュー:作成したメルマガをプレビューできます。
⑤タグ読込:RMSに登録されているタグを貼り付けてください。
⑥URL読込:ページのURLで読み込むことができます。
⑦貼付け用タグをコピー:RMS管理画面のメール編集用タグをコピーできます。
⑧編集を削除する:赤の「削除」ボタンは編集中のものを削除します。
⑨保存:編集画面を保存します。
⑩名前を付けて保存:編集画面を別の名前で保存できます。
【メルマガ作成パーツ】
①お気に入り:よく使うパーツを保存できる。
②テキスト:見出しから文章までのテキストパーツ。
③パーツ:デザイン見出しパーツ。
※背景カラーの色を変えたい場合は「ソース」ボタンクリックしてCSSを変更ください。
④画像:画像を登録して配置します。
※1ファイルあたりの重さ2MBまで、横1600px×縦1200px。
※登録可能な形式:JPEG、GIF、アニメーションGIFRキャビネットの制限のため)
⑤無料素材:提供バナーなど
⑥複数画像:複数画像を配置したいときに使います。パーツ配置後に③で登録したお好きな画像に変更できます。
⑦画像・文字:商品紹介のように、画像とテキストパーツを一緒にレイアウトしたい時に使います。
⑧テーブル:商品スペックなどテーブルタグを使用したレイアウトをしたい時に使います。
⑨関連商品:商品番号、キーワードやアイテムデーター、キーワードデータからも商品を取得でき表示可能
⑩クーポン:現在有効なクーポン情報を取得。
⑪その他:リンク一覧、改行タグ、ボタンパーツ。
【パーツ追加・メルマガ編集】
サイドエリアからパーツを選んでメルマガを作成します。
お気に入り
よく使うパーツを保存できる。
①テキスト
テキストパーツをクリックして、編集画面でテキストの編集をします。
![](/upload/file/www/ImagesBlog/20220815/338f6cde-ee98-44d7-b767-8676a0731506.png)
①‐1ドラッグ:パーツが複数ある場合に位置を変更することができます。
①‐2ソース:パーツのソースを確認し、直接編集することができます。
①‐3コピー:パーツのコピーができます。
①‐4削除:パーツを削除します。
①‐5:テキストにリンクをつけることができます。
①‐6:文字サイズを変更できます。
①‐7:文字の色を変更できます。
②パーツ(デザイン見出し)
パーツをクリックしてデザイン見出しを配置し、編集画面でテキストの編集をします。
![](/upload/file/www/ImagesBlog/20220815/bc8604ea-87c3-49d6-9c96-246c7223d735.png)
行と列はこのような使い方ができます。
①‐1枠線:見出しに枠線を追加できます。
①‐2枠線:見出しの枠線を削除できます。
①‐3+行:行を追加することができます。
①‐4‐行:行を削除することができます。
①‐5 +列:列を追加することができます。
①‐6 -列:列を削除することができます。
③画像
![](/upload/file/www/ImagesBlog/20220815/d1a6ea6c-7d59-4aee-bc82-71a71c031d7c.png)
画像を登録して配置します。
右側にRキャビネットの内容が表示され、階層に応じて下部に画像が表示されますので、選択してクリックします。
※1ファイルあたり2MBまで、横1600px×縦1200px。
※登録可能な形式:JPEG、GIF、アニメーションGIF(Rキャビネットの制限のため)
④無料素材
右側に表示されるイベント画像パーツをクリックして編集します。
![](/upload/file/www/ImagesBlog/20220815/7b1430e9-7105-41af-8c38-4aee5de35875.png)
④複数画像
複数画像を配置するときに使います。右側に表示される画像パーツをクリックして編集します。
④-1:Rキャビネットの画像を使用する場合にクリックします。
④-2:使用する画像の「差替」をクリックすると画像が差し替えられます。
![](/upload/file/www/ImagesBlog/20220815/cebdb028-2a28-4d43-9d2e-31c19f2e5fb0.jpg)
④-3:画像URLで画像を検索する際に、クリックします。
④-4:RキャビネットまたはGOLDの画像URLを入力します。
④-5:「差替」をクリックすると、画像が差し替えられます。
![](/upload/file/www/ImagesBlog/20220815/79f482b6-8f78-41f8-85d9-481eceeaa4c7.jpg)
⑤画像+文字
商品紹介のように、画像とテキストパーツを一緒にレイアウトしたい時に使います。
右側に表示される画像パーツをクリックして、編集画面で画像を差し替えます。
![](/upload/file/www/ImagesBlog/20220815/c0e91cab-b312-40fe-8038-671abf9a0144.jpg)
⑥テーブル
商品スペックなどテーブルタグを使用したレイアウトをしたい時に使います。右側に表示されるテーブルをクリックして、編集画面でテキストの編集をします。
![](/upload/file/www/ImagesBlog/20220815/311ff1d4-a5d1-4a00-8931-3196b5bf69ca.jpg)
⑦関連商品
RMSに登録している商品を掲載することができます。
右側に表示されるパーツをクリックします。
![](/upload/file/www/ImagesBlog/20220815/b8423c7b-b791-4976-9686-e8e5b2caeadf.jpg)
選んだパーツに商品を掲載していきます。
[楽天商品管理番号から登録する場合]
![](/upload/file/www/ImagesBlog/20220815/79e3dac0-f975-4e1c-bcd1-206b3e220419.jpg)
⑦-1:楽天商品管理番号(商品URL)欄に楽天商品管理番号(商品URL)をカンマ区切りで入力します。
⑦-2:商品情報取得ボタンをクリックして、下に表示された商品を確認します。
⑦-3:商品追加ボタンで、手動による商品の追加が可能です。この場合は商品管理番号の入力は不要です。
⑦-4:表示が不要な商品は、商品削除ボタンで削除が可能です。
⑦-5:編集が終わったらOKボタンをクリックします。
[キーワードから登録する場合]
![](/upload/file/www/ImagesBlog/20220815/2c541dd0-29d2-4012-bd0b-fad3d49788f2.jpg)
⑦-6:取得したい商品のキーワードを入力します。キーワードは、商品名から取得されます。PCのキャッチコピーからは取得されません。
⑦-7:取得したい商品の件数を入力します。最大50件まで取得できます。
⑦-8:商品情報取得ボタンをクリックして、下に表示された商品を確認します。
⑦-9:商品追加ボタンで、キーワードに関係なく、手動による商品の追加が可能です。
⑦-10:表示が不要な商品は、商品削除ボタンで削除が可能です。
⑦-11:編集が終わったらOKボタンをクリックします。
⑧その他パーツ
リンク一覧、改行タグ、ボタンパーツです。
右側に表示されるパーツをクリックして、編集画面でリンクやテキストの編集をします。
![](/upload/file/www/ImagesBlog/20220815/040753f8-61e2-4958-a0b7-db4cc8a3edf0.jpg)
<制作したメルマガを楽天RMSメールへ設定する>
メルマガエディタで制作したメルマガを楽天RMSメールに以下の手順で設定します。
【ステップ1】
メルマガエディタでメルマガを制作後、「貼付け用タグをコピー」をクリックします。
![](/upload/file/www/ImagesBlog/20220815/496ea4eb-1e91-4314-a18e-dff19289f59a.jpg)
【ステップ2】
「タグをコピーする」をクリックして楽天RMSメール用タグをコピーします。
![](/upload/file/www/ImagesBlog/20220815/9f72ccf9-2c11-400f-9446-1844e9e4a843.jpg)
【ステップ3】
RMS管理画面より[RMSトップ]→[メルマガ配信]→[メール本文編集]でメール種別選択の[HTMLメール]を選択します。
【ステップ4】
楽天RMSメインメニュー→メルマガ配信→メール本文編集[HTMLメール]画面のメール本文へ、
ステップ2でコピーした「貼付け用タグ」をペーストします。
![](/upload/file/www/ImagesBlog/20220815/993db5e8-f86a-4415-9a5f-4f34daea80f2.jpg)
![](/upload/file/www/ImagesBlog/20220815/c532a0cf-44e9-4d80-a28c-43eb541e3b36.jpg)
下のメール本文(テキスト)も入力してください。
こちらに何も入れずにプレビュー画面に進みますとエラーが出ます。
「HTMLのテキスト部分をコピー」をクリックすると上記で貼り付けたタグのテキストのみが下記の本文にペーストされます。
※このコピーしたテキストをご使用される場合は、画像などが消えたことにより、
テキストのレイアウトが崩れておりますので、適宜修正してご使用ください。
![](/upload/file/www/ImagesBlog/20220815/da913d77-c10f-4c1e-80ca-5f43b7a7dcb3.jpg)
プレビュー画面へ→プレビュー確認後、
![](/upload/file/www/ImagesBlog/20220815/a741c041-04f2-4190-babc-87bf84eafb5b.png)
問題なければ「送信一覧に保存する」で保存してください。
![](/upload/file/www/ImagesBlog/20220815/4352b239-4f72-4ea3-b23c-0dd7c2709a07.png)
<テンプレート一覧>
![](/upload/file/www/ImagesBlog/20220815/81cb36a3-f66a-489b-9716-2d007ca52546.png)
![](/upload/file/www/ImagesBlog/20220815/dbce261f-9ee9-4fd9-9047-789603ab6a2b.png)
①プレビュー:メルマガエディタのプレビューを見ることができます。
②編集:メルマガエディタを編集することができます。
③コピー:メルマガエディタをコピーすることができます。
③削除:メルマガエディタを削除することができます。
その他ご不明な点などございましたら、
お電話若しくはメールにて、お気軽にお問い合わせください。
株式会社 mqm
TEL:078-671-3288
Mail:support@mqm.co.jp