Design Editor

参考動画：[Vimeo] Getting Started with Designing a Campaign

デザインエディタは、ドラッグ&ドロップの操作でテンプレートやキャンペーンを作成するためのWYSIWYGなエディタです。デザインエディタでは、キャンペーン内のText、Image、Button、ColumnsまたはCodeといったモジュールに変更を加えることができます。

デザインエディタ入門

  1. 画面左側のナビゲーションメニューから、Marketing > Campaignsを選択します。

  2. Create Campaignsをクリックします。
    過去に作成したキャンペーンを使用する場合は、使用するキャンペーンの歯車アイコンからEditまたはDuplicateを選択します。

  3. キャンペーンで使用するテンプレートを選択します。
    空白のテンプレート、過去に作成したテンプレート、またはSendGridのデフォルトのテンプレートが使用可能です。詳しくはTemplatesを参照してください。

  4. Design Editorを選択してContinueをクリックすると、デザインエディタが開きます。

Drag & Dropモジュールを使用する

事前に用意されたDrag & Dropモジュールを使用することにより、キャンペーンを素早く作成することができます。配置した各モジュールについては、画面左側のサイドバーで編集したり、ドラッグ & ドロップでメール本文内の位置を入れ替えることができます。

Drag & Dropモジュールを追加する方法

  1. BuildタブでAdd Modulesをクリックします。

  2. 追加するモジュールを選択し、コンテンツエリアにドラッグ&ドロップします。

  3. モジュールの設定を編集したりカスタムコンテンツを追加したりして、本文を編集します。

Drag & Dropモジュールの説明とスタイル

参考動画：[Vimeo]Adding Button, Columns and Code Modules
参考動画：[Vimeo]Adding Image and Text Modules
参考動画：[Vimeo]Adding Spacer, Divider, and Social Modules

キャンペーンに追加できるDrag & Dropモジュールは以下の通りです。

モジュール 説明 固有のスタイルオプション
Button リンクボタン Button Color(ボタン色)、
Border Color(線色)、
Font Color(文字色)、
Width(横幅)、
Height(高さ)、
Padding(内側の余白)、
Border Radius(角丸の半径)、
Border Width(線幅)、
Font Family(フォントの種類)、
Font Size(フォントサイズ)、
Font Weight(文字の太さ)、
Letter Spacing(文字間のスペースのサイズ)、
Button Text(ボタンテキスト)、
Button URL(ボタンURL)、
Container Background(コンテナの背景色)、
Container Padding(コンテナの内側の余白)、
Alignment(ボタンの文字寄せ)
Columns 他の複数のモジュールを配置するためのモジュール Background Color(背景色)、
Padding(内側の余白)、
Cell Padding(セル間隔)、
Columns(カラム数)
Code カスタムHTMLを記述するモジュール なし
Text テキストを記述するモジュール Background Color(背景色)、
Padding(内側の余白)、
Line Height(行の高さ)
Image 画像を1つ格納するモジュール Image Source URL(画像のURL)、
Link URL(リンク先URL)、
Alt Text(alt属性)、
Aligntment(画像の位置)、
Responsive(レスポンシブ)、
Width(幅)、
Height(高さ)、
Background Color(背景色)、
Margin(外側の余白)
Image and Text 画像＋テキスト用モジュール（画像とテキストの位置は入れ替えることが可能。） Image：Image Source URL(画像のURL)、
Alignment(画像の位置)、
Background Color(画像の背景色)、
Margin(画像の外側の余白)
Text：Background Color(テキストの背景色)、
Padding(テキストの外側の余白)、
Line Height(行の高さ)
Spacer モジュール間の余白（<td>タグの余白を調整する。Spacerは50pixelのサイズのスペースに相当する。） Background Color(背景色)、
Spacing(内側の余白)
Divider モジュール間の仕切り、水平線 Background Color(背景色)、
Line Color(線色)、
Padding(内側の余白)、
Height(高さ)
Social ソーシャルメディア用アイコン（Facebook、Twitter、Instagram、Google+、Pinterestのアイコンを提供する。ブランディングやデザインの方針に合わせてカスタマイズすることが可能） Background Color(背景色)、
Icon Color(アイコンの色)、
Icon Size(アイコンのサイズ)、
Border Radius(角丸の半径)、
Padding(内側の余白)、
Alignment(配置)、
URL(Facebook, Twitter, Instagram, Google, Pinterest, Linkedin)

GLOBAL STYLESを使用する

デザインエディタでは、配置した各モジュールを編集するだけではなく、キャンペーンやテンプレート全体の背景色・文字色・フォントの種類といったスタイルを変更することもできます。

GLOBAL STYLESのうちEMAIL BODYは、キャンペーンやテンプレートの本文全体を指します。

画面左側のサイドバーのGLOBAL STYLESのドロップダウンメニューには、EMAIL BODYまたはCONTENT CONTAINERの設定欄があり、以下のスタイルを編集することができます。

GLOBAL STYLES スタイルオプション
Email Body 背景色、文字色、リンクの表示色、フォントの種類、フォントサイズ
Content Container コンテナの横幅、コンテナの背景色、コンテナの内側の余白

モジュールのHTMLを編集する

モジュールのHTMLを編集する方法

  1. デザインエディタでモジュールを選択し、 < > アイコンをクリックします。
    モジュールのHTMLを編集するためのウィンドウが開きます。
  2. HTMLの編集が完了したらUpdateをクリックします。

モジュールの構成が変わるようなコード変更をする場合は、モジュールをコードモジュールに変換する必要があります。

コードモジュール

コードモジュールは、キャンペーンにカスタムHTMLを挿入するためのDrag & Drop モジュールです。作成したコードモジュールについては、配置を変更したりコードを編集し直したりすることができます。

コードモジュール内のHTMLを、デザインエディタが自動的にチェックしたり修正したりすることはありませんのでご注意ください。キャンペーンを送信する前に必ずプレビューを確認するようにしてください。

画像を追加する

画像をアップロードする方法

  1. BuildタブでAdd Modulesをクリックします。
  2. Imageモジュールをコンテンツエリアにドラッグ&ドロップします。
    Image Libraryに画像をアップロードするためのウィンドウが開きます。
  3. 画像をウィンドウにドラッグ&ドロップするか、ダイアログで選択することにより画像をアップロードします。

画像を挿入する方法

  1. BuildタブでAdd Modulesをクリックします。
  2. Imageモジュールをコンテンツエリアにドラッグ&ドロップします。
    Image Libraryで画像を選択するためのウィンドウが開きます。
  3. キャンペーンに追加する画像を選択すると、Image Detailsタブが開きます。
  4. Save Imageボタンをクリックして、画像をキャンペーンに挿入します。

Substitution Tagsを使用する

Substitution Tagsを使うと、事前に追加しておいたカスタムフィールドの値を使って、宛先ごとに異なる内容を動的に埋め込むことができます。一般的な例としては、キャンペーンの本文または件名に、受信者の名前を追加するといったことがあげられます。

キャンペーンにSubstitution Tagを追加する方法

  1. Tagsタブを開きます。
  2. キャンペーンに追加するタグを選択し、コピーアイコンをクリックします。
  3. モジュールにタグをペーストします。

Marketing Campaignsのエディタで作成したタグはTagsタブに表示されます。宛先メールアドレス[%email%]はデフォルトで使用可能です。

キャンペーンの本文に挿入できるSystem Fieldsを以下に示します。

Substitution Tag 説明 種別
[Sender_Name] 差出人の名前（SenderのFrom Name） Sender Identity
[Sender_City] 差出人の市区町村（SenderのCity） Sender Identity
[Sender_State] 差出人の都道府県（SenderのState） Sender Identity
[Sender_Zip] 差出人の郵便番号（SenderのZip Code） Sender Identity
[Unsubscribe] 指定した配信停止グループの配信停止リンク Unsubscribe
[Unsubscribe_Preferences] 受信者自身がメルマガ等の配信停止または購読再開を設定するためのページへのリンク Unsubscribe
[Weblink] メールが正しく表示されない場合に、メールソフトの代わりにブラウザで表示してもらうためのリンク Weblink

カスタムフィールドの情報が未登録の宛先については、Substitution Tagの箇所が空欄になります。初期値を設定するには次のように記載します。

[%first_name | 初期値%]

例）宛先情報のfirst nameを使って「太郎様」などと表示するが、未設定であれば「お客様」とする場合

[%first_name | お客%]様

配信停止タグを配置する

マーケティングキャンペーンでは配信停止タグの配置が必須です。

Design Editorでキャンペーンを作成すると本文の末尾に自動で配信停止モジュールが配置されます。

この内容を変更したい場合、自動で配置された配信停止モジュールを削除します。代わりにテキストモジュールを配置して以下の配信停止タグを使用してください。

  • Global Unsubscribe
    <%asm_global_unsubscribe_raw_url%>
  • Group Unsubscribe
    <%asm_group_unsubscribe_raw_url%>

＜配信停止タグ：Group Unsubscribeの使用例＞

例）テキストパートで任意の場所に配信停止URLを配置する

1
2
3

<%asm_group_unsubscribe_raw_url%>
↓
配信停止URL（http(s)://～）

例）HTMLパートで任意の場所に設定したタグに配信停止URLを指定する

1
2
3

<a href="<%asm_group_unsubscribe_raw_url%>">配信停止する</a>
↓
<a href="配信停止URL（http(s)://～）">配信停止する</a>

配信停止用のタグとあわせて、受信者自身が購読管理できるページへのリンクを挿入することも可能です。以下のタグを使用してください。

  • 購読管理ページ
    <%asm_preferences_raw_url%>

SendGridには様々な種類の配信停止タグが用意されています。その他の配信停止タグについてはこちらをご確認ください。

※SendGridの配信停止機能ではなく、独自の配信停止機能を使用する場合は「Custom Unsubscribe Link」を利用してください。

キャンペーンをプレビューする

画面左上のPreviewボタンをクリックすると、キャンペーンやテンプレートをプレビュー表示します。

コンテンツエリア上部のPCまたはモバイルのアイコンをクリックすると、PC/モバイル版のプレビューが切り替わります。

テキストメールの内容を確認するには、Tアイコンをクリックします。このプレビューモードでEdit Plain TextボタンをONにすると、キャンペーンやテンプレートのテキストメールを編集することができます。

プレビューでは、設定した差出人の名前や件名、プリヘッダーも表示されます。

HTMLのヘッダ情報を編集する

HTMLの<head>タグは、キャンペーンやテンプレートで使用するメタデータ（カスタムフォントやCSSのスタイルなど）を定義する部分です。

キャンペーンやテンプレートのHTMLのヘッダ情報を編集する方法

  1. 画面左側のツールバーのBuildタブで、Advancedメニューまでスクロールします。
  2. EDIT HTML HEADのオプションを展開します。
  3. Editをクリックして編集を開始します。
    カスタムHTMLを編集するためのウィンドウが開きます。
  4. 編集が完了したらUpdateボタンをクリックします。

カスタムフォントの設定をヘッダ情報に追加する

一般的には、Google Fontsなどのwebフォントへの参照を示すタグを使用して、カスタムフォントを追加します。

カスタムフォントをサポートしないクライアント環境があった場合に備えて、webセーフフォントを設定するようにしてください。

インボックスプロバイダによってはwebフォントをサポートしていない場合もありますが、以下に示すクライアントではサポートしています。

  • Apple Mail
  • Outlook.com アプリケーション
  • Outlook 2000
  • Android標準のメールアプリ（Android Gmailアプリケーションではありません）
  • iOS Mail

ただし、上記のクライアントについても100%のサポートを保証するものではありません。

カスタムフォントの設定をヘッダ情報に追加する方法

  1. デザインエディタのBuildタブからHTMLヘッダを開きます。
  2. Advancedドロップダウンメニューまでスクロールし、EDIT HTML HEADを選択します。
  3. Editをクリックして編集を開始します。
  4. webフォントへの参照（href属性）を含む<link>タグを挿入します。

例：

1

<link href="https://fonts.google.com/specimen/Oswald" rel="stylesheet">

次に、新しいフォントファミリーを明示する<style>タグを追加します。

1
2
3
4
5
6

<style>
    body {
        font-family: 'Oswald',
        sans-serif;
    }
</style>

Drag & Dropに対応したカスタムHTMLをインポートする

デザインエディタにインポートするカスタムHTMLを自作する場合は、Drag & Dropモジュールとしての機能を備えることを保証するために、Drag & Dropのコード例を参照してください。Drag & Dropモジュールに該当するデータタイプがない場合は、テキストモジュールとしてインポートされます。

カスタムHTMLをインポートする方法

  1. 画面左側のナビゲーションメニューでBuildタブを開きます。
  2. スクロールし、Advancedのドロップダウンメニューを選択します。
  3. Import/Exportのオプションを展開します。

  4. Importをクリックします。

  5. 使用するHTMLをペーストまたは入力して、Importをクリックします。

HTMLをインポートすると、キャンペーンやテンプレート内に存在するコンテンツをすべて上書きします。一部のみで使用したい場合は、コードモジュールを使用してください。

Drag & Drop マークアップ

SendGridは、カスタムHTMLの内容をチェックして、該当するDrag & Dropモジュールを探します。

  • 最初に、role="modules-container"の属性を含む要素を探します。
  • 次に、”modules-container”の子や孫の要素の中からrole="module"の属性を含む要素を探します。

自作のDrag & Dropモジュールを配置するにはrole="modules-container"の属性が必須です。デザインエディタに適合するキャンペーンやテンプレートのHTMLコードを一から作成する場合は、この属性を含めるようにしてください。SendGridのデフォルトのテンプレートでは、初期状態でrole="modules-container"の属性が含まれているため、コードを追加する必要はありません。

“modules-container”属性を持つ要素の外側に記述したHTMLコードは破棄されます。サポートされているスタイルオプションと属性のみを含むようにしてください。

カスタムHTMLに”modules-container”属性を含まない場合は、1つのテキストモジュールとしてインポートされます。

カスタムHTMLにDrag & Dropモジュールを含む場合は、それらのモジュールがキャンペーンやテンプレートにインポートされます。インポートしたモジュールは、通常通り移動したり編集したりすることができます。

しかし、Drag & Dropモジュールとの互換性がない場合は、テキストモジュールとしてインポートされます。

以下は、カスタムHTMLの例です。[module content]の部分は、自作のドラッグ&ドロップモジュールのソースコードに置き換えてください。

1
2
3
4
5
6
7
8
9
10
11

<div role=”modules-container”>
  <table role=”module” data-type=”button”>
    [ module content ]
  </table>
  <table role=”module” data-type=”text”>
    [ module content ]
  </table>
  <table role=”module” data-type=”image”>
    [ module content ]
  </table>
</div>

Drag & Dropのコード例

Module Custom Module Code Examples
Image 
1
2
3
4
5
6

<table class="wrapper" role="module" data-type="image">
  <tr>
    <td [styles go here] align=['left' or 'right']>
      [MODULE CONTENT]
    </td>
  </tr>
Image & Text 
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>
Text 
1
2
3
4
5
6
7

    <table class="module" role="module" data-type="text">
  <tr>
    <td [styles go here] bgcolor=[some color]>
      [MODULE CONTENT]
    </td>
  </tr>
</table>
Code 
1
2
3
4
5
6
7

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

    <table role="module" data-type="columns">
  <tr>
    <td [styles go here] bgcolor=[some color]>
      <table>
        <tr>
          <td class="templateColumnContainer column-drop-area">
          [MODULE CONTENT]
          </td>
          <td class="templateColumnContainer column-drop-area">
          [ANOTHER MODULE CONTENT]
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
Button 
1
2
3
4
5
6
7
8
9
10
11
12
13

 <table class="module" role="module" data-type="button">
  <tr>
    <td [styles go here] bgcolor=[some color] align=['left' or 'right']>
      <table class="wrapper-mobile">
        <tr>
          <td [styles go here too] bgcolor=[some color]>
            [MODULE CONTENT]
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
Divider 
1
2
3
4
5
6
7
8
9
10
11

    <table class="module" role="module" data-type="divider">
  <tr>
    <td [styles go here] bgcolor=[some color]>
      <table height=[some height]>
        <tr>
          <td bgcolor=[some color]></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
Spacer 
1
2
3
4
5
6

    <table class="module" role="module" data-type="spacer">
  <tr>
    <td style="padding: 50px 0 0 0" bgcolor=[some color]>
    </td>
  </tr>
</table>
Social 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    <table class="module" role="module" data-type="social">
 <tbody>
  <tr>
   <td [styles go here] data-align=['left', 'right', or 'center']>
    <table>
     <tbody>
      <tr>
       [MODULE CONTENT]
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>

デザインエディタからHTMLをエクスポートする

デザインエディタからテンプレートのHTMLをエクスポートする方法

  1. 画面左側のナビゲーションメニューでBuildタブを表示します。
  2. Advancedドロップダウンメニューまでスクロールします。
  3. Import/Exportオプションを展開します。
  4. Exportをクリックすると、HTMLがダウンロードされます（画像ファイルは含まれません）。

デフォルトのテンプレートに含まれる画像や、ユーザがImage Libraryにアップロードした画像はSendGrid上に保存されているため、デザインエディタからエクスポートしたHTMLの<img>タグのURLは有効です。

エクスポートしたHTMLをコードエディタで開く方法

  1. 画面左側のナビゲーションメニューから、Marketing > Campaignsを選択します。
  2. New Campaignをクリックし、BLANK TEMPLATEを選択します。
  3. Code Editorを選択します。
  4. コードエディタにHTMLをペーストします。

カテゴリを追加する

キャンペーンにカテゴリを追加することで、ユーザのカテゴライズのルールに則ってメールをトラッキングすることができます。キャンペーンにカテゴリを割り当てることで、複数の類似したキャンペーンの統計情報をまとめて確認できます。カテゴリの例としては、「Weekly Digest」「Product Annoucements」などがあげられます。カテゴリとして使用できるのはASCII文字のみです。

カテゴリには日本語を使わないことを推奨します。日本語のカテゴリを使用した場合、マーケティングキャンペーンの送信自体は可能ですが、Category Statsには表示されません。

カテゴリを追加する方法

  1. SettingsタブでCampaigns Settingsメニューを展開します。
  2. Categoriesの入力欄を探します。
  3. 新しいカテゴリを入力するか、過去に使用したカテゴリをドロップダウンメニューから選択します。

参考