本記事では、HTMLメールをGUI編集モードで作成する方法について紹介しています。
作成手順は、大きく下記の4つです。

　1. テンプレートを選択する
　2. コンテンツの内容を編集する
　3. 件名を入力する
　4. コンテンツを確認して保存する

各手順の詳細は、以下をご参照ください。

1. テンプレートを選択する

はじめに、「メール/MA」アプリで「作成したいメールのイメージに近いテンプレート」を選択し、「メール作成画面」を開きます。
テンプレートを利用せずにコンテンツをカスタマイズしたい場合は、「白紙のテンプレート」を選択してください。

2. コンテンツの内容を編集する

「データ」を差し込む

1. データを差し込みたい箇所にカーソルを合わせ、画面上部の「データ挿入」をクリックします
2. 利用する「データファイル」を選択し、「適用」をクリックします

※ データファイル選択画面には、セグメントの作成に使用したデータファイルのみが表示されます
 　データ連携や取り込みを行っただけのデータファイルは表示されませんので、ご注意ください

3.「挿入したいカラム」を選択し、「適用」をクリックします
4. コンテンツにデータが挿入されたことを確認します

※ 同様の手順で、件名にも値を差し込むことができます
 　データ挿入すると「##__DFxxx-○○○__##」が表示されます

「日付」を差し込む

1. 日付を差し込みたい箇所にカーソルを合わせ、画面上部の「日付挿入」をクリックします
2. 日付の「表示形式」と「プレビュー」から利用したいデザインの日付を選択し、「適用」をクリックします
3. コンテンツに日付が挿入されたことを確認します

※「日付挿入」機能で挿入した『年月日』には、メール作成画面ではメール作成時の『年月日』、
　 受信したメールではメール配信時の『年月日』が入ります

枠を変更する

枠の変更では、「枠線」と「角丸」を変更することができます。

枠線を変更する

1. 枠線を変更したいブロックをクリックし、画面上部の「枠線」をクリックします
2. 枠線の「種類」「太さ」「色」を選択し、「適用」をクリックします
3. 枠線が変更されたことを確認します

角丸を変更する

1. 角丸を変更したいブロックをクリックし、画面上部の「角丸」をクリックします
2. 角丸の「px」を入力し、「閉じる」をクリックします
3. 角丸が変更されたことを確認します

リンクを差し込む

1.「URL」を反映させたいテキストを選択し、画面上部の「リンク挿入」をクリックします

※ テキストを選択せずにURLを選択することでURLリンクを差し込むこともできます

2. 挿入したい「URL」を入力し、「適用」をクリックします

※ 差し込むリンクの種類は「URL」「メールアドレス」「電話番号」の3つから選択することができ、
　 今回は例として、「URL」を選択しています
　 また、「挿入したいURL」として入力することができる文字数の上限は『2048』文字です

3. テキストに「リンク」が挿入されたことを確認します

テキストを入力/修正する

「フォント」「太字」「文字色」など変更することができます。

※「文字色」や「フォント」は一括で変更することはできません

#	アイコン画像	アイコン名	説明
1		フォント	テキストのフォントを変更できます。
2		太字	テキストを太文字に変更できます。
3		斜体	テキストを斜体に変更できます。
4		下線	テキストに下線を引くことができます。
5		取り消し線	テキストに取り消し線を引くことができます。
6		文字色	テキストの文字色を変更できます。
7		ハイライト	テキストにハイライトを付けることができます。
8		文字サイズ	文字サイズを変更できます。
9		行間	行間を変更できます。
10		塗り潰しの色	塗り潰しの色を変更できます。
11		配置	テキストの配置を変更できます。

コンテンツを出し分ける

b→dashでは、メールを配信する顧客に応じて、メールに記載する文面内容を出し分けることが出来ます。 例として「保有ポイントが5,000以上」である顧客に対して特別メッセージを差し込む操作方法を説明します。

1. 画面右上の「条件分岐」をクリックします
2. 条件分岐を設定する対象（今回はテキスト）を選択し、「適用」をクリックします
3. 条件分岐を設定する「テキスト」を選択します
4.「データファイル」を選択し、「適用」をクリックします

※ データファイル選択画面には、セグメントの作成に使用したデータファイルのみが表示されます
　 データ連携や取り込みを行っただけのデータファイルは表示されませんので、ご注意ください

5.「挿入したいカラム」を選択し、「適用」をクリックします
6.「条件」を選択し、「適用」をクリックします

※ 今回は、「保有ポイント5,000以上」のデータがある場合に差し込むので「以上」を選択して、「5000」と入力します

7. ><が表示されると条件分岐の挿入が完了です

ボタンを差し込む

以下では、ボタンを差し込むための「ブロックを追加」し、追加したブロックに「ボタンを追加」します。

ブロックを追加する

1. 画面右上の「ブロック追加」をクリックします
2. ブロックを追加したい箇所の「ブロック追加」をクリックします
3.「px数」を入力し、「適用」をクリックします

※ ブロックは最大15個まで追加出来ます

ボタンを追加する

1.「要素を追加してください」をクリックします
2. 画面上部の「ボタン」をクリックします

※ 追加要素には、他にも「画像」「テキスト」「境界線」を入れることが出来ます

3. ボタンをクリックした際に「遷移したいURL」を入力します
4. ボタンが挿入されたことを確認します

※ボタンを選択すると「変更項目」が表示されます

余白を変更する

1. 変更したい箇所にカーソルを合わせ、画面上部の「余白」をクリックします
2. 余白の「px」の値を入力し、「適用」をクリックします
3. 余白が反映されたことを確認します

画像を差し替える

1. 差し替える「画像」をクリックします
2. 「画像挿入」をクリックします

※「画像URL」を利用して画像を表示することもできます

3.「コンテンツボックス」をクリックします
4.「差し替える画像」を選択し、「適用」をクリックします

※ コンテンツに挿入できる画像形式は、「.png」「.jpeg」「.jpg」「.gif」「.svg」です

5. 選択した画像に差し替えられたことを確認します

定型文を差し込む

1. 差し込みたい箇所にカーソルを合わせ、画面上部の「定型文挿入」をクリックします
2.「挿入したいテキスト」をクリックします
3. メールに定型文が差し込まれます

3. 件名を入力する

「件名」を入力します

4. コンテンツを確認して保存する

「プレビュー」をクリックします

任意の名前を入力し、「適用」をクリックします