Drag & Drop エディタ

旧Marketing Emails(Legacy Newsletter)機能からマイグレーションを行う場合、こちらを参照してください。

Drag & Drop エディタは、事前に用意されたモジュールを使ってメールを素早く作成することができる機能です。 サイドバーに配置されている各モジュールはそれぞれ簡単に追加/編集することができ、モジュール位置の入れ替えもマウスをドラッグするだけです。



Drag & Drop エディタを使うには

まずは “Settings” タブを開き、CAMPAIGN NAME(キャンペーン名)の下にある “DRAG AND DROP EDITOR” ボタンを “ON(有効)” にします。 エディタモードの変更を確認するダイアログが表示されるので、”continue” をクリックして有効化してください。必要なコードが追加され、既存のコンテンツはその中に取り込まれます。

既存のテンプレートをDrag & Drop エディタ対応版にコンバートするには、各モジュールのHTMLコードをご参照ください。 Drag & Drop モジュールにコンバートされなかったコンテンツについては、すべてWYSIWYGモジュール内にグルーピングされます。

Drag & Drop エディタを有効化すると、”Build” タブが表示されます。このタブには、利用可能なモジュールやスタイルのグループが表示されます。

“GLOBAL STYLES” グループには2つのサブグループがあり、それぞれ次の項目のスタイルを指定できます。

  • EMAIL BODY
    • Background Color:Bodyの背景色
    • Text Color:文字色
    • Link Color:リンクの表示色
    • Font Family:フォントの種類
    • Font Size:フォントの大きさ
  • CONTENT CONTAINER
    • Width:コンテナの横幅
    • Background Color:コンテナの背景色
    • Padding:コンテナの内側の余白

“MODULE STYLES” グループでは、各モジュールのスタイルを指定できます。 新規モジュールをエディタにドラッグ&ドロップするか、すでに追加済のモジュールを選択すると、そのモジュールで設定できるスタイル属性がここに表示されます。

モジュールのコピーを作成することもできます。コピーするモジュールを選択し、右上に表示されているコピーアイコンをクリックしてください。 元のモジュールのすぐ下に、コピーされたモジュールが追加されます。

利用可能なモジュール

各キャンペーンには、自動的に「Footer」モジュールが追加されます。

Footerモジュールは固定で、削除はできません。

Footer は、送信元の情報や配信停止リンク等を含む重要なパーツです。背景色と余白を指定できます。

モジュール 説明 固有のスタイルオプション
Text テキスト用モジュール 背景色、内側の余白
Image 画像を1つ格納できるモジュール 背景色、外側の余白
Image & Text 画像+テキスト(右寄せ/左寄せ)用モジュール 画像位置、画像の背景色、画像の外側の余白、テキストの背景色、テキストの外側の余白
Columns 複数のモジュールを配置できるモジュール 背景色、内側の余白、セル間隔、カラム数
Button リンクボタン ボタン色、線色、文字色、横幅、高さ、内側の余白、角丸の半径、フォントサイズ、ボタンテキスト、ボタンURL、ボタン位置、コンテナの背景色、コンテナの内側の余白
Spacer モジュール間の余白 背景色、内側の余白(padding-bottom)
WYSIWYG テキストと画像を含めることができる万能モジュール。見たまま編集することができる。WYSIWYGとは、”What You See Is What You Get” の略。 背景色、内側の余白
Divider モジュール間の仕切り、水平線 背景色、線色、高さ、内側の余白
Social ソーシャルメディア用アイコン アイコン(Facebook, Twitter, Instagram, Google+, Pinterest)、サイズ、角丸の半径

サイドバーのモジュールをドラッグ&ドロップするか、エディタ内に配置済のモジュールを選択すると、各モジュールのスタイル属性が表示されます。どのモジュールを編集しているのかが分かりやすいよう、対象のモジュールはハイライト表示されます。

各モジュールのHTMLコード

コードエディタでゼロからモジュールを作成する場合や、既存のHTMLコードをDrag & Drop モジュールに変換する場合は、以下のテンプレートをご参照ください。

Drag & Drop モード用のHTMLコード

Drag & Drop モードを使うには、まず <html> の開始タグに data-dnd="true" という属性を追加します。 これにより、Drag & Drop エディタモードが有効になります(Settingsタブのボタンも “ON” に切り替わります)。

Drag & Drop エディタ用のテンプレートは、モジュールの種類ごとに異なるdata-typeが指定された、tableでできています。 tableのカラムにコンテンツを配置できるモジュール(Textモジュールのテキスト部分など)もありますが、それがないモジュールもあります(Spacerモジュールなど)。

汎用的なDrag & Drop モジュールの例

1
2
3
4
5
6
7
<table role="module" data-type=[MODULE TYPE]>
  <tr>
    <td role="module-content">
[MODULE CONTENT]
    </td>
  </tr>
</table>

Button

Buttonモジュールにはユニークな属性が沢山あります。 Button用のテンプレートは非常にシンプルですが、URLやボタンテキストのような属性をStyleサイドバーで設定できるようになっています。

Button example:

1
<table role="module" data-type="button"></table>

Spacer

Spacerモジュールにはコンテンツはありません。Styleサイドバーでは背景色と余白のサイズのみ指定できます。 そのため、テンプレートは非常にシンプルです。

Spacer example:

1
<table role="module" data-type=”spacer”></table>

Text

Textモジュールは汎用テンプレートがベースになっています。 [MODULE CONTENT] の部分をブランク(空白)にしたままコードエディタからビジュアルエディタに切り替えれば、デフォルト状態での見た目を確認することができます。また、次の例のように、有効なHTMLコードで置き換えることもできます。

1
<div>Textモジュールの標準テキストの例。</div>

Text example:

1
2
3
4
5
6
7
<table role="module" data-type=”text”>
  <tr>
    <td role="module-content">
[MODULE CONTENT]
    </td>
  </tr>
</table>

Image

各変数の値はブランク(空白)でも構いません。 ビューを切り替えてイメージライブラリから画像を追加するか、もしくは次の手順でお手持ちの画像を直接追加することができます。

[DATA ATTRS] の部分を以下のコードで置き換えます。

1
  data-attributes=' { "width": X, "height": Y, "url": "画像URL", "alt_text": "ALTテキスト", "link": "有効なURL" } '

[MODULE CONTENT] の部分を以下のコードで置き換えます。

1
  <a href="有効なURL" target="_blank"><img width="X" height="Y" src="画像URL" alt="ALTテキスト" /></a>

Image example:

1
2
3
4
5
6
7
<table role="module" data-type="image" [DATA ATTRS]>
  <tr>
    <td role="module-content">
      [MODULE CONTENT]
    </td>
  </tr>
</table>

Image & Text

その名前の通り、このモジュールはImageモジュールとTextモジュールを内包しています。 そのためテンプレートは少し大きくなっていますが、中身は同じです。 (デフォルト属性のままビューを切り替えて見た目を確認することができますし、前述のテンプレートの説明に従ってコンテンツを書き換えてもOKです。)

Image and Text Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<table role="module" data-type="imagetext">
  <tr>
    <td>
      <table>
        <tr role="module-content">
          <td class="templateColumnContainer" >
            <table>
              <tr>
                <td class="leftColumnContent" role="column-one">
                  <table role="module" data-type="image">
                    <tr>
                      <td role="module-content">
                        [MODULE CONTENT]
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
          <td class="templateColumnContainer" >
            <table>
              <tr>
                <td class="rightColumnContent" role="column-two">
                  <table role="module" data-type="text">
                    <tr>
                      <td role="module-content">
                        [MODULE CONTENT]
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Columns

Columnsモジュールは、コンテナとしての役割を果たすものです。 1〜4個のカラムを作成することができ、各カラムに他のモジュールをドラッグ&ドロップすることができます。

Columnsモジュールを、他のColumnsモジュールの中にドロップすることはできません。

Columnsモジュールのカラム数のデフォルトは、2です。 他のテンプレートと同じように、[MODULE] 部分はブランク(空白)にすることができますが、有効なHTMLコードで置き換えることもできます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table role="module" data-type="columns">
  <tr>
    <td>
      <table class="columns--container-table">
        <tr role="module-content">
          <td role="column-0">
            [MODULE]
          </td>
          <td role="column-1">
            [MODULE]
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Divider

Dividerモジュールにはコンテンツはなく、静的なデザイン要素としての機能しかありません。 水平線など、モジュール間の視覚的な仕切りとして使うことができます。 Dividerモジュールに設定できる属性としては、背景色、線色、線の高さ、および内側の余白があります。

他のモジュールと同様、[MODULE CONTENT] の部分をブランク(空白)にしたままコードエディタからビジュアルエディタに切り替えれば、デフォルト状態での見た目を確認することができます。

Divider example:

1
2
3
4
5
6
7
<table class="module" role="module" data-type="divider">
  <tr>
    <td role="module-content">
      [MODULE CONTENT]
    </td>
  </tr>
</table>

WYSIWYG(ウィジウィグ)

WYSIWYG(“What You See Is What You Get”の略)モジュールは、細かい編集をするのに適しています。 既存のHTMLコンテンツを各モジュールに変換せずにそのままインポートしたい場合は、このモジュールを使います。

WYSIWYGモジュールは汎用テンプレートがベースになっています。 [MODULE CONTENT] の部分をブランク(空白)にしたままコードエディタからビジュアルエディタに切り替えれば、デフォルト状態での見た目を確認することができます。また、次の例のように、有効なHTMLコードで置き換えることもできます。

WYSIWYG example:

1
2
3
4
5
6
7
<table role="module" data-type=wysiwyg>
  <tr>
    <td role="module-content">
[MODULE CONTENT]
    </td>
  </tr>
</table>

Social

Socialモジュールでは、ソーシャルメディアへのシンプルなリンクを追加することができます。 各ソーシャルメディアごとにカスタマイズされた、5つの異なるアイコン(Facebook, Twitter, Instagram, Google+, Pinterest)が用意されており、それぞれON/OFFを切り替えることができます。 また、各アイコンのリンク先が指定されると、リンクが設定されたことが分かるように視覚的に表示されます。

各ソーシャルメディアのON/OFFの切り替えは、チェックボックスをON/OFFするだけです。 アイコンのサイズ、色、角丸の半径は、メールのデザインに合わせて調整することができます。

HTMLコードをDrag & Drop モジュール用にコンバートするには、以下のコードを追加してください。 コードビューで貼り付けてからデザインエディタに戻せば、新しいソーシャルアイコンモジュールが選択され、画面左側のStyleサイドバーでそのスタイルを調整できます。

Social example:

1
2
3
4
5
6
<table class=“module” role="module" data-type="social">
  <tr>
    <td role=“module-content”>
    </td>
  </tr>
</table>
‹ Templates
Senders ›