Skip to content

メールスタイリング

この記事では、件名、プレヘッダーテキスト、メールサイズ、画像の推奨事項など、メールスタイリングのベストプラクティスについて説明します。

アドレススタイリング

件名は、受信者がメッセージを受け取った際に最初に目にするものの一つです。6～10語に収めると、最も高い開封率が得られます。

良い件名を作成するにはさまざまなアプローチがあります。読者の興味を引く質問を投げかける方法、より直接的に伝える方法、パーソナライズして顧客のエンゲージメントを高める方法などがあります。1つの件名に固執せず、AB テストを活用して新しい件名を試し、その効果を測定しましょう。件名はモバイルで適切に表示されるよう、35文字以内にする必要があります。

「差出人」フィールドには、送信者が誰であるかを明確に示す必要があります。個人名やなじみのない略語は使用しないようにしてください。代わりに、ブランド名のような認識しやすい名前を使用してください。ブランドのメールパーソナライズ手法として個人名の使用が適している場合は、受信者との関係を構築するために一貫性を保ちましょう。「差出人」名はモバイルで適切に表示されるよう、25文字以内にする必要があります。

返信不可のアドレス

返信不可のメールアドレスは、読者のエンゲージメントを阻害するため、複数の理由から一般的に推奨されません。多くの受信者は配信停止のためにメールに返信しますが、それができない場合、次に取るアクションはメールをスパムとしてマークすることがほとんどです。

不在時の自動返信を受け取ることは、実際には貴重な情報を提供し、開封率を向上させ、スパム報告を減少させることができます（メールを受け取りたくない人を除外できるため）。パーソナルなレベルでは、返信不可のアドレスは受信者に対して無機質な印象を与える可能性があり、会社からのさらなるメールの受信を拒否させるかもしれません。

プレヘッダーテキスト

メールのプレヘッダーテキストは、メッセージの主旨を効率的に伝えて読者の関心を引き、開封を促すものです。プレヘッダーテキストは、メールマーケターがメールの内容に関する追加情報を提供するためにもよく使用されます。プレヘッダーは、メールの件名の直後に表示されるプレビューテキストです。以下の例では、プレヘッダーは - Brand. New. Lounge Shorts です。

Gmail の受信トレイのプレヘッダーテキスト。「Brand. New. Lounge Shorts」と表示されています。

表示されるプレヘッダーテキストの量は、ユーザーのメールクライアントとメールの件名の長さによって異なります。一般的に、メールのプレヘッダーは50～100文字にすることをお勧めします。

プレヘッダーを作成する際に留意すべきベストプラクティスを以下に示します。

  1. コールトゥアクションは、読者がメールを開封した後に効果を発揮します。
    • 購読、製品の購入、Web サイトへの訪問など、読者を正しい方向に導きましょう。
    • 読者に何を求めているかが正確にわかるよう、力強い言葉を使用してください。ただし、会社のブランドボイスを反映し、すべてのコールトゥアクションが消費者にとって何らかの価値を示すようにしましょう。
    • プレヘッダーは85文字以内にし、件名を補完する説明的なコールトゥアクションを含める必要があります。
  2. ユーザーを誘導するメールやランディングサイトは、モバイルに最適化されている必要があります。
    • インタースティシャルボックスなし
    • 大きなフォームフィールド
    • 簡単なナビゲーション
    • 大きなテキスト
    • 十分な余白
    • 短く簡潔な本文コピー
    • 明確なコールトゥアクション

プレヘッダーの文字数制限

メールサイズ

メールサイズとは、Braze におけるメッセージ HTML のサイズ（作成した本文と、メッセージ送信時に Braze が追加する内容）を指します。

  • メールサイズは制限内に収めるようにしてください。102 KB を超えるメール本文は、Braze サーバーに非常に大きな負荷をかけるだけでなく、Gmail やその他のメールクライアントによってクリッピングされます。
  • URL で参照するホスト画像は、巨大なインラインアセットを貼り付けるのと同じ方法で HTML に埋め込まれるわけではありません。メディアライブラリを使用し、href でリンクすることで、メッセージサイズを小さく保つことをお勧めします。

クリッピングのリスクを軽減するには：

  • コピーとリンクを短くします。
  • 必要に応じて重要な CSS をインライン化します。HTML 内の余分な空白を削除します。
  • 画像と HTML アセットを圧縮します。

最終的なメールサイズに影響するもの

以下の機能は、レンダリングされるメッセージサイズをわずかに増加させます。

  • 開封トラッキングピクセル：メッセージ本文に 1 x 1 px の画像タグを追加します
  • プレヘッダー：本文の先頭に非表示の <div> を追加します
  • リンクエイリアス：トラッキングされる各 URL に 16 文字のクエリパラメーター（lid=）を追加します
  • リンクテンプレート：ダッシュボードで設定されたクエリパラメーターを一致する URL に追加します
  • CSS インライン化（オプション）：埋め込みスタイルシートのルールを HTML 要素にインラインで適用します。スタイルシートの複雑さによっては冗長な CSS が追加される場合があります

プレヘッダーとトラッキングピクセルは約 600 文字（1 KB 未満）を追加します。Braze は通常、リンクの数、リンクテンプレートの複雑さ、CSS インライン化が有効かどうかに応じて、0 KB～5 KB を追加します。メールサイズが制限に近い場合は、最終的なレンダリングサイズがこれらの入力に依存するため、送信前にメールをテストすることをお勧めします。

テキストの長さ

推奨されるテキストの長さについては、以下の表を参照してください。

画像サイズ

推奨される画像サイズについては、以下の表を参照してください。小さくて高品質な画像はより速く読み込まれるため、目的の出力を達成するために可能な限り小さなアセットを使用してください。

ディープリンク

プッシュ通知やアプリ内メッセージでは、ディープリンクによりユーザーをアプリ内の指定された場所に直接誘導できます。ただし、ディープリンクにはアプリがインストールされている必要があり、メールでは受信者がアプリを持っているかどうかを知る方法がありません。そのため、メール内のディープリンクは、アプリがインストールされていない受信者にとってエラーの原因となる可能性があります。

代わりに、標準的な URL として機能するユニバーサルリンクと App Links を使用してください。アプリを開いたり、ユーザーを特定のページに誘導したりするように設定できます。また、アプリがインストールされていない場合は、アプリストアにリダイレクトしたり、Web ページにフォールバックしたりすることもできます。

透過画像を含む Content Blocks

Content Blocks に透過背景の画像（ロゴなど）が含まれており、Liquid タグで挿入された場合、画像の背後に背景色が表示されることがあります。この色は、ドラッグ＆ドロップエディターのメールグローバルスタイル設定、具体的にはメール背景色から来ています。グローバルスタイル設定で白以外の色を使用している場合、その色が表示されます。

Content Blocks を意図どおりに表示するには：

  • Content Blocks の列の背景色を、メールまたはテンプレートの背景に合わせて設定します。
  • または、ドラッグ＆ドロップの Content Blocks を HTML Content Blocks に変換し、背景を透明に設定します。

異なる背景を持つ領域（本文とフッターなど）で同じ Content Blocks を使用する必要がある場合は、それぞれ適切な列の背景色を持つ2つのバージョンのブロックを作成してください。

Content Blocks を行としてメールにドラッグする場合は、行の列の背景を透明に設定して、グローバル背景をオーバーライドできます。
New Stuff!