Show Menu
トピック×

クイックスタート電子メールコンテンツデザイン

電子メールデザイナーでは、4つの方法で電子メールを作成できます。
新規に開始する電子メールを作成できます。
  • 空白のキャンバスから電子メールを作成するには、構造やコンテンツコンポーネントを簡単に追加し、コンテンツをパーソナライズしてすばやく配信を送信します。 また、スタイル要素を完全に管理することもできます。 詳しくは、すばやく使い始める か、完全なドキュメント を参照 してください
  • テンプレートを選択し、ここから新しい電子メールコンテンツを作成することで、標準搭載されたテンプレートから電子メールを作成できます。 さらに詳しく
また、既存のコンテンツを含む電子メールを作成することもできます。
  • 既存のHTMLコンテンツは、(外部で作成したり、レガシーエディターで作成した)変換できます。 さらに詳しく
  • 既存のHTMLコンテンツは、互換モードですぐに読み込むことができます。 さらに詳しく

既存のコンテンツなし

新規での電子メールの作成

簡単に電子メールを作成し、コンポーネントを追加し、コンテンツをパーソナライズして、すばやく配信できます。 必要に応じて、コンテンツに合わせてスタイル設定オプションを調整できます。 スタイル設定とインライン属性の管理について詳しくは、「電子メールスタイルの編 集」を参照してくださ い。

件名行の追加

件名は電子メールの送信時に必須です。 詳しくは、「電子メールの件 名行の定義」を参照してください
  1. 電子メールを作成します。
  2. ホームページを閉じます。
  3. 電子メールデ Properties ザイナのホームページのタブ(ホームアイコンからアクセス可能)に移動し、セクションに入力 Subject します。

構造コンポーネントの追加

構造コンポーネントは、電子メールのレイアウトを定義します。 詳しくは、「電子メール の構造の定義」を参照してください
構造コンポーネントで、使用するレイアウトのコンポーネントをドラッグ&ドロップします。
電子メールに追加する様々なコンテンツレイアウトを選択できます。

コンテンツコンポーネントの追加

画像、テキスト、ボタンなど、電子メールに複数のコンテンツコンポーネントを追加できます。 詳しくは、「コンテンツコンポーネント」を 参照してくださ い。
  • 画像
  1. 「コンテ ンツコンポーネント 」で、構造コンポーネントの1つに画像をドラッグ&ドロップします。
  2. 「参照」をク リックしま ​す。
  3. コンピューターから画像ファイルを選択します。
  • パーソナライゼーションを含むテキスト
  1. 「コンテ ンツコンポーネント 」で、構造コンポーネントの1つにテキストをドラッグ&ドロップします。
  2. コンポーネントをクリックし、テキストを入力します。
  3. パーソナライゼーションフィールドを追加するには、ツールバー の「パーソナライゼーション ・フィールドの挿入」をクリックします。
  4. 「名」など、必要なフィールドを選択します。
  • HTML
  1. Content Components 」で、HTMLを構造コンポーネントの1つにドラッグ&ドロップします。
  2. 「ソース コードを表示」をクリックします
  3. HTMLコンテンツを入力します。
  4. 保存 」をクリックします。
HTMLに詳しい場合は、コンテンツコンポーネントを使用して、元のフッターからHTMLコードをコピー&ペースト Html できます。 For more on this, see About content components .

電子メールコンポーネントのスタイル設定

例えば、コンポーネントのパディングを変更することで、電子メールのスタイルを調整できます。 スタイル設定とインライン属性の管理について詳しくは、「電子メールスタイルの編 集」を参照してくださ い。
  1. 「テキスト」コンポーネン トをクリックしま ​す。
  2. 右側のパレットで「パディング」に移動し ます
  3. 上下左右のパラメーターの同期を解除するには、ロックアイコンをクリックします。
  4. 必要に応 じて 、パディングを調整します。
  5. 保存 」をクリックします。
これで、電子メールを保存して送信できます。

標準搭載のテンプレートからのコンテンツの作成

お客様のお知らせメッセージ、ニュースレター、再契約の電子メールなど、すぐに使えるテンプレートから電子メールを作成し、それらをパーソナライズすることができます。
  1. 電子メールを作成し、その内容を開きます。 詳しくは、「電子メールの作成」を 参照してください
  2. ホームアイコンをクリックして、ホームページに Email Designer アクセスします。
  3. Click the Templates tab.
  4. 標準搭載のHTMLテンプレートを選択します。 様々なテンプレートは、複数の要素の様々な組み合わせを表します。 例えば、「Feather」テンプレートには余白があり、「Astro」テンプレートには余白がありません。 詳しくは、「コンテンツテンプレート」を参 照してください
  5. 電子メールデ Properties ザイナのホームページのタブ(ホームアイコンからアクセス可能)に移動し、セクションに入力 Subject します。
  6. これらの要素を組み合わせて、多くの電子メールバリアントを作成できます。 例えば、構造コンポーネントを選択し、コンテキストツールバーからをクリックして、電子メールセク Duplicate ションを複製できます。
  7. 左側の青い矢印を使用して要素を移動し、構造コンポーネントを別のコンポーネントの下または上にドラッグできます。 詳しくは、「電子メール構造の 編集」を参照してください
  8. また、コンポーネントを移動して、各構造要素の構成を変更することもできます。 詳しくは、フラグメントとコンポーネ ントの追加を参照してください
  9. 必要に応じて、各要素の内容を変更します。画像、テキスト、リンク。
  10. 必要に応じて、スタイル設定オプションをコンテンツに合わせます。 For more on this, see Editing email styles .

既存のコンテンツを使用する場合

複数の電子メールで再利用できるモジュラー型テンプレートとフラグメントのフレームワークを構築する場合は、電子メールHTMLを電子メールデザイナーテンプレートに変換することを検討してください。

HTMLコンテンツの変換

この使用例では、HTML電子メールを電子メールデザイナーコンポーネントにすばやく変換できます。
この節は、HTMLコードに詳しいユーザーを対象としています。
互換性モードと同様に、HTMLコンポーネントは次の制限付きオプションで編集できます。インプレースエディションのみを実行できます。
電子メールデザイナーの外部で、元のHTMLが再利用可能なセクションに分割されていることを確認します。
  1. 電子メールデザイナーを開いて、空の電子メールコンテンツを作成します。
  2. ボディレベルの属性を設定します。背景色、幅など For more on this, see Editing email styles .
そうでない場合は、HTMLの異なるブロックを切り取ってください。 例えば、次の節は明確に識別されます。
<!-- 3 COLUMN w/CTA (SCALED) -->
<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation" style="max-width:680px;">
<tbody>
<tr>
<td class="padh10" align="center" valign="top" style="padding:0 5px 20px 5px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
...
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- //3 COLUMN w/CTA (SCALED) -->

すべてのブロックを特定したら、電子メールデザイナで、既存の電子メールの各セクションに対して次の手順を繰り返します。
  1. 構造コンポーネントを追加します。 詳しくは、「電子メール構造の 編集」を参照してください
  2. HTMLコンポーネントを追加します。 詳しくは、フラグメントとコンポーネ ントの追加を参照してください
  3. HTMLをそのコンポーネントにコピー&ペーストします。
  4. モバイルビューに切り替えます。 For more on this, see this section .
    CSSが見つからないので、レスポンシブビューが壊れています。
  5. これを修正するには、ソースコードモードに切り替えて、スタイルセクションを新しいスタイルセクションにコピー&ペーストします。 次に例を示します。
    <style type="text/css">
    a {text-decoration:none;}
    body {min-width:100% !important; margin:0 auto !important; padding:0 !important;}
    img {line-height:100%; text-decoration:none; -ms-interpolation-mode:bicubic;}
    ...
    </style>
    
    
    この後に、別のカスタムスタイルタグでスタイルを追加してください。
    電子メールデザイナーが生成したCSSは変更しないでください。
    • <style data-name="default" type="text/css">(##)</style>
    • <style data-name="supportIOS10" type="text/css">(##)</style>
    • <style data-name="mediaIOS8" type="text/css">(##)</style>
    • <style data-name="media-default-max-width-500px" type="text/css">(##)</style>
    • <style data-name="media-default--webkit-min-device-pixel-ratio-0" type="text/css">(##)</style>
  6. モバイルビューに戻って、コンテンツが正しく表示されていることを確認し、変更を保存します。

HTML電子メールの読み込みと編集

コンテンツをアップロードする場合、電子メールデザイナーのWYSIWYGエディターに完全に準拠し、編集可能な特定のタグ付けを含める必要があります。
アップロードされたHTMLのすべてまたは一部が期待されたタグ付けに準拠していない場合、コンテンツは「互換性モード」で読み込まれ、UIを使用した編集の可能性が制限されます。
コンテンツが互換モードで読み込まれても、インターフェイスを通じて次の変更を行うことができます(使用できないアクションは非表示になります)。
  • テキストの変更または画像の変更
  • リンクとパーソナライゼーションフィールドの挿入
  • 選択したHTMLブロックのスタイル設定オプションの一部を編集
  • 条件付きコンテンツの定義
電子メールに新しいセクションを追加したり、高度なスタイル設定を行ったりするなど、その他の変更は、電子メールのソースコードでHTMLモードを使用して直接行う必要があります。 互換性モードではドラッグ&ドロップを使用できませんが、レガシーエディターと同じ機能セットが保証されます。
既存の電子メールを電子メールデザイナー互換の電子メールに変換する方法について詳しくは、この節を参 照してくださ い。