Skip to content

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

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

エディターについて

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

コンテンツ

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

基本ブロックはメールの基盤です。これらのブロックを使用して、メール本文に以下の要素を追加できます。

  • タイトル
  • 段落
  • リスト
  • ボタン
  • 区切り線
  • スペーサー

メディアブロックを使用すると、画像、動画、ソーシャルメディアアイコンとリンク、カスタマイズ可能なアイコンなど、さまざまなビジュアルコンテンツを追加できます。

ドラッグ＆ドロップエディターはこれらのブロックでワークフローを簡素化しますが、詳細設定ブロックを使用して HTML を挿入したり、メール本文にメニューを追加したりすることもできます。独自の HTML を使用すると、メッセージのレンダリングに影響を与える場合があることに注意してください。

行

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

カードスタイル

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

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

メールメッセージを Campaign と Canvas のどちらで送信すべきかわからない場合は、Campaigns は単一のターゲットメッセージング Campaign に適しており、Canvases はマルチステップのユーザージャーニーに適しています。

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

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

編集エクスペリエンスとしてドラッグ＆ドロップエディターを選択した後、以下を選択できます。

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

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

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

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

メール本文の例を含む「メールバリアント」セクション。

ステップ 2: メールを構築する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

プレビューとテスト送信

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

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

プレビューリンクをコピーを選択して、ランダムユーザーに対してメールがどのように表示されるかを示す共有可能なプレビューリンクを生成してコピーすることもできます。リンクは7日間有効で、その後再生成する必要があります。

メールテンプレートに加えた編集は、以前に生成されたリンクには反映されないことに注意してください。編集を確認するには、新しいリンクプレビューを生成する必要があります。

「プレビューリンクをコピー」ボタンと生成されたリンクをコピーするメールプレビュー。

Inbox Vision を使用する

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

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

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

ドラッグ＆ドロップエディターを使用してメールメッセージをデザインおよび作成した後、Campaign または Canvas の残りの部分の構築を続けます。

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

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

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

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

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

その他のカスタマイズ

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

自動幅画像

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

ドラッグ＆ドロップエディターのコンテンツタブの自動幅オプション。

カラーレイヤリング

カラーレイヤリングを使用すると、メールのバックグラウンド、コンテンツエリア、およびさまざまなコンテンツコンポーネントの色を変更できます。前面から背面への色の順序は、コンテンツコンポーネントの色、コンテンツエリアのバックグラウンドカラー、バックグラウンドカラーです。

ドラッグ＆ドロップエディターでのカラーレイヤリングの例。

コンテンツパディング

ドラッグ＆ドロップエディターのブロックオプション。

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

コンテンツバックグラウンド

行の設定にバックグラウンド画像を追加して、メール Campaign により多くのデザインとビジュアルコンテンツを組み込むことができます。

言語属性

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

メールの「言語」値を設定する画面。

パーソナライゼーション

ドラッグ＆ドロップエディターのパーソナライゼーション追加オプション。

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

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

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

ダイナミック画像

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

テキスト方向

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

右から左と左から右のテキスト配置を切り替えるボタンを含むメールドラッグ＆ドロップエディターメニュー。

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

HTML

リンクの属性「clicktracking」がオフになっている「属性」セクション。

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

一般的なユースケースは、Braze 経由で送信する際にクリックトラッキングを無効にするために、アンカータグに属性を挿入することです。

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

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

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

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

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

最後に、メッセージをアクセシブルにするための定義済み属性が利用可能です。詳細については、Braze でアクセシブルなメッセージを構築するの記事を参照してください。

カスタム head タグ

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

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

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