“HTML編集モード” で「HTMLメール」を作成したい
- カテゴリー :
-
- カテゴリから探す > 操作方法 > メール/MA > 通常のメール（セグメント配信メール）
回答
本記事では、b→dashで「HTMLメール」を「HTML編集モード」で作成する方法について紹介しています。
作成手順は、大きく下記の4つです。
1. テンプレートを選択する
2. メール内容を編集する
3. 件名を入力する
4. プレビューで確認する
各手順の詳細は、以下をご参照ください。
※ GUI編集モードで作成する場合は「”GUI編集モード” で「HTMLメール」を作成したい」をご参照ください
1. テンプレートを選択する
1.「メール/MA」>「メールを作成する」をクリックします
2. 右上の「新規作成」をクリックします
3.「使用するテンプレート」をクリックして選択します
4.「HTML編集モードでコンテンツを作成」を選択し、「適用」をクリックします
5. エディター画面にソースコードが表示され、メールを編集できます
※ メールコンテンツをカスタマイズしたい場合は、メールテンプレート一覧画面の「白紙のテンプレート」を選択してください
また、一度「GUI編集モード」から「HTML編集モード」に変更すると、そこから再度「GUI編集モード」に変更することはできませんのでご注意ください。
※ コメントアウトの方法はコードが「<style>タグ内」か「<style>タグ外」かによって異なります
・<style>タグ内: /* コメントアウトしたいコード */
・<style>タグ外: <!--コメントアウトしたいコード-->
「HTML/テキストメール(マルチパート配信)」から「HTMLメール」に変更する手順を例に説明します。
1.「メール形式のON/OFF設定」をクリックします
2. テキストメールの「ON」をクリックし、「OFF」に変更します
3.「適用」をクリックします
4. メールの形式が「HTMLメール」に変更されたことを確認します
b→dashでは、ユーザーの環境に応じてHTMLメールとテキストメールのどちらを配信するかを自動で出し分けるマルチパート配信が利用可能です。マルチパート配信では、ユーザーが契約している通信キャリアのメールアドレスや使用している端末などの受信環境により、HTMLメールを表示できない場合にのみ、テキストメールを配信します。
[受信環境によるHTMLメールの表示可否]
メールアドレス |
端末 |
HTMLメールの表示 |
備考 |
| @docomo.ne.jp | iPhone |
○ |
- |
| @docomo.ne.jp | Android |
△ |
端末によってはデザインが崩れたり、画像が表示されない可能性 |
| @ezweb.ne.jp @au.com | iPhone |
○ |
- |
| @ezweb.ne.jp @au.com | Android |
△ |
端末によってはデザインが崩れる可能性 |
| @softbank.ne.jp | iPhone |
× |
- |
| @softbank.ne.jp | Android |
△ |
端末によってはデザインが崩れたり、画像が表示されない可能性 |
| @i.softbank.jp | iPhone |
○ |
- |
| @i.softbank.jp | Android |
- |
iPhone/iPad専用アドレスのためAndroidでは利用不可 |
※ 配信されるメールの形式はユーザーの受信環境によって判定されるため、メール配信前に実際にユーザーへ配信されるメールの形式を確認することはできません
マルチパートメールの作成方法
マルチパート配信を行いたい場合、HTMLメールとテキストメールの両方を作成する必要があります。
1.「テキストメールタブ」をクリックします
2. テキストメール編集画面に切り替わり、テキストメールに記載したい内容の編集を行います
※ 作成したメールコンテンツは、メールコンテンツの詳細画面の「切替ボタン」をクリックすることでHTMLメールとテキストメール両方のプレビューを確認できます
2. メール内容を編集する
テンプレートを使ってメールコンテンツを作成します。以下では、6つの差し込み機能の操作手順を説明します。
※ メールのテキストに絵文字を使用することはできません(貴社のb→dashで利用しているメールサーバーが「Mail Publisher」の場合のみ、絵文字を使用できます)
※ b→dashのメールコンテンツはレスポンシブ対応しており、ユーザーのモバイル端末の環境に応じて「メールの幅」や「画像の大きさ」を自動で調整します。ただし、デバイスやOSの仕様により表示が崩れる場合があります。詳細は「環境によるHTMLメールの表示の違いを知りたい」をご参照ください
※ 編集中のメールコンテンツは『5分に1回』自動的に「一時保存」されます。同一ユーザーが複数タブで編集を行う場合、先に新規作成を開始したコンテンツの編集内容は破棄されるため、複数タブでの操作は行わないでください
b→dash上で容量を直接確認することはできませんが、「メモ帳(テキストエディタ)」に作成したメールを転記することで容量を推測できます。
1. 表示されているコードをコピーし、メモ帳にペーストします
2.「編集」>「置換」をクリックします
3.「 」(半角スペース×2)を置換後の値には何も入力せずに、すべて置換します
4. 保存をしてファイルのサイズを確認します
※ この確認方法では、データ挿入される前の状態で容量が計測されるため、データ挿入後のデータ容量とは多少異なる可能性があります
値を差し込む
1. 差し込みたい箇所にカーソルを合わせ「データ挿入」をクリックします
2.「データファイル」を選択し、「適用」をクリックします
3.「挿入するカラム」を選択し、「適用」をクリックします
4.「検証」をクリックし、メタ文字(差込文字)に問題がないことを確認します
5. メールに差込文字が反映されます
※ 差込文字に対してCSSを適用することで、文字色や文字サイズなどを変更できます
※ 挿入されたデータに「空文字/NULL」が入っている場合、メール配信を行うか、スキップするかは「共通設定」の「配信制御設定」から設定できます。詳細は「配信制御を行いたい」をご参照ください
検証時にメタ文字が不正な値であった場合、「検証エラー」が発生します。検証可能な対象は「データ挿入」「レコメンド挿入」「条件分岐」の3種類です。
※「検証機能」の対象ではない文字部分を編集すると、メタ文字として不正な値であっても、エラーとして表示されませんのでご注意ください
データ挿入の検証可能な対象
項目 |
検証可能 |
検証不可 |
| メタ文字構造 | ##__DFxxx-yyyyy__##の太字部分(データファイルID、カラムID)に不正な値が含まれていた場合、「検証エラー」として表示 | ##__DFxxx-yyyyy__##全体について不正な値が含まれていた場合、「検証エラー」として表示されない |
データ挿入のエラーメッセージと詳細
エラーメッセージ |
エラー定義 |
エラーとなる操作例 |
| データファイルIDの不備 | 「データファイルID」が存在しない | データファイルを削除した、メタ文字を手動で書き替えた |
| カラムIDの不備 | 「データファイルID」は存在するが「カラムID」が存在しない | 「カラムID」を手動で書き換えた |
| カラムの削除 | ID両方存在するがカラムは削除されている | データファイル内のカラムを削除した |
レコメンド挿入のエラーメッセージと詳細
エラーメッセージ |
エラー定義 |
エラーとなる操作例 |
| レコメンドIDの不備 | 「レコメンドID」が存在しない | レコメンドを削除した、メタ文字を手動で書き替えた |
| カラムIDの不備 | 「レコメンドID」は存在するが「カラムID」が存在しない | 「カラムID」を手動で書き換えた |
| 挿込項目の削除 | ID両方存在するがカラムは削除されている | レコメンド内のカラムを削除した、利用しているデータファイル内のカラムを削除した |
条件分岐のエラーメッセージと詳細
エラーメッセージ |
エラー定義 |
エラーとなる操作例 |
| データファイルIDの不備 | 「データファイルID」が存在しない | データファイルを削除した、メタ文字を手動で書き替えた |
| カラムIDの不備 | 「データファイルID」は存在するが「カラムID」が存在しない | 「カラムID」を手動で書き換えた |
| カラムの削除 | ID両方存在するがカラムは削除されている | データファイル内のカラムを削除した |
| カラムのデータ型と条件分岐の組み合わせ不備 | 条件分岐に使用しているカラムのデータ型に合わない条件が設定されている | 分岐条件を手動で書き換えた、カラムのデータ型を変更した |
| 挿入位置の不備 | 差込み文字が「tdタグ」または「thタグ」の「コンテンツ部分以外」に設定されている | 条件分岐の挿入位置が「tdタグ」または「thタグ」の「コンテンツ部分以外」となっている |
日付を差し込む
1. 差し込みたい箇所にカーソルを合わせ「日付挿入」をクリックします
2.「表示形式」を選択します
3.「プレビュー」から利用したいデザインの日付を選択し、「適用」をクリックします
4. メールに日付が差し込まれます
※「日付挿入」機能で挿入した『年月日』には、メールコンテンツの作成画面ではメール作成時の『年月日』、受信したメールではメール配信時の『年月日』が入ります
リンクを差し込む
1.「URL」を反映させたい箇所のテキストを選択します
2.「リンク挿入」>「リンク」を選択し、「適用」をクリックします
3.「遷移先URL」を入力し、「適用」をクリックします
4. テキストにURLが反映されます
※「リンク挿入」機能では、『アンカーリンク』(URL末尾に「#」を含む)や『ディープリンク』(クリックでアプリを起動)も設定できます
・クリック計測/流入元計測(配信パラメータの付与設定): 「webサイトへの流入元を取得したい」
・CV計測(CV設定): 「webサイトのCVを取得したい」
メールコンテンツに短縮URLを利用する方法は、「短縮URLの差し込み」(事前にコンテンツボックスで作成した短縮URLを差し込む)と「一括短縮URL化」(差し込んだ通常のURLを一括で短縮URLに変換)の2つです。
短縮URLの差し込み
1.「短縮URL」をクリックします
2.「差し込みたい短縮URL」を選択し、「適用」をクリックします
3. テキストに短縮URLが反映されます
※ b→dashの「コンテンツボックス」アプリで短縮URLを事前に作成する必要があります。詳細は「短縮URLを利用したい」をご参照ください
一括短縮URL化
1. URLを差し込んだメールコンテンツに対して「一括短縮URL化」アイコンをクリックします
2. 対象のURLを確認後、「次へ」をクリックします
3. 使用するドメインを選択後、「適用」をクリックします
4. 差し込んだURLが短縮URL化されたことを確認します
※ メールコンテンツに差し込まれている全てのURLが短縮URL化の対象となります。短縮URLにしたくないURLは「短縮URL化」を行った後に差し込みを行ってください
一括短縮URL化で作成された短縮URLは、自動的にb→dash「コンテンツボックス」アプリに保存されます
メール内容をデータに基づいて出し分ける
b→dashでは、メールを配信する顧客に応じて、メールに記載する文面内容を出し分けることができます。以下では「保有ポイントが5,000以上」の顧客に対して特別メッセージを差し込む操作方法を説明します。
1. 右上の「条件分岐」>「テキスト」をクリックします
2.「データファイル」を選択し、「適用」をクリックします
3.「カラム」(今回は「保有ポイント」)を選択し、「適用」をクリックします
4.「条件」(今回は「以上」「5000」)を選択し、「適用」をクリックします
5. メールに条件分岐(##_IF_○○○○_##)の設定が追加されます
※ 条件分岐を用いて画像の出し分けも可能です。下記のようにimg要素を条件分岐で囲むことで実現できます
##__IF_DF○○○-xxx__## <img src="..."> ##__IF_END__##
画像を差し込む
1. 差し込みたい箇所にカーソルを合わせ「画像」をクリックします
2.「差し込む画像」を選択し、「適用」をクリックします
3. メールに画像が差し込まれます
定型文を差し込む
1. 差し込みたい箇所にカーソルを合わせ「定型文挿入」をクリックします
2.「挿入したいテキスト」をクリックします
3. メールに定型文が差し込まれます
3. 件名を入力する
「件名」を入力します。
※ 件名に絵文字を使用することはできません(貴社のb→dashで利用しているメールサーバーが「Mail Publisher」の場合のみ、件名に絵文字を使用できます)
4. プレビューで確認する
1.「プレビュー」をクリックします
2. プレビューが表示されるので、差し込みなどが表示されているかを確認します
3. プレビューの確認ができたら「保存」を選択し、任意の名前を入力して「適用」をクリックします
※ 倍率、サイズ、スマホ表示の変更は、画面右上で操作可能です
・プレビューでの表示確認はせず、テスト配信による画像表示確認のみ行う
・画像をb→dashコンテンツボックスにアップロードして、メールコンテンツに画像挿入をする
・「https」のサイトに画像を設置し、「https」で始まる画像URLをメールコンテンツに挿入する
メールが保存できない場合、何らかの設定が誤っていると考えられます。下記のよくある誤りに該当しないかご確認ください。
考えられる原因 |
改善策 |
| 利用しているChromeのバージョンが古い | b→dashの推奨環境に適合したバージョンかどうかを確認する |
| テキスト文字だけでなく書式が付いてしまっている | ExcelやWord等からのコピー&ペーストではなく直打ちで入力する |
| バリデーションエラーが発生している | limit_bytes_per_line_html_tag: 改行を実施 / translation missing対象: 「%%」で囲まれた半角英数字以外の文字列を使用する |
メール作成時の重要な注意事項
コンテンツの「本文」または「件名」に『制御文字』が含まれている場合、「保存」をクリックしても、コンテンツを保存することができず、エラーとなります。
※『制御文字』とは、コンピューターで文字を扱う際に、「改行」などを制御する文字のことです
『制御文字』が含まれている場合に表示されるエラーモーダルと、コンテンツを保存することができない『制御文字』については、以下をご参照ください。
| コード | 値 | 制御文字 （エラー対象） |
制御文字の説明 |
| 0 | NUL | ^@ | NULl （ヌル） |
| 1 | SOH | ^A | Start Of Heading （ヘッダ開始） |
| 2 | STX | ^B | Start of TeXt （テキスト開始） |
| 3 | ETX | ^C | End of TeXt （テキスト終了） |
| 4 | EOT | ^D | End Of Transmission （転送終了） |
| 5 | ENQ | ^E | ENQuiry （問合せ） |
| 6 | ACK | ^F | ACKnowledge （肯定応答） |
| 7 | BEL | ^G | BELl （ベル） |
| 8 | BS | ^H | Back Space （後退） |
| 0B | VT | ^K | Vertical Tabulation （垂直タブ） |
| 0C | FF | ^L | Form Feed （改ページ） |
| 0E | SO | ^N | Shift Out （シフトアウト） |
| 0F | SI | ^O | Shift In （シフトイン） |
| 10 | DLE | ^P | Data Link Escape （伝送制御拡張） |
| 11 | DC1 | ^Q | Device Control 1 （装置制御1） |
| 12 | DC2 | ^R | Device Control 2 （装置制御2） |
| 13 | DC3 | ^S | Device Control 3 （装置制御3） |
| 14 | DC4 | ^T | Device Control 4 （装置制御4） |
| 15 | NAK | ^U | Negative AcKnowledge （否定応答） |
| 16 | SYN | ^V | SYNchronous idle （同期信号） |
| 17 | ETB | ^W | End of Transmission Block （転送ブロック終了） |
| 18 | CAN | ^X | CANcel （取消） |
| 19 | EM | ^Y | End of Medium （媒体終端） |
| 1A | SUB | ^Z | SUBstitute （置換） |
| 1B | ESC | ^[ | ESCape （拡張） |
| 1C | FS | ^\ | File Separator （ファイル分離） |
| 1D | GS | ^] | Group Separator （グループ分離） |
| 1E | RS | ^^ | Record Separator （レコード分離） |
| 1F | US | ^_ | Unit Separator （ユニット分離） |
| 7F | DEL | ^? | DELete （削除） |