Skip to content

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

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

エディターについて

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

コンテンツと行のエディターコンポーネント
コンテンツ 行
メールレイアウト用のさまざまな構造の組み合わせを含む「行」タブ。 基本ブロック、メディア、詳細設定を含む「コンテンツ」タブ。

コンテンツ

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

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

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

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

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

行

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

カードスタイル

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

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

メールメッセージをCampaignで送信するかCanvasで送信するか迷っていますか？Campaignsは単一のターゲットメッセージングに適しており、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 aria-label="Use Inbox Vision"> フォーマットのコードベースへの移行 Use Inbox Vision
  • エディターブロック（メール）が簡潔さのために再コーディングされました
  • 最終的な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> タグの後に追加されます。つまり、追加されたコンテンツはメールに表示されます。

許可されるタグとタグごとの属性
タグ名 説明 例
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>
New Stuff!