デザインエディタを使ったHTMLメールの作成手順
デザインエディタを使ってHTMLメールを作成する手順をご案内します。例として作成するメールは、以下とします。
＜作成するHTMLメール＞
作成手順
- デザインエディタを利用する
- HTMLメール全体のスタイルの設定
- レイアウトの設定
- コンテンツの設定
- 作成したHTML本文の全体をプレビューで確認
- 保存
1. デザインエディタを利用する
デザインエディタを契約すると機能が有効化されます。本文HTML欄の右手に表示されている[ デザインエディタを利用して作成 ]をクリックし、デザインエディタに切り替えます。
2. HTMLメール全体のスタイル設定
メニューの[ 全体 ]タブをクリックし、HTML全体のスタイルを設定します。
コンテンツ領域の幅は、一般的に推奨される 600px がデフォルト値です。背景色やフォントの変更も可能です。
3. レイアウト設定
メールの構成をもとに、最適なレイアウトのパネルをドラック&ドロップで配置します。
設定したパネルの左手をクリックしながら上下に移動することや、パネルの削除、コピーが可能です。
また、選択した状態では、右手のメニューを使って選択したパネルの色を変更することや、列構造を変更することも可能です。
＜列構造の変更前＞
＜列構造の変更後＞
列構造にある「+ 新規追加」をクリックすると、列が追加されます。
列の間をクリックし、横へスクロールすることで、列幅の変更が可能です。背景色などの調整は、追加した列ごとに設定可能です。
4. コンテンツの設定
メールの構成をもとに、最適なコンテンツのパネルをドラック&ドロップで配置します。
画像
[ 画像を選択 ]をクリックし、画像のアップロード領域から表示する画像を挿入します。外部のサーバへアップロードされている画像のUrlを設定することも可能です。
テキスト
パネルを選択すると、文字のレイアウトを調整するためのエディタが表示されます。
区切り線
メニューのプロパティにて、区切り線の表示形式や色、太さの調整を行います。
動画
挿入する動画のUrlを設定し、再生アイコンなどの調整を行います。
ボタン
外部ページへ誘導するUrlを設定します。表示するボタンの幅調整や、背景色、色の調整を行います。
埋込コマンド
[ 埋込コマンド一覧 ] で表示される埋込コマンドをメール本文に挿入することで、配信先オブジェクトの項目などを埋め込んで配信することができます。オプトアウトURLも、埋込コマンドを使って設定します。
リンクを設定する文字を選択し、リンク先URLの入力枠へオプトアウトURLの埋込コマンドを挿入します。
ソーシャル
SNSのアイコン、および、Urlを設定します。表示するアイコンは自由に変更することができます。
標準で用意されていないアイコンを表示する場合は、アイコン画像を追加することも可能です。
5. 作成したHTML本文の全体をプレビューで確認
デスクトップ と モバイル、それぞれの表示を確認します。
6. 保存
[ 保存 ]をクリックし、設定は完了です。
編集
デザインエディタで作成したHTMLを編集します。
1. 操作をやり直す
保存する前であれば、1つ前の状態へ戻すことや、任意のタイミングの状態へ戻す事が可能です。
＜1つ前の状態へ戻す＞
＜任意のタイミングの状態へ戻す＞
2. 保存した設定を編集する
メールのコンテンツ編集画面から、編集が可能です。
コピー
作成済みの配信スケジュールを[ コピーして配信 ]をクリックして設定をコピーすることで、デザインエディタで作成したHTMLメールを使って、新たなHTMLメールを作成します。
