メールスタイリング

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

アドレスのスタイリング

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

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

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

返信不可アドレス

返信不可メールアドレスは、複数の理由からお勧めしません。読者とのエンゲージメントが低下するためです。多くの受信者はメールに返信して購読解除しようとするため、返信が許可されていない場合、次に取る行動はメールをスパムとしてマークすることがほとんどです。

不在通知の返信を受け取ることは、実際には貴重な情報を提供してくれます。開封率の向上やスパム報告の減少（メールを受け取りたくない人を除外できるため）につながります。個人的なレベルでは、返信不可は受信者に対して機械的な印象を与え、今後貴社からのメールの受信を避けるきっかけになりかねません。

プレヘッダーテキスト

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

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

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

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

Apple Mail のプレビューテキスト

Apple Mail は、プレヘッダーの代わりに Apple Intelligence の要約を受信トレイに表示する場合があります。プレビューとテストおよび送信済みメッセージのHTMLには、設定したプレヘッダーが引き続き表示されます。これは、要約が受信者のデバイスで生成されるためです。テスト用の iPhone または iPad で、設定 > アプリ > メール に移動します。メッセージプレビューの要約をオフにして、送信されたプレビューテキストを表示してください。

受信トレイのプレビューにプレヘッダーや要約の代わりに本文の一部が表示される場合は、メッセージのプレビューとテストを参照してください。

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

モバイルメールクライアント	制限
iOS Outlook	74
Android Native	43
Android Gmail	24
iOS Native	82
iOS Gmail	30

デスクトップメールクライアント	制限
Apple Mail	33
Outlook ‘13	38
Outlook for Mac ‘15	53
Outlook ‘16	50

Web メールクライアント	制限
AOL Mail	81
Gmail	119
Outlook.com	49
Office 365	40
Mail.ru	64

メールサイズ

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

• メールサイズは必ず制限してください。メール本文が 102 KB を超えると、Braze サーバーへの負荷が非常に大きくなるだけでなく、Gmail やその他のメールクライアントでクリッピング（本文の切り捨て）が発生します。
• URL で参照するホスト画像は、大きなインラインアセットを貼り付ける場合と同じように HTML に埋め込まれるわけではありません。メディアライブラリを使用して href でリンクすると、メッセージサイズを小さく保てます。

テキストのみ	テキスト＋画像	メール幅
最大 25 KB	最大 60 KB	最大 600 ピクセル

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

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

最終的なメールサイズを増加させる要因

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

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

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

テキストの長さ

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

テキストの仕様	推奨されるプロパティ
件名の長さ	最大35文字（モバイルでの最適な表示のため）（6〜10語）
差出人名の長さ	最大25文字（モバイルでの最適な表示のため）
プリヘッダーの長さ	最大85文字

画像サイズ

推奨される画像サイズについては、次の表を参照してください。小さく高品質な画像ほど読み込みが速くなるため、目的の出力を実現できる最小のアセットを使用してください。

サイズ	ヘッダー画像の幅	本文画像の幅	ファイル形式
最大 5 MB	最大 600 ピクセル	最大 480 ピクセル	PNG、JPEG、GIF

ディープリンク

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

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

透明画像を含むContent Blocks

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

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

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

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

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

ダークモード

ダークモードは受信者側の設定です。受信トレイプロバイダーやアプリ（Gmail や Outlook など）は HTML の色を反転または変更することがあるため、Braze だけで固定の見た目を保証するのではなく、クライアントごとに異なるレンダリングになることを想定してください。

HTML エディター

HTML エディターを使用する場合、テーブルセルにフラットな background-color の代わりに単色の CSS linear-gradient を適用することで、Gmail モバイルアプリでの意図しない背景反転を軽減できます。例、制限事項（<table> 単体ではなく <td> や <th> を使用するなど）、および構文については、「Gmail モバイルアプリとダークモード」を参照してください。

クライアントがサポートしている場合にライトモードとダークモードで別々のスタイルを作成するには、prefers-color-scheme メディアクエリを使用します。サポート状況は受信トレイによって異なります。送信先のクライアントで必ずプレビューとテストを行ってください。

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

ドラッグ＆ドロップエディターでは、ダークモードは引き続き各受信トレイプロバイダーによって制御されます。プレビューとテストでダークモードプレビューをオンにして、レイアウトを確認してください。トグルの場所とテスト方法については、「ダークモードでメールがどのように表示されるかプレビューできますか？」を参照してください。テーマ間での背景色と可読性については、「ダークモードとライトモードに対応したメールをどのようにデザインすべきですか？」を参照してください。

一般的なベストプラクティス

• 純粋な白（#FFFFFF）と純粋な黒（#000000）は避け、オフホワイトや柔らかい黒を使用して、完全な反転時に見た目が厳しくならないようにします。
• 非常に明るいアクセントカラー（例えば鮮やかなボタン）はトーンを下げ、クライアントが色を反転した場合でも読みやすさを保つようにします。
• レイアウトに合う場合は透過 PNG を使用します。
• テキストを含む画像では、暗いテキストの周りに明るいアウトラインを追加し、暗い背景のアートワーク上の明るいテキストの周りには暗いアウトラインを追加して、色が変化しても文字が読みやすいようにします。