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

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

編集者について

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

コンテンツ	- 行

コンテンツ

[コンテンツ] には、メッセージで使用できるさまざまなタイプのコンテンツを表す一連のタイルがあります。これらは、ベーシック、メディア、アドバンスの3つのカテゴリーに分類されている。

• ベーシック
• メディア
• 上級

- 行

行は、列を使ってメッセージのセクションの水平方向の構成を定義する構造単位である。行を空にすることも、コンテンツブロックを空にすることもできます。複数のカラムを使うことで、異なるコンテンツ要素を並べることができる。こうすることで、開始時に選択したテンプレートに関係なく、メッセージに必要なすべての構造要素を追加することができる。

ドラッグ＆ドロップ・エディターを使う

メールメッセージをキャンペーンとキャンバスのどちらで送るべきか迷っている？キャンペーンは単一のシンプルなメッセージングキャンペーンに適していますが、キャンバスはマルチステップのユーザーのジャーニーに適しています。

メッセージを作成する場所を選択したら、次のステップに進み、ドラッグ＆ドロップでメールを作成します。

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

ドラッグ・アンド・ドロップ・エディターを編集環境として選択した後、以下の選択ができる：

• 白紙のテンプレートから始める。
• 事前にデザインされたBrazeドラッグ＆ドロップメールテンプレートを使用する。
• ドラッグ＆ドロップで保存したEメールテンプレートを使用する。

また、「テンプレート」セクションからすべてのテンプレートにアクセスすることもできる。

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

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

ステップ2:メールの作成

ドラッグ＆ドロップによる編集は3つのセクションに分かれている：送信設定、コンテンツ、プレビューとテスト。メール本文の作成は、コンテンツセクションで行われる。Eメールを作成する前に、Eメール作成の指針となる重要な要素を理解することが重要である。レビューが必要な場合は、「編集者について」を参照してください。

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

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

ドラッグ＆ドロップメールをさらにカスタマイズする方法については、その他のカスタマイズをチェックしよう。

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

ステップ 3:送信情報の追加

メールメッセージのデザインと作成が終わったら、送信設定セクションで送信情報を追加しよう。

1. [送信情報] で、[差出人の表示名 + アドレス] としてメールアドレスを選択します。[差出人の表示名 + アドレスをカスタマイズ] を選択してカスタマイズすることもできます。
2. [返信先アドレス] としてメールアドレスを選択します。[返信先アドレスをカスタマイズ] を選択してカスタマイズすることもできます。
3. 次に、[BCCアドレス] としてメールアドレス選択し、このアドレスからあなたのメールアドレスが表示できるようにします。
4. メールに件名を追加します。必要に応じて、プリヘッダーおよびその後の空白を追加することもできます。

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

メールのヘッダーをパーソナライズさせる（上級者向け）

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

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

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

[プレビュー後にテスト] セクションに移動します。ここで、ユーザーとしてメールをプレビューするか、テストメッセージを送信するかのオプションがある。このセクションにはInbox Visionもあり、異なるモバイルやウェブクライアントでメールが正しくレンダリングされているかチェックできる。

実際のエディター、受信トレイビジョン、および実際のテストメールで、同じメールの 3 つの異なるバージョンを表示できるため、すべてのプラットフォームで詳細を調整することが重要です。

プレビューとテスト送信

Preview as a Userタブでは、以下のユーザータイプを選択してメッセージをプレビューすることができる。

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

受信トレイビジョンの使用

受信トレイビジョンを使用すると、さまざまなメールクライアントやモバイルデバイスでの表示でメールキャンペーンを確認できます。受信トレイビジョンを使用してメールメッセージをテストするには、[プレビュー後にテスト] セクションで [受信トレイビジョン] を選択し、[受信トレイビジョンの実行] を選択します。

ドラッグ＆ドロップエディターを使用してメールメッセージのデザインと作成を行ったら、引き続き、キャンペーンまたはキャンバスの残りの部分を作成します。

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

ドラッグ＆ドロップ・エディターからHTMLを生成する基礎となるエンジンが最適化され、更新された結果、HTMLファイルの圧縮とレンダリングに関する利点がもたらされた。

エクスポートされるHTMLデータの平均フットプリントサイズが縮小され、読み込みとレンダリングが高速化され、モバイルでのクリッピングが減少し、帯域幅の消費が削減された。

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

• <div> 要素ベースのデザインから、標準的な<table> フォーマットのコードベースへの移行。
• [エディターブロック][7]が簡潔に再コード化されました。
• 最終的なHTMLコードは圧縮され、タグ間の空白が取り除かれる。
• 透明な仕切りは自動的にコンテンツ・パディングに変換される

その他のカスタマイズ

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

自動幅の画像

メールに追加された画像は、自動的に [自動幅] に設定されます。この設定を調整するには、[自動幅] をオフに切り替え、必要に応じて幅の割合を調整します。

カラーレイヤー

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

コンテンツ・パディング

埋め込みを調整するには、[ブロックのオプション] まで下にスクロールして、[その他のオプション] を選択します。パディングを微調整することで、Eメールの見栄えを整えることができる。

コンテンツの背景

行の構成に背景画像を追加できるので、メールキャンペーンにデザインやビジュアルコンテンツをより多く取り入れることができる。

パーソナライズを追加する

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

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

リキッド・パーソナライゼーションは、画像ブロックとボタン・リンク・タイプのフィールドではサポートされていない。

ダイナミックな画像

画像ソース属性に Liquid を含めることで、メールメッセージにダイナミックな画像を含めることができます。例えば、静止画像の代わりに、 https://example.com/images/?imageBanner={{first_name}} を画像 URL として挿入することで、ユーザーの名を画像に含めることができます。これは、各ユーザーに応じたメールのパーソナライゼーションに役立ちます。

リンクにHTML属性を追加する

ドラッグ・アンド・ドロップ・エディターでリンク、ボタン、画像、動画を使用する場合、コンテンツ・セクションの属性で 新しい属性を追加を選択し、EメールのHTMLタグに追加情報を追加する。これは、メッセージのパーソナライズ、セグメンテーション、スタイリングに特に役立つ。

一般的な使用例としては、アンカータグに属性を挿入し、Braze経由で送信する際にクリックトラッキングを無効にする。

• SendGrid: clicktracking = "off"
• SparkPost: data-msys-clicktrack = "0"

もう一つの一般的な使用例は、特定のリンクをユニバーサルリンクとしてフラグを立てることだ。ユニバーサルリンクは、アプリにリダイレクトするリンクで、ユーザーに統合された体験を与える。

• SendGrid: universal = "true"
• SparkPost： data-msys-sublink = "open-in-app" (カスタムサブパスを設定する必要がある)

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

あるいは、Branch やAppsFlyer などのアトリビューションパートナーのいずれかと連携して、ユニバーサルリンクを管理することもできます。