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

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

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

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

プレビューパネルのタブを使う ​

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

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

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

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

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

さまざまなデバイス幅でメールをプレビューする ​

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

  • 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）

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

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

FigmaでのHTMLプレビューウィンドウへの変更のライブ反映 ​

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

ダークモードをプレビューする ​

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

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

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

メールクライアントにおけるダークモードの上書きスタイルへの対応は限られています。Emailifyの明示的な上書き設定は、対応しているApple Mailのバージョン向けのものです。Gmail、Outlook、Windows Mail、Yahooなどのクライアントでは、異なる自動カラー処理が適用される場合があります。

HTMLメールのファイルサイズ（KB）を確認する ​

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

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

HTMLのファイルサイズを減らすには、メール内の「Row」レイヤーの数を減らすか、まとめるのが最も効果的です。

メールのWebセーフな代替フォントをプレビューする ​

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

EmailifyレイヤーのAuto Layoutのリント（と自動修正） ​

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

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

誤った位置にあるEmailifyレイヤーを手動で移動して解決する ​

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

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

Settingsを開いてから、Figmaで同じ種類のEmailifyレイヤーを複数選択すると、設定を一括で適用できます。変更した設定は、選択したすべてのレイヤーに適用されます。