---
url: "/ja/emailify/design/preview.md"
description: "Emailifyのプレビューウィンドウでは、エクスポートする前に実際のHTMLでメールを確認し、操作できます。"
---

# FigmaでHTMLメールをプレビューする

> Emailifyのプレビューウィンドウでは、エクスポートする前に実際のHTMLでメールを確認し、操作できます。

[Video](/assets/videos/emailify/design/preview-email.mp4)

 Emailifyプラグインのヘッダーにある**Preview**ボタンをクリックすると、メールの実際のHTMLプレビューがFigmaプラグイン内に自動で生成されます。

 プレビューウィンドウを開いている間は、FigmaでEmailifyレイヤーに加えた変更がHTMLプレビューにリアルタイムで反映されます。

## プレビューパネルのタブを使う {#using-the-preview-panel-tabs}

プレビューパネルには4つのタブがあります。

- **HTML Preview**：現在のレスポンシブHTMLを表示します。Figmaのレイヤーを編集すると更新され、簡易的なダークモードプレビューのトグルも備えています。
- **Preflight**：本番用HTMLをチェックし、件名、プリヘッダー、アクセシビリティ、リンク、画像、配信、Gmailのクリッピングに関する実用上の問題を確認します。
- **Test Send**：受信トレイへの手動テストのために、[htmltest.email](https://htmltest.email/)にコピーできるよう本番用HTMLを準備します。
- **Email Previews**：Emailify内からメールクライアントのスクリーンショットをリクエストします。[プラグインでEmail Previewsを使う](/ja/emailify/export/testing#using-email-previews-in-the-plugin)をご覧ください。

PreflightとTest SendはEmailifyの本番用HTMLへのアクセスを使うため、有効なProライセンスがあるか、無料Proトライアルの回数が残っている場合に利用できます。メールクライアントでのテスト方法については、[送信前にHTMLメールをテストする](/ja/emailify/export/testing)をご覧ください。

> **Info:** プレビューの読み込みを速くするため、プレビューモードでは**GIF**は静止画として表示されます（GIFはレンダリングに時間がかかるためです）。プラグインから最終的にエクスポートしたHTMLでは、アニメーションとして再生されます。

> **Tip:** プレビューウィンドウを開いたままでも、プレビューパネルのヘッダーにある**Settings**ボタンをクリックすれば、モバイル用の上書き設定を編集できます。

### さまざまなデバイス幅でメールをプレビューする {#previewing-your-email-at-different-device-widths}

さまざまなデバイス幅での見え方を確認するには、プレビューパネルのヘッダーにあるセレクトボックスをクリックし、次のオプションから選択します。

- Desktop & Mobile（ハイブリッドビュー）
- Desktop（幅**726px**）
- iPhone 17 Pro Max（幅**440px**）
- iPhone 16 Pro Max（幅**430px**）
- iPhone Air（幅**420px**）
- Google Pixel（幅**412px**）
- iPhone 17（幅**402px**）
- iPhone 16（幅**393px**）
- iPhone 13 Mini（幅**375px**）
- iPhone 12 Mini（幅**360px**）
- iPhone SE（幅**320px**）

> **Note:** **メールのモバイル用ブレークポイント** 。Emailifyからエクスポートしたメールには「ブレークポイント」が1つだけあり、Figmaのデスクトップ用フレームの幅に合わせて自動で設定されます。たとえばEmailifyフレームが600pxの場合、モバイル用のスタイルや上書き設定は599px以下で表示されます。

> **Tip:** メールの幅は**600px〜640px**にしておくのが一般的におすすめです。メールクライアントやアプリによっては閲覧パネルの幅が700px未満になることがあり、デスクトップのレイアウトではなくモバイル用のスタイルで表示される場合があるためです。

## FigmaでのHTMLプレビューウィンドウへの変更のライブ反映 {#live-preview-changes-in-html-preview-window-from-figma}

HTMLプレビューを開いたままFigmaのレイヤーを編集し続けると、そのたびに**Refresh**をクリックしなくても、変更がすぐにプレビューウィンドウに反映されます。

[Video](/assets/videos/emailify/design/live-preview-edits-desktop.mp4)

## ダークモードをプレビューする {#previewing-dark-mode}

HTML Previewのツールバーにある**Dark Mode**をオンにすると、現在のメールとEmailifyのローカルでの大まかなダークモードプレビューを比較できます。このプレビューでは、特定のメールクライアントの配色ではなく、汎用的な自動カラー処理を使います。プレビュー幅のセレクターを引き続き使えば、同じダークモードのデザインをデスクトップやモバイルの幅で確認できます。**Desktop & Mobile**を組み合わせたHybridビューを選択している間は、Dark Modeは使えません。

メールにEmailifyのダークモード上書き設定が含まれている場合は、隣にある**Overrides**スイッチで、明示的に指定した背景、テキスト、枠線、画像の切り替えのスタイルを表示・非表示にできます。

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

> **Warning:** メールクライアントにおける[ダークモードの上書きスタイルへの対応](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/)は限られています。Emailifyの明示的な上書き設定は、対応しているApple Mailのバージョン向けのものです。Gmail、Outlook、Windows Mail、Yahooなどのクライアントでは、異なる自動カラー処理が適用される場合があります。

## HTMLメールのファイルサイズ（KB）を確認する {#checking-the-file-size-of-your-html-email-in-kilobytes-kb}

プレビューパネルのヘッダーには、メールのHTMLの合計ファイルサイズを表す数値が表示されます（画像アセットは含まず、`.html`ファイル自体のサイズです）。[Gmailの102KBのクリッピング上限](https://mailchimp.com/help/gmail-is-clipping-my-email/)を超えていないかを確認するのに役立ちます。

> **Warning:** **HTMLのサイズが102KBを超えている場合** 、メールが上限を超えたことがひと目でわかるよう、プレビューウィンドウのファイルサイズが黄色で強調表示されます。

> **Tip:** HTMLのファイルサイズを減らすには、[メール内の「Row」レイヤーの数を減らすか、まとめる](/ja/emailify/design/optimizing-html-file-size)のが最も効果的です。

## メールのWebセーフな代替フォントをプレビューする {#previewing-web-safe-font-fallbacks-in-your-email}

[Video](/assets/videos/emailify/design/preview-font-fallbacks.mp4)

メールのカスタムWebフォントに対してWebセーフな[代替フォント](/ja/emailify/design/fonts)を指定している場合は、Emailifyのプレビューウィンドウの下部にある**Show Fallback Fonts**スイッチを切り替えると、その見た目をプレビューできます。

## EmailifyレイヤーのAuto Layoutのリント（と自動修正） {#auto-layout-linting-and-auto-fixing-for-emailify-layers}

[Video](/assets/videos/emailify/design/linter-auto-fix.mp4)

プラグインの**Preview**機能でHTMLをプレビューすると、Emailifyプラグインで追加したレイヤーのFigmaのAuto Layoutプロパティが、HTMLへのエクスポートで見た目を一貫させるために正しい状態のままかどうかが自動で検出されます。

Auto Layoutプロパティの調整が必要なレイヤーの一覧が表示されます（たとえば、高さを「Fixed」から「Hug」に変更するなど）。必要に応じて**Apply Fixes**ボタンをクリックすると、これらの変更を自動で適用でき、フラグが付いたFigmaレイヤーに必要なAuto Layoutプロパティの調整が反映されます。

## 誤った位置にあるEmailifyレイヤーを手動で移動して解決する {#manually-moving-and-resolving-emailify-layers-that-are-in-the-wrong-place}

[Video](/assets/videos/emailify/design/manual-move-layers.mp4)

プラグインの**Preview**機能でHTMLをプレビューすると、Emailifyプラグインで追加したレイヤーが、HTMLへのエクスポートで見た目を一貫させるために、作成時の正しい構造（たとえば、Rowレイヤー -> Columnレイヤー -> コンテンツレイヤー）のままかどうかが自動で検出されます。

手動で移動する必要があるレイヤーの一覧が、それぞれの手順（たとえば「このRowレイヤーをメインのEmailフレームに戻してください」）とともに表示されます。ボタンをクリックすると、ページ上とFigmaのレイヤーリスト内の該当レイヤーにすぐ移動できるので、見つけて移動するのが簡単になります。

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