概要
HTMLエディターでは、独自のHTMLを使用して完全にカスタマイズされたブランドメールを送信できます。 以下の場合にHTMLエディターを使用する必要があります：- レイアウト、スペーシング、スタイリングを完全に制御する必要がある
- 本番準備済みのHTMLメールテンプレートがすでにある
- メールクライアントの制限内で作業することに慣れている
HTMLメールはWebページとは異なります。多くのHTML/CSS機能がメールクライアント間でサポートされていなかったり、一貫性なくレンダリングされたりします。
前提条件
HTMLエディターを使用する前に、以下を確認してください：- レスポンシブHTMLメールの構築経験がある
- すべての画像を公開アクセス可能なURL（サイト、CDN、S3等）でホストしている
期待される結果
セットアップ後、メールは：- 主要クライアント（Gmail、Outlook、Apple Mail）で一貫してレンダリングされる
- リンククリックが正しく追跡される
- 機能する購読解除メカニズムが含まれる
- スパム・配信可能性チェックに合格する
独自のテンプレートをインポート
すでにHTMLメールテンプレートをお持ちの場合、以下のいずれかの方法でOneSignalに追加できます：- メールテンプレート転送を使用
- Create Template APIを使用してプログラマティックにテンプレートを作成
- HTMLエディターにHTMLをコピー&ペースト
ゼロからHTMLを書くのではなく、実証済みのテンプレートから始めることをお勧めします。
HTMLエディターを使用
メールメッセージを作成する際に、エディタータイプとしてHTMLエディターを選択します。- エディターでHTMLを貼り付けるか記述します。
- テストメールを送信を使用して、クライアントやデバイス間でのレンダリングをプレビューします。
- スケジュールまたは送信前にレイアウトの問題を修正します。
リンク&トラッキング
HTMLメールではリンクトラッキングがデフォルトで有効になっています。- マルチリンクトラッキングがサポートされています
- クリックはメッセージレポートに表示されます
購読解除リンク
すべてのマーケティングメールには購読解除リンクを含める必要があります。 有効な購読解除オプションがないメールは以下の可能性が高くなります：- スパムとしてマークされる
- 送信者の評判を損なう
- 受信ボックスプロバイダーにブロックされる
- OneSignalのデフォルト購読解除リンク
- カスタム購読解除ページを使用（オプション）
HTMLメールのベストプラクティス
常にインラインCSSを使用
ほとんどのメールクライアントは<style>ブロックや外部スタイルシートを削除します。
このツールを試してください：Responsive Email CSS Inliner
ダークモードスタイリング
多くのメールクライアントは、ユーザーがダークモードを有効にしている場合、自動色反転を適用します。この動作により、ボタンが黒い背景と黒いテキストで表示されるなど、予測できない結果が生じる可能性があります。一貫したレンダリングを確保するために、ライトモードとダークモードの両方でメールがどのように見えるべきかを明示的に定義することをお勧めします。 ベストプラクティス：- ベーススタイルをインラインで定義します。 デフォルトや透明度に依存する代わりに、常に要素に背景色とテキスト色を直接設定します。
- ダークモードにメディアクエリを使用します。 Apple MailやiOS上のOutlookなどのクライアントは、ダークモード用にスタイルをオーバーライドできる
@media (prefers-color-scheme: dark)をサポートしています。 !importantを控えめに適用します。 ダークモードオーバーライドに!importantを追加すると、受信トレイがカスタムスタイルの上に反転ルールを積み重ねるのを防ぐのに役立ちます。- テーマサポートをシグナル化します。 自動反転を減らすために、HTML headに次のメタタグを含めます：
クライアント間でテストします。Gmail（iOS、Android、ウェブ）、Outlook、Apple Mailはすべて異なる動作をします。テストは問題を早期に発見するのに役立ちます。
メール用の推奨画像サイズ
アスペクト比：- ヘッダー/バナー画像：
3:1または4:1（例：600×200または600×150） - ヒーロー画像：
16:9または2:1（例：600×338または600×300） - 正方形画像：
1:1（例：300×300）— 商品グリッドに適している - サムネイル：
1:1または4:3 - 最大幅：
600–700pxが標準（ほとんどのメールクライアント） - Retinaディスプレイ用に
2xでデザイン（例：1200px幅、600pxで表示）
- 個々の画像を
100–200KB以下に保つ - 総メールサイズ（画像含む）を
1MB以下に保つ - より小さい = より速い読み込み時間とより良い配信可能性
- JPG：写真に最適
- PNG：グラフィック、ロゴ、透明度に最適
- GIF：シンプルなアニメーション用（ファイルサイズを小さく保つ）
- WebP：メールではまだ広くサポートされていません — 避ける
- アクセシビリティのため、画像が読み込まれない場合のために常にaltテキストを含める
- スタイリングにはインラインCSSを使用（多くのクライアントは
<style>タグを削除） - 背景画像は避ける（一貫性のないサポート）
- クライアント間でテスト（Gmail、Outlook、Apple Mailはすべて異なってレンダリング）
- OutlookはしばしばサイズタグをIframe化するため、HTMLでwidthとheight属性の両方を設定
画像にaltタグを追加
altテキストはアクセシビリティを向上させ、画像がブロックされたり読み込みに失敗したりしても情報が伝達されることを保証します。| メールクライアント | 画像をブロック？ | altテキストを表示？ | altテキストをスタイル化？ |
|---|---|---|---|
| AOL | はい | はい | はい |
| Gmail | はい | はい | はい |
| Yahoo | はい | はい | はい |
| Outlook | 場合による | はい | はい |
HTMLの命名とフォーマット
アクセシビリティのためにセマンティックHTMLと意味のあるタグ命名を使用します。これにより、スクリーンリーダーがコンテンツをより正確に解釈できるようになります。 また、保守性のために標準カラーフォーマットと適切なインデントを使用します。破損リンクをチェック
破損リンクは配信可能性を低下させ、メールをスパムとしてフラグする可能性があります。送信前にすべてのリンクを徹底的にテストしてください。サポートされているHTMLのみを使用
メールクライアントは以下をサポートしません：- JavaScript
<iframe>- HTMLフォーム
- 埋め込みオーディオまたはビデオ
- Flash
- CSS位置決めまたはレイヤリングトリック
送信前の検証
送信前に、メールを以下で検証してください：- すべてのリンクをテスト
- 購読解除の動作を確認
- Gmail、Outlook、Apple Mailにテストメールを送信
- ダークモードレンダリングをチェック
メールが主要クライアントで正しくレンダリングされ、購読解除が機能している場合、送信の準備ができています。