概要
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メールではリンクトラッキングがデフォルトで有効になっています。マルチリンクトラッキングがサポートされており、クリックはメッセージレポートに表示されます。リンク
メール用のリンクトラッキング、マルチリンクトラッキング、クリック分析を設定します。
ディープリンク
メールリンクからアプリの特定の画面にユーザーを誘導します。
購読解除リンク
すべてのマーケティングメールには購読解除リンクを含める必要があります。 有効な購読解除オプションがないメールは以下の可能性が高くなります：- スパムとしてマークされる
- 送信者の評判を損なう
- 受信ボックスプロバイダーにブロックされる
- OneSignalのデフォルト購読解除リンク
- カスタム購読解除ページを使用（オプション）
HTMLメールのベストプラクティス
常にインラインCSSを使用
ほとんどのメールクライアントは<style>ブロックや外部スタイルシートを削除します。
このツールを試してください：Responsive Email CSS Inliner
ダークモードスタイリング
多くのメールクライアントは、ダークモードが有効な場合に自動色反転を適用します。これにより予測できない結果が生じる可能性があります — ボタンが黒い背景と黒いテキストで表示されたり、ロゴが消えたりすることがあります。これらの問題を防ぐために、ライトモードとダークモードの両方でメールがどのように見えるべきかを明示的に定義してください。メールクライアントのダークモード対応状況
| クライアント | 動作 | prefers-color-scheme CSSを尊重？ |
|---|---|---|
| Apple Mail（iOS/macOS） | 完全な色反転 | はい |
| Gmail（iOS/Androidアプリ） | 部分的な反転 — 明るい背景を変更するが、すべての色ではない | いいえ |
| Gmail（ウェブ） | ダークモードレンダリングなし | 該当なし |
| Outlook（Windows） | Wordレンダリングエンジンを使用した完全な反転 | いいえ — ほとんどのCSSオーバーライドを無視 |
| Outlook（Mac/iOS） | 部分的な反転 | はい |
| Yahoo Mail | 部分的な反転 | いいえ |
| Samsung Mail | 完全な反転 | いいえ |
ベストプラクティス
- ベーススタイルをインラインで定義します。 デフォルトや透明度に依存する代わりに、常に要素に背景色とテキスト色を直接設定します。
- ダークモードにメディアクエリを使用します。
@media (prefers-color-scheme: dark)をサポートするクライアント（Apple Mail、Outlook Mac/iOS）では、ダークモード用にスタイルをオーバーライドできます。 !importantを控えめに適用します。 ダークモードオーバーライドに!importantを追加すると、受信トレイがカスタムスタイルの上に反転ルールを積み重ねるのを防ぐのに役立ちます。- テーマサポートをシグナル化します。 自動反転を減らすために、HTMLの
<head>に以下のメタタグを含めます：
- 純白と純黒を避けます。 オフホワイトとダークグレーを使用して、完全反転クライアントの影響を軽減します。
- 透明PNGを慎重に使用します。 透明な背景上のダークなロゴは、暗い背景では見えなくなります。明るいアウトラインを追加するか、組み込み背景付きのバージョンを使用してください。
ドラッグアンドドロップエディターを使用してダークモードCSSを追加する手順については、ドラッグアンドドロップによるダークモードスタイリングを参照してください。
メール用の推奨画像サイズ
アスペクト比
アスペクト比
- ヘッダー/バナー画像：
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–200 KB以下に保つ - 総メールサイズ（画像含む）を
1 MB以下に保つ - より小さい = より速い読み込み時間とより良い配信可能性
ファイル形式
ファイル形式
- JPG — 写真に最適
- PNG — グラフィック、ロゴ、透明度のある画像に最適
- GIF — シンプルなアニメーション用（ファイルサイズを小さく保つ）
- WebP — メールではまだ広くサポートされていない；避ける
一般的なヒント
一般的なヒント
- アクセシビリティのため、画像が読み込まれない場合のために常にaltテキストを含める
- スタイリングにはインラインCSSを使用（多くのクライアントは
<style>タグを削除） - 背景画像は避ける（一貫性のないサポート）
- クライアント間でテスト — Gmail、Outlook、Apple Mailはすべて異なってレンダリング
- OutlookはしばしばサイズタグをIframe化するため、HTMLでwidthとheight属性の両方を設定
画像にaltテキストを追加
altテキストはアクセシビリティを向上させ、画像がブロックされたり読み込みに失敗したりしても情報が伝達されることを保証します。主要なメールクライアントのほとんどはaltテキストを表示およびスタイル化します：| メールクライアント | 画像をブロック？ | altテキストを表示？ | altテキストをスタイル化？ |
|---|---|---|---|
| AOL | はい | はい | はい |
| Gmail | はい | はい | はい |
| Yahoo | はい | はい | はい |
| Outlook | 場合による | はい | はい |
サポートされているHTMLのみを使用
メールクライアントは以下をサポートしません：- JavaScript
<iframe>- HTMLフォーム
- 埋め込みオーディオまたはビデオ
- CSS位置決めまたはレイヤリングトリック
送信前の検証
送信前に、以下を確認してください：- すべてのリンクが機能している（破損リンクは配信可能性を低下させ、スパムフィルターをトリガーする可能性があります）
- 購読解除リンクが正しく機能している
- Gmail、Outlook、Apple Mailでテストメールがレンダリングされている
- ダークモードレンダリングが許容できる
- HTMLがアクセシビリティと保守性のためにセマンティックタグと適切なインデントを使用している
メールが主要クライアントで正しくレンダリングされ、購読解除が機能している場合、送信の準備ができています。
パーソナライゼーション
Liquidテンプレートを使用して、HTML内に名前、タグ、フォールバック値などの購読者固有のコンテンツを挿入します。例：{{ first_name | default: "there" }}
メッセージのパーソナライゼーション
利用可能なパーソナライゼーション変数とその使い方。
Liquid構文の使用
条件文、フィルター、ループ、および高度なLiquidパターン。
FAQ
既存のメールテンプレートを再利用できますか？
はい。メールテンプレート転送でOneSignalに転送するか、Create Template APIでアップロードするか、HTMLエディターに直接HTMLをコピー&ペーストしてください。カスタムフォントを使用できますか？
はい、ただしサポートは異なります。@font-faceでカスタムフォントを宣言し、常にシステムフォントのフォールバックを含めてください。Windows版OutlookはWebフォントを完全に無視し、システムのデフォルトにフォールバックします。
なぜダークモードでメールの見た目が異なるのですか？
各メールクライアントはダークモードを異なる方法で適用します — 完全に色を反転するもの、部分的に反転するもの、Gmailウェブのようにダークモードをまったく適用しないものもあります。詳細については、上記のクライアントの動作表を参照してください。レンダリングを制御するために、明示的なライトモードとダークモードのスタイルを定義してください。メールでサポートされていないHTMLとCSS機能は何ですか？
JavaScript、<iframe>、HTMLフォーム、埋め込みオーディオ/ビデオ、CSSポジショニングはサポートされていません。すべてのスタイリングにインラインCSSを使用してください — ほとんどのクライアントは<style>ブロックと外部スタイルシートを削除します。
メールの最大サイズはどのくらいですか？
総メールサイズ（HTML + 画像）を1 MB未満に抑えてください。HTMLが102 KBを超えるメールはGmailによってクリップされ、折り畳みの下のコンテンツが「メール全体を表示」リンクの後ろに隠されます。関連ページ
ドラッグアンドドロップでメールをデザイン
フルHTMLを書かずにメールをデザインするビジュアルメールビルダー。
メール概要
OneSignalでメールを送信するエンドツーエンドガイド。
メールテンプレート
キャンペーン全体でメールデザインを保存して再利用します。
購読解除リンク
コンプライアンスのためのデフォルトまたはカスタムの購読解除リンクを追加します。
メッセージのパーソナライゼーション
タグ、Liquid構文、動的コンテンツでメールをパーソナライズします。
メールテンプレート転送
既存のHTMLメールテンプレートをOneSignalにインポートします。