ドラッグ＆ドロップでメールを作成する

ドラッグ＆ドロップエディターを使用すると、キャンペーンまたはキャンバスのいずれかで、完全にカスタムでパーソナライズされたメールメッセージを作成できます。メール本文の構築にHTMLを使用する必要はありません。

エディターについて

ドラッグ＆ドロップエディターでは、コンテンツと行の2つの主要コンポーネントを使用して、HTMLを追加で使用することなくワークフローを簡素化できます。

コンテンツと行のエディターコンポーネント

コンテンツ	行

コンテンツ

コンテンツには、メッセージで使用できるさまざまな種類のコンテンツを表すタイルのシリーズが含まれています。これらは基本、メディア、詳細の3つのカテゴリに分類されています。

• 基本
• メディア
• 詳細

行

行は、列を使用してメッセージのセクションの水平構成を定義する構造的な単位です。空の行またはContent Blocksを使用できます。複数の列を使用すると、異なるコンテンツ要素を横に並べて配置できます。これにより、開始時に選択したテンプレートに関係なく、必要な構造要素をすべてメッセージに追加できます。

テキストブロック内での画像のネスト

ドラッグ＆ドロップエディターでは、段落やその他のテキストブロック内に画像をネストすることはできません。テキストレイアウトの横または内部に画像を配置するには、行の列を使用します。たとえば、デスクトップ用にはその行にモバイルで非表示を設定したマルチカラム行を使用し、モバイル用には別のモバイル専用行（必要に応じてデスクトップで非表示とモバイルでスタックしないを設定）を使用すると、小さな画面でも画像とテキストがきれいに配置されます。

カードスタイル

カードスタイルは、列間にスペースを追加し、角を丸くできる行のプロパティです。カードスタイルのフォーマットを使用すると、新機能、お客様の声、特別オファー、ニュース更新など、最も重要なコンテンツを強調するための視覚的に魅力的なレイアウトを作成できます。

ドラッグ＆ドロップエディターの使用

メールメッセージをキャンペーンで送信するかキャンバスで送信するか迷っていますか？キャンペーンは単一のターゲットメッセージに適しており、キャンバスはマルチステップのユーザージャーニーに適しています。

注

キャンペーンまたはキャンバスからドラッグ＆ドロップメールを直接テンプレート > メールテンプレートにメールテンプレートとして保存することはできません。先にテンプレートで作成するか、キャンペーンやキャンバスで作成したドラッグ＆ドロップメールをテンプレートとして保存できますか？を参照して、ドラッグ＆ドロップテンプレートを再作成するか、ファイルをダウンロードでHTMLをエクスポートしてください。

メッセージの作成場所を選択したら、ドラッグ＆ドロップメールを作成する手順を見ていきましょう。

ステップ1:テンプレートを選択する

編集エクスペリエンスとしてドラッグ＆ドロップエディターを選択したら、以下の選択肢があります。

• 空白のテンプレートから始める。
• Brazeのプリデザインされたドラッグ＆ドロップメールテンプレートを使用する。
• 保存済みのドラッグ＆ドロップメールテンプレートを使用する。

注

既存のカスタムHTMLテンプレートやサードパーティが作成したテンプレートを使用する場合は、コンテンツ > メールに移動し、編集エクスペリエンスとしてドラッグ＆ドロップエディターを選択してテンプレートを再作成する必要があります。

すべてのテンプレートにはテンプレートセクションからもアクセスできます。

テンプレートを選択すると、メールバリアントの下にメールの概要が表示されます。これには送信情報とメール本文が含まれます。

次に、メール本文を編集を選択して、ドラッグ＆ドロップエディターでメールの構造をデザインします。

ステップ2:メールを作成する

ドラッグ＆ドロップの編集エクスペリエンスは、送信設定、コンテンツ、プレビューとテストの3つのセクションに分かれています。メール本文の作成はすべてコンテンツセクションで行います。メールを作成する前に、メール作成エクスペリエンスの基本となる主要コンポーネントを理解しておくことが重要です。確認が必要な場合は、エディターについてを参照してください。

準備ができたら、ドラッグ＆ドロップのコンテンツブロックを使用してメールを作成します。

1. 行パネルを選択します。行の構成をメインエディターにドラッグ＆ドロップします。これにより、メールコンテンツのレイアウトが定義されます。
   • 新しい構成は、既存のセクションの上部または下部にドラッグする必要があります。
   • 行の構成を選択すると、行の背景色、画像、カスタム列サイズをさらにカスタマイズするための行プロパティ設定が表示されます。
2. コンテンツパネルを選択します。必要なコンテンツタイルを行コンポーネントにドラッグ＆ドロップします。
   • コンテンツタイルをメインエディターに直接ドラッグすることもできます。これにより、タイル用の行が作成されます。
   • タイルを選択し、コンテンツプロパティとブロックオプションのフィールドを調整することで、タイルをさらに細かく設定できます。これには文字間隔、パディング、行の高さなどの編集が含まれます。

ドラッグ＆ドロップメールをさらにカスタマイズする方法については、その他のカスタマイズをご確認ください。

メールを作成する際に、デスクトップとモバイルの表示を切り替えて、ユーザーグループにメールがどのように表示されるかをプレビューできます。これにより、コンテンツがレスポンシブであることを確認でき、必要に応じて調整を行えます。

ヒント

優れたコピーの作成にお悩みですか？AIコピーライティングアシスタントをお試しください。商品名や説明を入力すると、AIがメッセージングに使用できる人間のようなマーケティングコピーを生成します。

ステップ3:送信情報を追加する

メールメッセージのデザインと作成が完了したら、送信設定セクションで送信情報を追加します。

1. 送信情報 で、差出人表示名 + アドレス としてメールを選択します。差出人表示名 + アドレスをカスタマイズ を選択してカスタマイズすることもできます。
2. 返信先アドレス としてメールを選択します。返信先アドレスをカスタマイズ を選択してカスタマイズすることもできます。
3. 次に、BCCアドレス としてメールを選択し、このアドレスにメールが表示されるようにします。
4. メールに件名を追加します。オプションで、プリヘッダーを追加することもできます。プリヘッダーの後に空白を追加するには、プリヘッダーの後に空白を追加 チェックボックスを選択します。

ヒント

差出人表示名 + アドレスと返信先アドレスのフィールドでは、Liquidを使用して、カスタム属性に基づいてダイナミックなテンプレートを作成できます。これにより、単一のメールキャンペーンやキャンバスステップを使って、異なるブランド、地域、部門から送信できます。

右側のパネルのプレビューに、追加した送信情報が表示されます。この情報は設定 > メール設定 > 送信構成に移動して更新することもできます。

メール添付ファイルを追加する

送信設定 > 詳細で、以下の方法でメール添付ファイルを追加できます。

• ファイルをアップロード： ドラッグ＆ドロップするか、参照してコンピューターからメールにファイルを直接アップロードします。Brazeはアップロード前にファイルの種類とサイズ（デフォルトで最大2 MB）を検証し、その後ファイルはメディアライブラリにアップロードされます。2 MBの制限を超えるファイルはアップロードできません。
• メディアライブラリを使用： メディアライブラリに既に保存されているアセットを参照して選択します。PDF、Word文書、Excelファイル、PowerPointプレゼンテーションがすべてサポートされています。
• URLから追加： ファイルを指すURLを入力し、表示用のファイル名を指定します。Brazeはメール作成時に任意のURLのサイズを検証できないため、ファイルサイズは送信時に適用されます。

注

URLから追加フィールドではLiquidはサポートされていません。

具体的なベストプラクティスについては、メールガイドラインを参照してください。

メールヘッダーをパーソナライズする（詳細）

送信設定では、メールヘッダーとメールエクストラのパーソナライゼーションを追加できます。これにより、他のメールサービスプロバイダーに追加データを送信できます。受信者の名前を含めるなどのメールヘッダーのパーソナライズは、メールが開封される可能性を高めることにも貢献します。

注

詳細機能は、キャンペーンまたはキャンバスのコンポーザーに表示されます。詳細機能では、インラインCSS設定を変更したり、ヘッダーまたはエクストラのキーと値のペアを入力したりできます（設定されている場合）。

ステップ4:メールをテストする

送信情報を追加したら、いよいよメールをテストします。

ヒント

エディターでの表示とプレビューやテスト送信での表示が異なる場合は、すべてのタグが閉じられていること、画像属性に値があること、背景画像の端がぼやけていないことを確認してください。

プレビューとテストセクションに移動します。ここでは、ユーザーとしてメールをプレビューするか、テストメッセージを送信するかを選択できます。このセクションにはInbox Visionも含まれており、さまざまなモバイルおよびWebクライアントでメールが正しくレンダリングされるかどうかを確認できます。

ヒント

プレビューパネルのダークモードプレビュートグルを使用して、ダークモードでメール本文を確認し、必要に応じてメールを調整することもできます。

実際のエディター、Inbox Vision、実際のテストメールの3つの異なるバージョンで同じメールを確認できるため、すべてのプラットフォームで詳細を統一することが重要です。

プレビューとテスト送信

ユーザーとしてプレビュータブでは、以下のユーザータイプを選択してメッセージをプレビューできます。

• ランダムユーザー： Brazeがデータベースからランダムにユーザーを選択し、その属性やイベント情報に基づいてメールをプレビューします。
• ユーザーを選択： メールアドレスまたはexternal IDに基づいて特定のユーザーを選択できます。そのユーザーの属性とイベント情報に基づいてメールがプレビューされます。
• カスタムユーザー： ユーザーをカスタマイズできます。Brazeは利用可能なすべての属性とイベントの入力欄を提供します。プレビューメールで確認したい情報を入力できます。

注

ランダムユーザーは、セグメンテーション基準に含まれる場合と含まれない場合があります。セグメンテーションは後から選択されるため、この時点ではBrazeはターゲットオーディエンスを把握していません。

プレビューリンクをコピーを選択して、ランダムユーザーに対するメールの表示を確認できる共有可能なプレビューリンクを生成してコピーすることもできます。詳細については、共有可能なプレビューを参照してください。

Inbox Visionを使用する

Inbox Visionでは、メールクライアントやモバイルデバイスの視点からメールキャンペーンを表示できます。Inbox Visionを使用してメールメッセージをテストするには、プレビューとテストセクションでInbox Visionを選択し、Inbox Visionを実行を選択します。

メールメッセージの細部をテストして確認することが重要です。たとえば、メールの背景画像により画像間に白い線や途切れが表示されたり、Windows Outlookなどのクライアントでは背景画像が表示されない場合があります。Inbox Visionを使用すると、クライアント間のこれらの違いを特定できます。この場合、画像が想定通りにレンダリングされるように、フォールバック背景色を設定してください。

詳細については、テストメッセージの送信を参照してください。

ドラッグ＆ドロップエディターを使用してメールメッセージをデザイン・作成した後は、キャンペーンまたはキャンバスの残りの作成に進みます。

その他のカスタマイズ

ドラッグ＆ドロップメールの作成を続ける中で、これらのクリエイティブな詳細を組み合わせることで、各メール本文をさらにカスタマイズし、メッセージに対するオーディエンスの注目と関心を引くことができます。

ヒント

グローバルスタイル設定を使用して、ドラッグ＆ドロップエディターのカスタムテーマを作成できます。

自動幅画像

メールに追加された画像は、自動的に自動幅に設定されます。この設定を調整するには、自動幅をオフに切り替え、必要に応じて幅のパーセンテージを調整してください。

カラーレイヤリング

カラーレイヤリングを使用すると、メールの背景色、コンテンツ領域、さまざまなコンテンツコンポーネントの色を変更できます。前面から背面への色の順序は、コンテンツコンポーネントの色、コンテンツ領域の背景色、背景色の順です。

コンテンツのパディング

パディングを調整するには、ブロックオプションまでスクロールし、その他のオプションを選択します。パディングを微調整して、メールの見た目を整えることができます。

コンテンツの背景

行構成に背景画像を追加して、メールキャンペーンにより多くのデザインやビジュアルコンテンツを組み込むことができます。

言語属性

設定タブに移動し、目的の言語を選択することで、言語属性を設定できます。メッセージがダイナミックな言語値を持つユーザーを対象としている場合は、ユーザー属性 {{${language}}} をターゲットにすることもできます。

パーソナライゼーション

ドラッグ＆ドロップメールエディターでは、基本的なLiquidがサポートされています。メールにパーソナライゼーションを追加するには：

1. コンテンツセクションの下にあるパーソナライゼーションを選択します。
2. パーソナライゼーションタイプを選択します。デフォルト（標準）属性、デバイス属性、カスタム属性などが含まれます。
3. 追加する属性を検索します。
4. 生成されたLiquidスニペットをコピーして、メール本文に貼り付けます。

Liquidパーソナライゼーションは、画像ブロックおよびボタンリンクタイプのフィールドではサポートされていません。

ダイナミック画像

画像ソース属性にConnected ContentやLiquidを含めることで、メールメッセージングにダイナミック画像を組み込むことができます。たとえば、静的な画像の代わりに、画像URLとして https://example.com/images/?imageBanner={{first_name}} を挿入して、画像にユーザーの名を含めることができます。これにより、各ユーザーに合わせてメールをパーソナライズできます。

重要

画像URLはhttps://で始める必要があります。http://を使用するとアプリがクラッシュします。

テキスト方向

メッセージを作成する際、対応するテキスト方向ボタンを選択することで、左から右と右から左のテキスト方向を切り替えることができます。アラビア語やヘブライ語などの言語でメッセージを作成する場合に、このオプションを使用できます。

右から左のメッセージの最終的な見た目は、サービスプロバイダーのレンダリング方法に大きく依存します。右から左のメッセージをできるだけ正確に表示するためのベストプラクティスについては、右から左のメッセージの作成を参照してください。

HTML

リンクへのHTML属性

ドラッグ＆ドロップエディターでリンク、ボタン、画像、動画を使用する場合、コンテンツセクションの属性の下にある新しい属性を追加を選択して、メール内のHTMLタグに追加情報を付加できます。これは、メッセージのパーソナライゼーション、セグメンテーション、スタイリングに特に便利です。

一般的なユースケースとして、Brazeを通じて送信する際に特定のリンクのクリックトラッキングを無効にすることがあります。次の2つの方法で行えます：

• リンクモジュール属性を使用する： リンク要素（ボタンやリンクモジュールなど）を選択し、属性の下にある新しい属性を追加を使用して以下を追加します：
  • SendGridの場合、名前にclicktracking、値にoffを使用します。
  • SparkPostの場合、名前にdata-msys-clicktrack、値に0を使用します。
• HTMLブロックを使用する： HTMLブロックを挿入し、アンカータグコードに直接クリックトラッキング属性を含めます：
  • SendGridの場合、<a href="your-url" clicktracking="off">Link text</a>を使用します。
  • SparkPostの場合、<a href="your-url" data-msys-clicktrack="0">Link text</a>を使用します。

もう1つの一般的なユースケースは、特定のリンクをユニバーサルリンクとしてフラグ付けすることです。ユニバーサルリンクはアプリにリダイレクトするリンクで、ユーザーに統合された体験を提供します。

• SendGrid： universal = "true"
• SparkPost： data-msys-sublink = "open-in-app"（カスタムサブパスの設定が必要です）

ユニバーサルリンクを設定するには、ユニバーサルリンクとアプリリンクを参照してください。

また、BranchやAppsFlyerなどのアトリビューションパートナーと統合して、ユニバーサルリンクを管理することもできます。

最後に、メッセージをアクセシブルにするための定義済み属性が利用可能です。詳細については、Brazeでアクセシブルなメッセージを作成するの記事（メールクライアントが代替テキストを表示する方法を含む）を参照してください。

カスタムヘッドタグ

<head>タグを使用して、メールメッセージにCSSやメタデータを追加できます。たとえば、これらのタグを使用してスタイルシートやファビコンを追加できます。<head>タグではLiquidがサポートされています。

<head>タグの外に追加されたものは、メール内の<body>タグの後に追加されます。つまり、追加されたコンテンツはメールに表示されます。

許可されるタグとタグごとの属性

注

リンク名は最大63バイトで、制限を超えると自動的に切り詰められます。

ダイナミックフォント選択

送信時にユーザーごとに異なるフォントが必要な場合、ユーザー属性に基づいてLiquidを使用してメールのテキストフォントをダイナミックに設定できます。メッセージ全体で単一の静的なカスタムフォントを使用する場合は、代わりにグローバルスタイル設定でカスタムフォントを設定してください。

Gmailなどの多くのメールクライアントはカスタムフォントを除去し、システムフォントにデフォルト設定します。ダイナミックフォント選択は、一部のメールクライアント（Apple Mailなど）でのみ機能します。

重要

このパターンをHTMLエディターで再利用する場合は、まずインラインCSSを有効にするをオフにしてください。この切り替えはドラッグ＆ドロップメールでは利用できず、CSSインライン化はすでにオフになっています。インライン化がLiquidの前に実行されると、<style>ブロック周辺の条件分岐が壊れる可能性があります。詳細については、CSSインライン化を参照してください。

ダイナミックフォント選択を設定するには：

1. 送信設定で、カスタムヘッドタグセクションを開き、Google Fonts APIのURLまたはフォントのCSSファイルをホストする別のURLを指す<link>タグでカスタムフォントをインポートします。
2. Liquidのif文を使用して、ユーザー属性を確認します。
3. ユーザーがLiquid条件に一致した場合にメールのテキスト要素にフォントを適用する<style>タグを追加します：
   • カスタムフォントの後に、Arialなどのウェブセーフフォントでフォールバックスタックを含めます。
   • 一致するセレクターに対してのみ、BrazeのデフォルトのArialフォールバックをオーバーライドするために!importantを使用します。

たとえば、ユーザーの言語属性が日本語の場合にフォントを変更するには：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
{% if ${language} == 'ja' %}
<style type="text/css">
  body,
  td,
  div,
  p,
  span,
  a,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Noto Sans JP", Arial, sans-serif !important;
  }
</style>
{% endif %}

注

一部のテキストがまだ間違ったフォントを使用している場合は、メッセージのエクスポートされたHTMLを確認してください。ドラッグ＆ドロップメールでは、コピーがtdやdiv要素で囲まれていることが多く、セレクターリストが短いと見逃される場合があります。