> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# HTMLでメールをデザインする

> OneSignalのHTMLエディターを使用して完全カスタムのブランドメールを送信する — サポートされているHTMLルール、インラインCSS、ダークモード、購読解除の処理、クライアントの制限について。

## 概要

HTMLエディターでは、独自のHTMLを使用して完全にカスタマイズされたブランドメールを送信できます。

以下の場合にHTMLエディターを使用する必要があります：

* レイアウト、スペーシング、スタイリングを完全に制御する必要がある
* 本番準備済みのHTMLメールテンプレートがすでにある
* メールクライアントの制限内で作業することに慣れている

<Info>
  HTMLメールはWebページとは異なります。多くのHTML/CSS機能がメールクライアント間でサポートされていなかったり、一貫性なくレンダリングされたりします。
</Info>

### 前提条件

HTMLエディターを使用する前に、以下を確認してください：

* レスポンシブHTMLメールの構築経験がある
* すべての画像を公開アクセス可能なURL（サイト、CDN、S3等）でホストしている

#### 期待される結果

セットアップ後、メールは：

* 主要クライアント（Gmail、Outlook、Apple Mail）で一貫してレンダリングされる
* リンククリックが正しく追跡される
* 機能する購読解除メカニズムが含まれる
* スパム・配信可能性チェックに合格する

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

すでにHTMLメールテンプレートをお持ちの場合、以下のいずれかの方法でOneSignalに追加できます：

1. [メールテンプレート転送](./email-template-forwarding)を使用
2. [Create Template API](/reference/create-template)を使用してプログラマティックにテンプレートを作成
3. HTMLエディターにHTMLをコピー&ペースト

<Tip> ゼロからHTMLを書くのではなく、実証済みのテンプレートから始めましょう。 </Tip>

### FigmaでデザインしてOneSignalにエクスポート

メールデザインがFigmaにある場合、HTMLとしてOneSignalに取り込む方法は2つあります：

* **[Email Love](https://emaillove.com/figma-plugin)**：デザインを本番対応のHTMLメールに変換し、OneSignalのテンプレートに直接アップロードするFigmaプラグインです。プラグインのエクスポートパネルにOneSignalのApp IDとAPIキーを入力し、アップロードをクリックします。
* **[Figma MCPサーバー](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server)**：MCPサーバー経由でFigmaをAIコーディングツールに接続します。メールデザインフレームを指定して、HTMLメールコードの生成を依頼し、その出力をHTMLエディターに貼り付けます。

<Warning>
  **レンダリングや配信可能性の問題を引き起こす一般的なミス：**

  * **購読解除リンクの欠如** — マーケティングメールに必須です。購読解除リンクがないと、受信ボックスプロバイダーがメールをスパムとしてフラグする可能性が高くなります。
  * **インラインCSSの代わりに`<style>`ブロックを使用** — ほとんどのメールクライアントは`<style>`タグを削除します。常にスタイルをインライン化してください。
  * **フォールバックフォントなし** — カスタムWebフォントは一部のクライアントでのみ読み込まれます。常にシステムフォントのフォールバックを宣言してください。
  * **サイズが大きすぎる画像** — 1 MBを超えるメールは読み込みが遅く、ブロックされる可能性があります。個々の画像は200 KB未満にしてください。
  * **サポートされていないHTML** — JavaScript、`<iframe>`、フォーム、埋め込みメディアはメールクライアントによって削除されます。
</Warning>

***

## HTMLエディターを使用

メールメッセージを作成する際に、エディタータイプとして**HTMLエディター**を選択します。

1. エディターでHTMLを貼り付けるか記述します。
2. **テストメールを送信**を使用して、クライアントやデバイス間でのレンダリングをプレビューします。
3. スケジュールまたは送信前にレイアウトの問題を修正します。

<Frame caption="コード入力とライブプレビュー付きHTMLエディター">
  <img src="https://mintcdn.com/onesignal/tc0EvmtSSX56SX0c/images/docs/966f520-html-editor-preheader.png?fit=max&auto=format&n=tc0EvmtSSX56SX0c&q=85&s=ceece56a7c1c52b3a51badea42685768" alt="HTML editor with code input and live preview" width="1300" height="1238" data-path="images/docs/966f520-html-editor-preheader.png" />
</Frame>

### リンク&トラッキング

HTMLメールではリンクトラッキングがデフォルトで有効になっています。マルチリンクトラッキングがサポートされており、クリックはメッセージレポートに表示されます。

<Columns cols={2}>
  <Card title="リンク" icon="link" href="./links#email">
    メール用のリンクトラッキング、マルチリンクトラッキング、クリック分析を設定します。
  </Card>

  <Card title="ディープリンク" icon="arrow-up-right-from-square" href="./deep-linking">
    メールリンクからアプリの特定の画面にユーザーを誘導します。
  </Card>
</Columns>

#### 購読解除リンク

すべてのマーケティングメールには購読解除リンクを含める必要があります。

有効な購読解除オプションがないメールは以下の可能性が高くなります：

* スパムとしてマークされる
* 送信者の評判を損なう
* 受信ボックスプロバイダーにブロックされる

<Tabs>
  <Tab title="OneSignalのデフォルト購読解除リンク">
    HTML内の任意の場所（通常はフッター）に以下のプレースホルダーを含めます：

    ```html HTML theme={null}
    <a href="[unsubscribe_url]">購読解除</a>
    ```

    クリックすると、このリンクはOneSignalでユーザーのメール[サブスクリプション](./subscriptions)を購読解除します。
  </Tab>

  <Tab title="カスタム購読解除ページを使用（オプション）">
    独自の購読解除ページにリンクすることができますが、以下を行う必要があります：

    * 購読解除アクションをキャプチャする
    * ユーザーのメールサブスクリプションステータスを更新する

    詳細は[カスタム購読解除ページの作成](./create-custom-unsubscribe-page)を参照してください。

    <Warning> カスタム購読解除URLを使用してサブスクリプションを更新しない場合、ユーザーはメールを受信し続けます。</Warning>
  </Tab>
</Tabs>

***

## HTMLメールのベストプラクティス

### 常にインラインCSSを使用

ほとんどのメールクライアントは`<style>`ブロックや外部スタイルシートを削除します。

このツールを試してください：[Responsive Email CSS Inliner](https://htmlemail.io/inline/)

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

多くのメールクライアントは、ダークモードが有効な場合に自動色反転を適用します。これにより予測できない結果が生じる可能性があります — ボタンが黒い背景と黒いテキストで表示されたり、ロゴが消えたりすることがあります。これらの問題を防ぐために、ライトモードとダークモードの両方でメールがどのように見えるべきかを明示的に定義してください。

#### メールクライアントのダークモード対応状況

| クライアント                    | 動作                             | `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>`に以下のメタタグを含めます：

```html theme={null}
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
```

* **純白と純黒を避けます。** オフホワイトとダークグレーを使用して、完全反転クライアントの影響を軽減します。
* **透明PNGを慎重に使用します。** 透明な背景上のダークなロゴは、暗い背景では見えなくなります。明るいアウトラインを追加するか、組み込み背景付きのバージョンを使用してください。

<Note>
  ドラッグアンドドロップエディターを使用してダークモードCSSを追加する手順については、[ドラッグアンドドロップによるダークモードスタイリング](./design-emails-with-drag-and-drop#dark-mode-styling-with-drag-and-drop)を参照してください。
</Note>

### メール用の推奨画像サイズ

<AccordionGroup>
  <Accordion title="アスペクト比">
    * ヘッダー/バナー画像：`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`で表示）
  </Accordion>

  <Accordion title="ファイルサイズ">
    * 個々の画像を`100–200 KB`以下に保つ
    * 総メールサイズ（画像含む）を`1 MB`以下に保つ
    * より小さい = より速い読み込み時間とより良い配信可能性
  </Accordion>

  <Accordion title="ファイル形式">
    * **JPG** — 写真に最適
    * **PNG** — グラフィック、ロゴ、透明度のある画像に最適
    * **GIF** — シンプルなアニメーション用（ファイルサイズを小さく保つ）
    * **WebP** — メールではまだ広くサポートされていない；避ける
  </Accordion>

  <Accordion title="一般的なヒント">
    * アクセシビリティのため、画像が読み込まれない場合のために常にaltテキストを含める
    * スタイリングにはインラインCSSを使用（多くのクライアントは`<style>`タグを削除）
    * 背景画像は避ける（一貫性のないサポート）
    * クライアント間でテスト — Gmail、Outlook、Apple Mailはすべて異なってレンダリング
    * OutlookはしばしばサイズタグをIframe化するため、HTMLでwidthとheight属性の両方を設定
  </Accordion>
</AccordionGroup>

### 画像にaltテキストを追加

altテキストはアクセシビリティを向上させ、画像がブロックされたり読み込みに失敗したりしても情報が伝達されることを保証します。主要なメールクライアントのほとんどはaltテキストを表示およびスタイル化します：

| メールクライアント | 画像をブロック？ | altテキストを表示？ | altテキストをスタイル化？ |
| --------- | -------- | ----------- | -------------- |
| AOL       | はい       | はい          | はい             |
| Gmail     | はい       | はい          | はい             |
| Yahoo     | はい       | はい          | はい             |
| Outlook   | 場合による    | はい          | はい             |

### サポートされているHTMLのみを使用

メールクライアントは以下を**サポートしません**：

* JavaScript
* `<iframe>`
* HTMLフォーム
* 埋め込みオーディオまたはビデオ
* CSS位置決めまたはレイヤリングトリック

インタラクティブなコンテンツやマルチメディアコンテンツには外部ページへのリンクを使用してください。

### 送信前の検証

送信前に、以下を確認してください：

* すべてのリンクが機能している（破損リンクは配信可能性を低下させ、スパムフィルターをトリガーする可能性があります）
* 購読解除リンクが正しく機能している
* Gmail、Outlook、Apple Mailでテストメールがレンダリングされている
* ダークモードレンダリングが許容できる
* HTMLがアクセシビリティと保守性のためにセマンティックタグと適切なインデントを使用している

<Check> メールが主要クライアントで正しくレンダリングされ、購読解除が機能している場合、送信の準備ができています。</Check>

### パーソナライゼーション

Liquidテンプレートを使用して、HTML内に名前、タグ、フォールバック値などの購読者固有のコンテンツを挿入します。例：`{{ first_name | default: "there" }}`

<Columns cols={2}>
  <Card title="メッセージのパーソナライゼーション" icon="user-pen" href="./message-personalization">
    利用可能なパーソナライゼーション変数とその使い方。
  </Card>

  <Card title="Liquid構文の使用" icon="code" href="./using-liquid-syntax">
    条件文、フィルター、ループ、および高度なLiquidパターン。
  </Card>
</Columns>

***

## FAQ

### 既存のメールテンプレートを再利用できますか？

はい。[メールテンプレート転送](./email-template-forwarding)でOneSignalに転送するか、[Create Template API](/reference/create-template)でアップロードするか、HTMLエディターに直接HTMLをコピー&ペーストしてください。

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

はい、ただしサポートは異なります。`@font-face`でカスタムフォントを宣言し、常にシステムフォントのフォールバックを含めてください。Windows版OutlookはWebフォントを完全に無視し、システムのデフォルトにフォールバックします。

### なぜダークモードでメールの見た目が異なるのですか？

各メールクライアントはダークモードを異なる方法で適用します — 完全に色を反転するもの、部分的に反転するもの、Gmailウェブのようにダークモードをまったく適用しないものもあります。詳細については、上記の[クライアントの動作表](#メールクライアントのダークモード対応状況)を参照してください。レンダリングを制御するために、明示的なライトモードとダークモードのスタイルを定義してください。

### メールでサポートされていないHTMLとCSS機能は何ですか？

JavaScript、`<iframe>`、HTMLフォーム、埋め込みオーディオ/ビデオ、CSSポジショニングはサポートされていません。すべてのスタイリングにインラインCSSを使用してください — ほとんどのクライアントは`<style>`ブロックと外部スタイルシートを削除します。

### メールに「ブラウザで表示」リンクを追加できますか？

OneSignalはメールのホストされたウェブバージョンを生成しません。「ブラウザで表示」エクスペリエンスを提供するには、自分のウェブサイトにメールコンテンツをホストし、そのホストされたページへの標準HTMLリンクを追加してください。

### メールの最大サイズはどのくらいですか？

総メールサイズ（HTML + 画像）を1 MB未満に抑えてください。HTMLが102 KBを超えるメールはGmailによってクリップされ、折り畳みの下のコンテンツが「メール全体を表示」リンクの後ろに隠されます。

## 関連ページ

<Columns cols={3}>
  <Card title="ドラッグアンドドロップでメールをデザイン" icon="paintbrush" href="./design-emails-with-drag-and-drop">
    フルHTMLを書かずにメールをデザインするビジュアルメールビルダー。
  </Card>

  <Card title="メール概要" icon="envelope" href="./email-messaging">
    OneSignalでメールを送信するエンドツーエンドガイド。
  </Card>

  <Card title="メールテンプレート" icon="copy" href="./templates">
    キャンペーン全体でメールデザインを保存して再利用します。
  </Card>

  <Card title="購読解除リンク" icon="link-slash" href="./unsubscribe-links-email-subscriptions">
    コンプライアンスのためのデフォルトまたはカスタムの購読解除リンクを追加します。
  </Card>

  <Card title="メッセージのパーソナライゼーション" icon="user-pen" href="./message-personalization">
    タグ、Liquid構文、動的コンテンツでメールをパーソナライズします。
  </Card>

  <Card title="メールテンプレート転送" icon="envelope-open-text" href="./email-template-forwarding">
    既存のHTMLメールテンプレートをOneSignalにインポートします。
  </Card>
</Columns>