メインコンテンツへスキップ

​
概要

OneSignalのHTMLエディターを使用すると、デスクトップとモバイルの両方でレイアウトとデザインを完全に制御して、高度にスタイル化されたブランドメールを作成できます。 HTMLメールデザインを最大限に活用するために、次のことをお勧めします：
  • 自分またはチームメイトが、さまざまなクライアントやデバイスで適切にレンダリングされるレスポンシブHTMLメールの作成経験があることを確認してください。
  • すべての画像を、ウェブサイト、AWS、またはその他の信頼できるホスティングプラットフォームなど、公開アクセス可能な場所にホストします。

​
独自のテンプレートをインポート

すでにメールテンプレートをお持ちですか？次のオプションでOneSignalアプリに追加できます：
  1. メールテンプレート転送
  2. Create Template API
  3. HTMLエディターにHTMLをコピー＆ペースト

​
HTMLエディターの使用

メッセージをセットアップする際にHTML Editorオプションを選択します。 左側のパネルにHTMLコードを入力します。Send Test Email機能を使用して、モバイルおよびデスクトップクライアントでメールがどのようにレンダリングされるかを確認できます。

プレビューの横にHTMLエディターを示す画像

​
リンク

リンクトラッキングはデフォルトで有効になっています。マルチリンクトラッキングが利用可能です。詳細については、LinksおよびDeep Linkingを参照してください。

​
購読解除リンク

すべてのマーケティングメールには購読解除リンクを含める必要があります。購読解除リンクがないと、メールがスパムとしてマークされる可能性が高くなります。詳細については、Unsubscribe linksを参照してください。 OneSignalは、使用すると、ユーザーのメールSubscriptionを購読解除するデフォルトの購読解除リンクを提供します。必要に応じて、独自のカスタム購読解除URLを含めることもできます。メールサブスクリプションを正しく管理していることを確認してください（詳細はCreate a custom unsubscribe pageを参照）。 OneSignalのデフォルト[unsubscribe_url]をメールに追加する方法： 
<a href="[unsubscribe_url]">Unsubscribe</a>

​
ベストプラクティス

HTMLメールの推奨セットアップ：

​
インラインCSSを使用

多くのメールクライアントは、埋め込みまたは外部スタイルを削除します。一貫したレンダリングを確保するために、常にCSSをインライン化してください。 このツールを試してください：Responsive Email CSS Inliner

​
ダークモードスタイリング

多くのメールクライアントは、ユーザーがダークモードを有効にしている場合、自動色反転を適用します。この動作により、ボタンが黒い背景と黒いテキストで表示されるなど、予測できない結果が生じる可能性があります。一貫したレンダリングを確保するために、ライトモードとダークモードの両方でメールがどのように見えるべきかを明示的に定義することをお勧めします。 ベストプラクティス：
  • ベーススタイルをインラインで定義します。 デフォルトや透明度に依存する代わりに、常に要素に背景色とテキスト色を直接設定します。
  • ダークモードにメディアクエリを使用します。 Apple MailやiOS上のOutlookなどのクライアントは、ダークモード用にスタイルをオーバーライドできる@media (prefers-color-scheme: dark)をサポートしています。
  • !importantを控えめに適用します。 ダークモードオーバーライドに!importantを追加すると、受信トレイがカスタムスタイルの上に反転ルールを積み重ねるのを防ぐのに役立ちます。
  • テーマサポートをシグナル化します。 自動反転を減らすために、HTML headに次のメタタグを含めます：
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
クライアント間でテストします。Gmail（iOS、Android、ウェブ）、Outlook、Apple Mailはすべて異なる動作をします。テストは問題を早期に発見するのに役立ちます。

​
画像にaltタグを追加

altテキストはアクセシビリティを向上させ、画像がブロックされたり読み込みに失敗したりしても情報が伝達されることを保証します。
メールクライアント画像をブロック？altテキストを表示？altテキストをスタイル化？
AOLはいはいはい
Gmailはいはいはい
Yahooはいはいはい
Outlook場合によるはいはい
出典：Litmus Email Client Support

​
HTMLに名前を付けてフォーマット

アクセシビリティのためにセマンティックHTMLと意味のあるタグ名を使用します。これにより、スクリーンリーダーがコンテンツをより正確に解釈できるようになります。 また、保守性のために標準の色形式と適切なインデントを使用します。

​
壊れたリンクをチェック

壊れたリンクは配信可能性を低下させ、メールをスパムとしてフラグ付けする可能性があります。送信前にすべてのリンクを徹底的にテストしてください。

​
サポートされていないHTMLを避ける

ほとんどのメールクライアントは以下をサポートしていません：
  • JavaScriptまたはFlash
  • 埋め込みオーディオまたはビデオ
  • HTMLフォーム
  • Iframe
  • テキストのレイヤリング
追加のコンテンツを安全に共有するには、ハイパーリンクを使用してください。

​
FAQ

​
既存のメールテンプレートを使用する方法は？

詳細については、上記の独自のテンプレートをインポートを参照してください。

​
カスタムフォントを使用できますか？

はい、ただし、すべてのメールクライアント（Outlookなど）がカスタムフォントをサポートしているわけではないことに注意してください。サポートされていないフォントは、自動的にデフォルトのシステムフォントにフォールバックします。