---
url: "/ja/emailify/design/dark-mode.md"
description: "ダークモードの上書き設定に対応しているのはiOS・MacOSのApple Mailアプリのみです（Gmail、Outlookなどはダークモードの上書き設定に*対応していません*）。"
---

# ダークモードの上書き設定（iOS・MacOSのApple Mailのみ対応）

> ダークモードの上書き設定に対応しているのはiOS・MacOSのApple Mailアプリのみです（Gmail、Outlookなどはダークモードの上書き設定に*対応していません*）。

> **Warning:** メールクライアントにおける[ダークモードの上書きスタイルへの対応](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/)は、iOS・MacOSのApple Mailに限られます。そのため、ダークモードの上書き設定はGmail、Outlookなどのほかのクライアントでは*機能しません*。この点に注意し、[プログレッシブエンハンスメント](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/)を意識してメールをデザインしてください。

### 動画チュートリアル：HTMLメールのデザインにダークモードのスタイルを追加する

この動画では、Emailifyプラグインを使ってメールデザインにダークモードのカスタム上書きスタイルを追加し、本番用のレスポンシブなHTMLメールをFigmaからエクスポートする方法を解説します。
[Embedded media](https://www.youtube-nocookie.com/embed/uAxQ5Psi1m4)

## ダークモードのデザインで考慮すべき重要な点 {#important-design-considerations-for-dark-mode}

![メールクライアントのダークモードCSS対応状況](/assets/images/emailify/caniemail-dark-mode.jpg)

> **Warning:** メールクライアントにおける[ダークモードの上書きスタイルへの対応](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/)は、iOS・MacOSのApple Mailに限られます。そのため、ダークモードの上書き設定はGmail、Outlookなどのほかのクライアントでは*機能しません*。この点に注意し、[プログレッシブエンハンスメント](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/)を意識してメールをデザインしてください。

メールクライアントごとに実装が異なるため、ダークモードに合わせたデザインは非常に難しいものです。それでも、各メールクライアントがダークモードで自動的に適用する（多くの場合ひどい）変更に*逆らわず*、うまく付き合うようにデザインする価値はあります。

最初の手がかりとして、メールクライアントが具体的に何を変更しているのか、そしてデザイン上でその変更の影響をどう抑えるのかを解説した資料（[CampaignMonitor](https://www.campaignmonitor.com/blog/email-marketing/designing-an-email-for-dark-mode-dark-and-light-optimization/)や[Litmus](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/)の記事など）に目を通しておくことをおすすめします。

## ダークモードのカラー上書きを適用する {#applying-dark-mode-color-overrides}

[Video](/assets/videos/emailify/design/dark-mode-color-override.mp4)

テキストレイヤー、画像、Button、Row、Column、Wrapperなどの要素を選択し、プラグインのヘッダーにある**Settings**ボタンをクリックします。Settingsパネルの下部にある**Dark Mode Overrides**セクションで、ダークモードのテキスト色と背景色を設定できます。

Button、Row、Column、Wrapperレイヤーでは、**Border Color**の上書きも設定できます。ライトモードで使っている枠線の太さやスタイルはそのままに、ダークモードでの枠線の色だけを変更できます。

これらの上書き設定は、ダークモードが有効なデバイスでメールを表示したときに、[この機能に対応しているメールクライアント](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/)（iOS・MacOSのApple Mailアプリ）で反映されます。

> **Warning:** メールクライアントにおける[ダークモードの上書きスタイルへの対応](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/)は、iOS・MacOSのApple Mailに限られます。そのため、ダークモードの上書き設定はGmail、Outlookなどのほかのクライアントでは*機能しません*。この点に注意し、[プログレッシブエンハンスメント](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/)を意識してメールをデザインしてください。

## ダークモードとライトモードで2つの画像レイヤーを切り替える {#swapping-between-two-image-layers-in-dark-and-light-mode}

[Video](/assets/videos/emailify/design/swap-dark-mode-content.mp4)

特定の画像レイヤーをダークモードで差し替えることもできます。Figmaのコンテンツレイヤー（Columnレイヤー内にあるもの）をクリックし、プラグインのヘッダーにある**Settings**ボタンをクリックして、**Only Hide in Dark Mode**または**Only Show in Dark Mode**のトグルを有効にします。どちらを選ぶかは、ダークモードが有効なデバイスでメールを表示したときに、[この機能に対応しているメールクライアント](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/)（iOS・MacOSのApple Mailアプリ）でその画像レイヤーを表示したいか、非表示にしたいかによります。

> **Warning:** メールクライアントにおける[ダークモードの上書きスタイルへの対応](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/)は、iOS・MacOSのApple Mailに限られます。そのため、ダークモードの上書き設定はGmail、Outlookなどのほかのクライアントでは*機能しません*。この点に注意し、[プログレッシブエンハンスメント](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/)を意識してメールをデザインしてください。

## プラグインでダークモードをプレビューする {#previewing-dark-mode-in-the-plugin}

Previewを開き、HTML Previewのツールバーにある**Dark Mode**スイッチをオンにします。同じダークモードのデザインをデスクトップとモバイルの幅で比較したい場合は、引き続きプレビュー幅のセレクターを使えます。**Desktop & Mobile**を組み合わせたHybridビューを選択している間は、Dark Modeは使えません。

ローカルのプレビューでは、汎用的な自動ダークモード処理を使い、メールの`prefers-color-scheme`スタイルを有効にします。色の調整はあくまで大まかな目安で、特定のメールクライアントを想定したものではありません。メールにEmailifyのダークモード上書き設定が含まれている場合は、隣にある**Overrides**スイッチで、明示的に指定した背景、テキスト、枠線、画像の切り替えのスタイルを表示・非表示にできます。

> **Warning:** このトグルはデザインの補助ツールであり、クライアントやデバイスのエミュレーターではありません。認証済みの環境でのサニタイズ処理、ネイティブのレンダリングエンジンやフォント、アプリの画面構成、配信時の処理、クライアントやバージョンごとのすべての違いは再現されません。

## ダークモードでメールをテストする {#testing-your-emails-in-dark-mode}

### 動画チュートリアル：FigmaからエクスポートしたHTMLメールをダークモードでテストする

この動画では、EmailifyプラグインとLitmus.comを使って、FigmaからエクスポートしたHTMLメールをダークモードでテストする方法を解説します。
[Embedded media](https://www.youtube-nocookie.com/embed/h5Gq9apZrxk)

送信する前に、[Litmus](https://www.litmus.com/)や[Email on Acid](https://www.emailonacid.com/)などのサービスを使って自分でメールをテストし、きちんと表示されることを確認しておくことを常におすすめします。

> **Warning:** メールクライアントにおける[ダークモードの上書きスタイルへの対応](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/)は、iOS・MacOSのApple Mailに限られます。そのため、ダークモードの上書き設定はGmail、Outlookなどのほかのクライアントでは*機能しません*。この点に注意し、[プログレッシブエンハンスメント](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/)を意識してメールをデザインしてください。

> **Tip:** **Settings**を開いてから、Figmaで同じ種類のEmailifyレイヤーを複数選択すると、[設定を一括で適用](/ja/emailify/design/settings#apply-settings-in-bulk)できます。変更した設定は、選択したすべてのレイヤーに適用されます。