メールスタイリング
この記事では、件名、プレヘッダーテキスト、メールサイズ、画像の推奨事項など、メールスタイリングのベストプラクティスについて説明します。
アドレスのスタイリング
件名は、受信者がメッセージを受け取った際に最初に目にするものの一つです。6〜10語に収めると、最も高い開封率が得られます。
効果的な件名を作成するアプローチはさまざまです。読者の興味を引くために質問を投げかける方法、より直接的に伝える方法、パーソナライズして顧客のエンゲージメントを高める方法などがあります。一つの件名に固執せず、ABテストを活用して新しい件名を試し、その効果を測定しましょう。モバイルで適切に表示されるよう、件名は35文字以内にしてください。
「差出人」フィールドには、送信者が誰であるかを明確に表示する必要があります。個人名やなじみのない略語の使用は避けてください。代わりに、ブランド名のような認知度の高い名前を使用しましょう。個人名を使用することがブランドのメールパーソナライズ手法に合っている場合は、一貫性を保ち、受信者との関係を構築しましょう。モバイルで適切に表示されるよう、「差出人」名は25文字以内にしてください。
返信不可アドレス
返信不可のメールアドレスは、読者のエンゲージメントを低下させるため、複数の理由から一般的に推奨されません。多くの受信者は購読解除のためにメールに返信しますが、それができない場合、次に取る行動はほとんどの場合、そのメールをスパムとしてマークすることです。
不在通知の返信を受け取ることは、実際には貴重な情報を提供し、開封率の向上やスパム報告の減少（メールを受け取りたくない人を除外することによる）につながります。個人的なレベルでは、返信不可アドレスは受信者に対して無機質な印象を与え、今後のメール受信を敬遠させる可能性があります。
プリヘッダーテキスト
メールのプリヘッダーテキストは、メッセージの要点を効率的に伝え、読者の関心を引いて開封を促します。プリヘッダーテキストは、メールの内容に関する追加情報を提供するためにマーケターがよく使用します。プリヘッダーは、メールの件名の直後に表示されるプレビューテキストです。以下の例では、プリヘッダーは - Brand. New. Lounge Shorts です。
表示されるプリヘッダーテキストの量は、ユーザーのメールクライアントとメールの件名の長さによって異なります。一般的に、メールのプリヘッダーは50〜100文字の間にすることをお勧めします。
プリヘッダーはメール本文のLiquidを参照でき、メール本文はプリヘッダーのLiquidを参照できます。これは、受信者にメッセージを送信する際、プリヘッダーテキストがメール本文の一部であるためです。
プリヘッダーを作成する際に留意すべきベストプラクティスをいくつかご紹介します。
- コールトゥアクションは、読者がメールを開封した後に効果を発揮します。
- 購読、商品の購入、Webサイトへの訪問など、読者を正しい方向に導きましょう。
- 読者に何を求めているかが正確に伝わるよう力強い言葉を使いましょう。ただし、会社のブランドボイスを反映し、すべてのコールトゥアクションが消費者にとって何らかの価値を示すようにしてください。
- プリヘッダーは85文字以内にし、件名を補完する説明的なコールトゥアクションを含めましょう。
- ユーザーを誘導するメールやランディングサイトは、モバイルに最適化されている必要があります。
- インタースティシャルボックスなし
- 大きなフォームフィールド
- 簡単なナビゲーション
- 大きなテキスト
- 十分な余白
- 短く簡潔な本文コピー
- 明確なコールトゥアクション
プリヘッダーの文字数制限
| モバイルメールクライアント | 制限 |
|---|---|
| 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 アセットを圧縮します。
メールキャンペーンまたはテンプレートを保存するには、メール本文が 400 KB を超えないようにしてください。
最終的なメールサイズに影響する要素
以下の機能は、レンダリングされるメッセージサイズをわずかに増加させます。
- 開封トラッキングピクセル：メッセージ本文に 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 |
Gmail の Web 版およびモバイルアプリでは、SVG がレンダリングされないことがよくあります（WEBP のサポートも一貫していません）。Gmail で確実に表示する必要がある画像には、PNG または JPEG を使用してください。
ディープリンク
プッシュ通知やアプリ内メッセージでは、ディープリンクを使用してユーザーをアプリ内の指定された場所に直接誘導できます。ただし、ディープリンクにはアプリがインストールされている必要があり、メールでは受信者がアプリをインストールしているかどうかを確認する方法がありません。そのため、メール内のディープリンクは、アプリをインストールしていない受信者にとってエラーの原因となる可能性があります。
代わりに、標準的なURLとして機能するユニバーサルリンクとApp Linksを使用してください。これらを設定することで、アプリを開いたり、ユーザーを特定のページに誘導したりできます。また、アプリがインストールされていない場合は、アプリストアにリダイレクトしたり、Webページにフォールバックしたりすることもできます。
透明な画像を含むContent Blocks
Content Blocksに透明な背景の画像（ロゴなど）が含まれており、Liquidタグで挿入された場合、画像の背後に背景色が表示されることがあります。この色は、ドラッグ＆ドロップエディターのメールグローバルスタイル設定、具体的にはメール背景色から適用されます。グローバルスタイル設定で白以外の色を使用している場合、その色が代わりに表示されます。
Content Blocksを意図どおりに表示するには:
- Content Blocksの列の背景色を、メールまたはテンプレートの背景に合わせて設定します。
- または、ドラッグ＆ドロップのContent BlocksをHTML Content Blocksに変換し、背景を透明に設定します。
同じContent Blocksを異なる背景のエリア（本文とフッターなど）で使用する必要がある場合は、それぞれ適切な列の背景色を設定した2つのバージョンのブロックを作成してください。
Content Blocksを行としてメールにドラッグする場合は、行の列の背景を透明に設定することで、グローバル背景を上書きできます。
Content Blocksを行としてドラッグすると、事前にレンダリングされたスナップショットが挿入されます。これは、元のContent Blocksが変更されても自動的に更新されません。
ダークモード
ダークモードは受信者側の設定です。受信トレイプロバイダーやアプリ（Gmail や Outlook など）は HTML の色を反転または変更する場合があるため、Braze 単体で固定の見た目を保証するのではなく、クライアントごとに異なるレンダリングが行われることを想定してください。
HTML エディター
HTML エディターを使用する場合、テーブルセルにフラットな background-color ではなく単色の CSS linear-gradient を適用することで、Gmail モバイルアプリでの意図しない背景反転を軽減できます。例、制限事項（<table> 単体ではなく <td> や <th> を使用する点を含む）、および構文については、Gmail モバイルアプリとダークモードを参照してください。
クライアントがサポートしている場合にライトモードとダークモードで別々のスタイルを作成するには、prefers-color-scheme メディアクエリを使用します。サポート状況は受信トレイによって異なるため、送信先のクライアントで必ずプレビューとテストを行ってください。
ドラッグ＆ドロップエディター
ドラッグ＆ドロップエディターでは、ダークモードは引き続き各受信トレイプロバイダーによって制御されます。プレビューとテストでダークモードプレビューをオンにして、レイアウトを確認してください。トグルの場所とテスト方法については、ダークモードでメールがどのように表示されるかプレビューできますか？を参照してください。テーマ間での背景色と可読性については、ダークモードとライトモードに対応したメールをどのようにデザインすべきですか？を参照してください。
一般的なベストプラクティス
- 純粋な白（
#FFFFFF）と純粋な黒（#000000）は避け、オフホワイトや柔らかい黒を使用して、完全な反転時に見た目が極端にならないようにします。 - 非常に明るいアクセントカラー（例：鮮やかなボタン）はトーンを抑え、クライアントが色を反転した場合でも読みやすさを保つようにします。
- レイアウトに合う場合は、透過 PNG を使用します。
- テキストを含む画像では、暗い文字の周囲に明るいアウトラインを追加し、暗いアートワーク上の明るい文字の周囲には暗いアウトラインを追加して、色が変化した場合でもテキストが読みやすいようにします。