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

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

エディターについて

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

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

コンテンツ	行

コンテンツ

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

• 基本
• メディア
• 高度

行

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

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

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

カードスタイル

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

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

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

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

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

編集体験としてドラッグ＆ドロップエディターを選択した後、以下のいずれかを選択できます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

プレビューとテスト送信

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

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

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

Inbox Visionを使用する

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

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

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

ドラッグ＆ドロップエディターを使ってメールメッセージをデザインおよび作成した後は、キャンペーンまたはキャンバスの残りの部分を引き続き作成してください。

更新されたHTMLエンジンについて

ドラッグ＆ドロップエディターからHTMLを生成する基盤エンジンが最適化および更新され、HTMLファイルの圧縮とレンダリングに関する改善がもたらされました。

エクスポートされるHTMLデータの平均フットプリントサイズが削減され、読み込みとレンダリングの高速化、モバイルでのクリッピングの削減、帯域幅消費の削減につながっています。

HTMLレンダリングは、条件付きコメントとCSSメディアクエリの数を最小化する以下の更新に基づいて改善されました。その結果、HTMLファイルはより小さく、より効率的にコーディングされています。

• <div>要素ベースのデザインから標準的な<table aria-label="Inbox Visionを使用する">フォーマットのコードベースへの移行 Inbox Visionを使用する
• エディターブロック（メール）が簡潔に再コーディングされました
• 最終的なHTMLコードがタグ間の空白を除去して圧縮されます
• 透明なディバイダーは自動的にコンテンツのパディングに変換されます

その他のカスタマイズ

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

自動幅画像

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

カラーレイヤリング

カラーレイヤリングを使用すると、メールの背景色、コンテンツエリア、さまざまなコンテンツコンポーネントの色を変更できます。色の順序は手前から奥に向かって、コンテンツコンポーネントの色、コンテンツエリアの背景色、背景色となります。

コンテンツのパディング

パディングを調整するには、下にスクロールしてブロックオプションを選択し、その他のオプションを選択します。パディングを細かく調整して、メールの見た目を最適にできます。

コンテンツの背景

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

言語属性

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

パーソナライゼーション

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

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

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

ダイナミック画像

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

テキストの方向

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

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

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"（カスタムサブパスの設定が必要です）

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

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

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

カスタムheadタグ

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

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

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

タグ名	説明	例
base	メッセージ内のすべての相対URLの基本URLを指定します。	<base href="https://example.com" target="_blank">
link	メッセージと外部リソースの関係を定義します。	<link href="styles.css" rel="stylesheet" type="text/css">
meta	ページの説明やキーワードなどのメタデータを提供します。	<meta name="description" content="Free Web tutorials">
style	内部CSSスタイルを埋め込みます。	<style type="text/css" media="screen">body { font-size: 16px; }</style>
title	ブラウザのタブに表示されるドキュメントのタイトルを設定します。	<title>StyleRyde</title>

タグ	属性	説明	例
base	href	相対URLに使用する基本URL。	<base href="https://braze.com">
base	target	すべてのハイパーリンクとフォームのデフォルトターゲット。	<base target="_blank">
link	href	外部リソースへのURL。	<link href="style.css">
link	rel	現在のメッセージとリンクされたメッセージの関係を定義します。	<link rel="stylesheet">
link	type	リンクされたリソースのタイプ。	<link type="text/css">
link	sizes	アイコンのサイズを指定します。	<link rel="icon" sizes="32x32" href="favicon-32.png">
link	media	スタイルが適用されるメディアまたはデバイスを指定します。	<link rel="stylesheet" media="screen" href="style.css">
meta	name	ブラウザのタブに表示されるドキュメントのタイトルを設定します。	<meta name="viewport" content="width=device-width, initial-scale=1">
meta	content	ブラウザのタブに表示されるドキュメントのタイトルを設定します。	<meta name="description" content="Page about our newest products">
meta	charset	文字エンコーディングを宣言します。	<meta charset="UTF-8">
meta	property	ブラウザのタブに表示されるドキュメントのタイトルを設定します。	<meta property="og:title" content="Website title">
style	type	スタイルコンテンツのMIMEタイプ。	<style type="text/css">p { color: red; }</style>
style	media	スタイルが適用されるメディアまたはデバイスを指定します。	<style media="print">body { font-size: 12pt; }</style>
title	属性なし	titleタグは属性を受け付けません。	<title>Kitchenerie</title>