目次
本記事について
本記事では、『メールコンテンツ表示領域』（画面左半分）と『メールコンテンツ設定領域』（画面右半分）に分割された『新メール作成画面』の操作方法について紹介します。
※『旧メール作成画面』と『新メール作成画面』で機能差分はありません
以下では、『新メール作成画面』の操作方法について紹介します。
メールコンテンツ作成における細かい制約などについては、「HTMLメールを作成したい(GUI)」をご参照ください。
メールコンテンツ作成における細かい制約などについては、「HTMLメールを作成したい(GUI)」をご参照ください。
画面を切り替える
「メールの新しい画面を試す」をクリックします
「適用」をクリックします
画面が切り替わったことを確認します
「旧画面に戻す」をクリックすることで、『新メール作成画面』から『旧メール作成画面』に戻すこともできます。
メール内容を編集する
今回は、テンプレートを使って以下のメールコンテンツを作成する場合を例に説明します！
❶ 値を差し込む
今回は、「データ」と「日付」の2つの値を差し込みます。
「データ」を差し込む
「挿入」をクリックします
「データ挿入」をクリックします
「データファイル」を選択し、「適用」をクリックします
データファイル選択画面には、セグメントに使用したデータファイルのみが表示されます。
b→dashへのデータ連携と取り込みを行っただけのデータファイルは表示されませんので、ご注意ください。
b→dashへのデータ連携と取り込みを行っただけのデータファイルは表示されませんので、ご注意ください。
「挿入したいカラム」を選択し、「適用」をクリックします
『メールコンテンツ設定領域』で「氏名」がデータ挿入されたことを確認します
「氏名」と同じ手順で、「保有ポイント」もデータ挿入します
「日付」を差し込む
「挿入」をクリックします
「日付挿入」をクリックします
「表示形式」と「プレビュー」をそれぞれ選択し、「適用」をクリックします
『メールコンテンツ設定領域』で「日付」がデータ挿入されたことを確認します
「日付挿入」で挿入した『年月日』には、メール作成画面では『メール作成時の年月日』、受信したメールでは『メール配信時の年月日』が入ります。
❷ 枠を変更する
今回は、「枠線」と「角丸」を変更する手順を紹介します。
枠線を変更する
『メールコンテンツ設定領域』で「枠線の種類」「枠線の太さ」「枠線の色」を設定します
変更した枠線が『メールコンテンツ表示領域』で表示されたことを確認します
角丸を変更する
『メールコンテンツ設定領域』で角丸の「適用範囲」と「px」を設定します
変更した角丸が『メールコンテンツ表示領域』で表示されたことを確認します
❸ リンクを差し込む
HTMLメールに差し込むリンクは「URL」「メールアドレス」「電話番号」の3つから選択することができます。
今回は、「URL」を挿入する手順を紹介します。
「電話番号」を選択し、リンクを挿入する手順については、『「電話番号リンク」をメールに挿入する方法を知りたい』をご参照ください。
「挿入」をクリックします
「リンク挿入」をクリックします
「遷移先」を選択し、「適用」をクリックします
挿入するリンクには、『ディープリンク』を設定することも可能です。
ただし、『ディープリンク』が「URLスキーム」の場合、Gmailなどのメーラーでは『ディープリンク』が機能しないため、挿入する『ディープリンク』は、「ユニバーサルリンク」である必要があります。
ただし、『ディープリンク』が「URLスキーム」の場合、Gmailなどのメーラーでは『ディープリンク』が機能しないため、挿入する『ディープリンク』は、「ユニバーサルリンク」である必要があります。
挿入したい「URL」を入力し、「適用」をクリックします
「挿入したいURL」として入力することができる文字数の上限は『2048』文字です。
『メールコンテンツ設定領域』で「リンク」が挿入されたことを確認します
テキストを選択せずにURLを挿入することでURL（https://…）を差し込むことも可能です。
❹ テキストを入力/修正する
「フォント」「太字」「斜体」「アンダーバー」「斜線」「文字色」「ハイライト」を変更することができます
「文字サイズ」「行間」を変更することができます
テキストを編集した際にできた余白を削除したり、テキストの量に合わせて余白のサイズを変更したい場合は、ブロックの下部にカーソルを合わせることで変更することができます。手順については、こちらの記載をご参照ください。
『メールコンテンツ設定領域』で「塗り潰しの色」を変更することができます
『メールコンテンツ設定領域』でテキストの「配置」を変更することができます
「テキスト」を入力/変更します
❺ コンテンツを出し分ける
b→dashでは、メールを配信する顧客に応じて、メールに記載する文面を出し分けることができます。
今回は例として、「保有ポイントが5,000以上」である顧客に対して特別なメッセージを差し込む方法を説明します！
「条件分岐」をクリックします
「条件分岐」をクリックします
条件分岐を設定する対象を選択し、「適用」をクリックします
今回は「テキスト」を選択しています。
条件分岐を設定する「テキスト」を選択します
「適用」をクリックします
「データファイル」を選択し、「適用」をクリックします
データファイル選択画面には、セグメントに使用したデータファイルのみが表示されます。
b→dashへのデータ連携と取り込みを行っただけのデータファイルは表示されませんので、ご注意ください。
b→dashへのデータ連携と取り込みを行っただけのデータファイルは表示されませんので、ご注意ください。
「カラム」を選択します
「条件」を指定し、「適用」をクリックします
今回は、「保有ポイントが5,000以上」の場合を条件にするため、「以上」を選択し、「5000」と入力します
『メールコンテンツ設定領域』で「条件分岐」が設定されたことを確認します
これで保有ポイント5,000以上の顧客にのみ、特別なメッセージを表示することができます。
条件分岐を設定した後、設定内容が別の箇所に移動する可能性があります。該当の事象が発生した際は、弊社カスタマーサクセス担当にお問い合わせください。
❻ ボタンを差し込む
❻-① ブロックを追加する
「ブロック追加」をクリックします
「ブロック追加」をクリックします
「px数」を入力し、「適用」をクリックします
ブロックに追加している要素をリセットし、他の要素に変更したい場合は、「ブロック設定のリセット」アイコンをクリックしてください
❻-② ボタンを追加する
「要素を追加してください」をクリックします
「ボタン」をクリックします
「ボタンのテンプレート」を選択し、「適用」をクリックします
ボタンをクリックした際に「遷移したいURL」を入力し、「適用」をクリックします
ボタンが差し込まれます
『メールコンテンツ設定領域』で「ボタンデザイン」を設定します
変更したボタンが『メールコンテンツ表示領域』で表示されたことを確認します
❼ 余白を変更する
「変更したいブロック」をクリックします
『メールコンテンツ設定領域』で余白の「適用範囲」と「px」を設定します
変更した余白が『メールコンテンツ表示領域』で表示されたことを確認します
❽ 画像を差し替える
差し替える「画像」をクリックします
「設定」をクリックします
「画像の挿入方法」を選択し、「適用」をクリックします
今回は、「コンテンツボックス」を選択しています。
「差し替える画像」を選択し、「適用」をクリックします
『メールコンテンツ設定領域』で「画像」が差し替えられたことを確認します
❾ 画像を削除する
今回は、3段目の「画像」と「テキスト」を削除します。
「削除する画像」を選択し、「削除」をクリックします
「削除」をクリックします
選択した画像が削除されます
同じ手順で、3段目の「画像」と「テキスト」をすべて削除します
❿ 定型文を差し込む
ブロックをクリックし、「挿入」をクリックします
「定型文挿入」をクリックします
「挿入したいテキスト」を選択し、「適用」をクリックします
『メールコンテンツ設定領域』で「定型文」が挿入されたことを確認します
全体設定をする
「メール全体設定タブ」をクリックします
件名を設定する
「設定」をクリックします
「件名」を入力し、「適用」をクリックします
『メールコンテンツ設定領域』で「件名」が設定されたことを確認します
[任意]プリヘッダーを設定する
「設定」をクリックします
「プリヘッダー」を入力し、「適用」をクリックします
『メールコンテンツ設定領域』で「プリヘッダー」が設定されたことを確認します
[任意]ワンクリック登録解除URLを設定する
「設定」をクリックします
「ワンクリック登録解除に利用するURL」を選択し、「適用」をクリックします
「適用」をクリックします
『メールコンテンツ設定領域』で「ワンクリック登録解除URL」が設定されたことを確認します
プレビューで確認する
「プレビュー」をクリックします
プレビューが表示されるので、コンテンツの内容を確認します
プレビューの変更例、スマホ画面
プレビューの確認ができたら、メール作成画面に戻り、「保存」をクリックします
任意の名前を入力し、「適用」をクリックします
コンテンツが保存されたことを確認します
以上が、新メール作成画面でのHTMLメールの作成方法です！