# Figma 対応HTMLメール作成ツール比較：取り込み・編集・書き出し

正規URL：https://brew.new/ja/blog/best-html-email-builders-for-figma-users-import-editing-and-export-compared
執筆：Brew Team
公開日：2026-09-10
更新日：2026-09-29

この比較は Brew が公開しているものです。2026年9月28日に、リンク先の各社の製品ドキュメントを確認しました。これはドキュメントに基づく比較であり、すべてのプラットフォームを実際に試したと主張するものではありません。最新のプランの上限は、各ベンダーの料金ページで確認してください。

デザイナーが Figma で製品アップデートのフレームを仕上げ、チームはその日の午後に承認します。書き出したHTMLはブラウザでは問題なく見えるのに、Outlook でテストすると2カラムのレイアウトが崩れてしまいます。翌週、見出しを1つ変えたいマーケターは、デザイナーがもう一度 Figma を開いてくれるまで待たなければなりません。

Figma でデザインする場合、誰かがESPを開く前に、メールはすでに出来上がっています。残る課題は、Outlook でもダークモードでも正しく表示されるHTMLにフレームを変換することと、次に編集する人がどこで作業するかを決めることです。

ツールのアプローチは2つに分かれます。1つは Figma のプラグインで、Figma の中でそのツールのコンポーネントを使ってデザインしてから書き出します。もう1つは、Figma のフレームを取り込み、編集の場を別のアプリに移すタイプです。このガイドでは、この違いを軸に、4つの選択肢を比較します。

## この記事のポイント

- どんなフレームでも変換できるのか、独自のコンポーネントで作ったフレームしか変換できないのかを確認しましょう。Emailify には専用のコンポーネントが必要です。Brew と Email Love は、自社で作ったレイヤーから変換できます。
- 次の編集をどこで行うかを決めましょう。プラグインなら、編集は Figma に残ります。Brew では、マーケターが Figma なしでコピーやリンクを変更できる、メール用のキャンバスに編集の場が移ります。
- インポート後は、すべてのリンクを確認しましょう。Figma で設定済みのリンクは引き継げますが、リンク先が設定されていない箇所には、実際のURLを設定する必要があります。
- メールの幅でデザインしましょう。Brew のドキュメントでは、幅600〜700pxのフレームを推奨しています。

## 比較したポイント

2026年9月28日に各ベンダーの公式ページを確認し、次の4つの基準で比較しました。

1. 入力：どんな Figma のフレームでも使えるか、ツールのコンポーネントで作ったフレームに限られるか。
2. 変換後に編集する場所。
3. 出力形式とエクスポート先。
4. 公開されている料金。

## ツールの概要

| ツール | 変換の元になるもの | 変換後の編集場所 | 出力形式と出力先 | 料金 |
| --- | --- | --- | --- | --- |
| Brew | `node-id` を含む任意のフレームのURL | Brew のキャンバス（手作業でもプロンプトでも編集可能） | HTMLまたはJSX。Brew からの送信、対応するメール配信プラットフォームへのテンプレートのエクスポート、HTMLのコピーやダウンロードが可能 | 無料プラン。Growth は月額$99 |
| Email Love | 自社の Figma のレイヤー、または100以上の独自コンポーネント | Figma | MJMLからHTMLに変換。24のプラットフォームにAPIでエクスポート、そのほかにはファイルで書き出し | 無料（エクスポート月5回）。Starter は1ユーザーあたり月額$19 |
| Emailify | Emailify のコンポーネントのみ | Figma | レスポンシブなHTML。40以上のESPにエクスポート | Pro は月額$49 |
| Stripo | HTMLまたはMJMLのファイル（Figma から直接は不可） | Stripo のドラッグ＆ドロップエディター | ESPへのエクスポート、またはHTML | 無料。Basic は月額$20 |

## Brew

Brew は、OAuthで Figma と接続します。フレームのURLをチャットに貼り付けると、Brew がそのフレームをメールに変換します。Brew が必要とする `node-id` をURLに含めるため、Figma では選択範囲へのリンクをコピーする機能（Copy link to selection）を使ってください。インポートは、選択したフレームを起点に行われます。接続を承認する際には、表示される権限を確認しましょう。

[Figma のインポートに関するドキュメント](https://docs.brew.new/integrations/import/figma)によると、変換ではタイポグラフィ、色の値、レイアウトの構造、テキストが保持されます。変換は決定論的で、AIモデルを使わないため、同じフレームを2回インポートすれば同じ結果になります。変換は無料です。

Figma のテキストに設定したハイパーリンクは保持されます。URLが割り当てられていないボタンは、`#` にリンクされます。Brew は、こうしたリンクの欠落に加え、正確に変換できなかったフレーム内のほかの部分も数えた `warningCount` を返します。最初のテスト送信の前に修正しましょう。

インポートしたフレームは、通常の Brew のメールになります。手作業やプロンプトで編集したり、テンプレートとして保存したり、参考メールに設定して今後の生成で踏襲させたり、そこから別のパターンを生成したりできます。認証済みのドメインから送信することも、エクスポートすることもできます。HTMLやスクリーンショットからインポートする方法については、[既存のデザインをブランドらしいメールに変える方法](/ja/blog/import-existing-email-designs-ai)で解説しています。

Brew が向いているのは、レイアウトはデザイナーが Figma で管理しつつ、マーケターが Figma を開かずにメールを変更する必要があるチームです。

## Email Love

[Email Love](https://emaillove.com/figma-plugin) は、Figma のレイヤーを解析してMJMLに変換し、そこからメールで安全に表示できるHTMLを生成します。100以上のコンポーネントを使うことも、Figma 標準のツールでデザインすることもできます。Growth プランでは AI Studio が加わり、Figma のデザインシステムを使って、ブリーフからテンプレートを生成できます。

Email Love は、Salesforce Marketing Cloud、Braze、Iterable、HubSpot、Klaviyo、Marketo、Customer.io を含む24のプラットフォームとAPIで直接連携し、Loops や Shopify などにはファイルで書き出せます。無料プランでは、月5回までエクスポートできます。Starter は1ユーザーあたり月額$19、Growth は$59で、Professional は最低3ユーザーからの年払いです。

Email Love は、メールを編集する場所を Figma だけにしておきたいデザインチームに向いています。

## Emailify

[Emailify](https://www.hypermatic.com/emailify/) は、Hypermatic の Figma プラグインです。500以上のコンポーネントと20以上のテンプレートを備え、Mailchimp、Klaviyo、HubSpot、Salesforce、SendGrid、Braze を含む40以上のメールプラットフォームに、レスポンシブなHTMLをエクスポートできます。ベータ版の AI Designer は、承認済みのコンポーネントライブラリを使って、ブリーフからメールを作成します。

Emailify がエクスポートできるのは、Emailify のコンポーネントで作ったメールだけです。そのため、既存の Figma のデザインは、まずそのコンポーネントで作り直す必要があります。メールのデザインシステムを新しく作るチームにとっては、コンポーネントが最初からメールで安全に表示できるため、それが利点になることもあります。完成したフレームをすでに数多く抱えているチームにとっては、余分な作業になります。Emailify Pro は月額$49、または年額$499です。

## Stripo

[Stripo](https://stripo.email/pricing/) は、Figma のフレームを直接インポートしません。インポートできるのはHTMLとMJMLのファイルで、Emailify からはAPI経由で Stripo にエクスポートできます。デザインを Stripo に取り込んだら、AI Assistant と Brand Kit を備えたドラッグ＆ドロップエディターで編集し、ESPにエクスポートするか、HTMLとして書き出します。プランは Free、Basic（月額$20）、Medium（$45）、Pro（$125）で、月ごとのエクスポートの上限は、上位のプランほど増えます。

Stripo は、デザイナー以外のメンバーがビジュアルエディターでテンプレートを管理し、デザイナーからの引き継ぎはたまにしかないチームに向いています。

## チームに合うツール

| チームの状況 | まず試すツール |
| --- | --- |
| Figma のフレームは完成済みで、コピーはあとからマーケターが編集する | Brew |
| 編集は Figma だけで行い、多くのESPを使う | Email Love |
| Figma でメールのデザインシステムを新しく作る | Emailify |
| マーケターがビジュアルエディターでテンプレートを管理する | Stripo（HTMLまたは Emailify から取り込む） |

## Figma のフレームをメールできれいに表示するには

どのツールを選んでも、デザインのルールは変わりません。

- メールの幅でデザインしましょう。Brew のドキュメントでは、幅600〜700pxのフレームを推奨しています。
- メールで安全に使える代替フォントがあるフォントを使いましょう。Webフォントは、すべてのメールクライアントで読み込まれるわけではありません。
- ぼかし、マスク、重なり合うレイヤーといった複雑な効果は、画像に統合しておきましょう。そうしない場合は、変換時に見た目が変わるものと考えてください。
- インポート後は、すべてのボタンに実際のURLを設定しましょう。
- テストメールを送り、Gmail、Apple Mail、Outlook で、ライトモードとダークモードの両方を確認しましょう。Brew の `test_email_rendering` ツールや同様のプレビュー機能が役立ちます。最終版は、実際の受信トレイでも確認してください。

## よくある質問

### どんな Figma のフレームでも、HTMLメールに変換できますか？

Brew と Email Love なら、自社で作ったフレームから始められます。Emailify では、Emailify のコンポーネントを使ってデザインする必要があります。どのツールでも、フレームがメールの制約に沿っているほど良い結果が得られます。具体的には、1カラムかシンプルなカラム構成にし、標準的な幅を使い、メールクライアントが表示できない効果を使わないことです。

### メールは Figma のフレームとまったく同じ見た目になりますか？

近い見た目にはなりますが、すべての受信トレイでまったく同じになるわけではありません。メールクライアントによってレイアウトの表示は異なり、ダークモードでは色が変わることもあります。変換結果は出発点と考え、実際のメールクライアントで確認しましょう。

### Brew は Figma のファイルと同期し続けますか？

Brew がインポートするのは、共有した時点のフレームです。ドキュメントには、リアルタイムの同期についての記載はありません。Figma でデザインを変更した場合は、フレームをもう一度インポートするか、Brew でメールを編集してください。

### これらのツールから、加工されていないHTMLを取り出せますか？

はい。Brew ではHTMLをコピーまたはダウンロードでき、Email Love はHTMLまたはMJMLを、Emailify と Stripo はHTMLを書き出せます。

## 次のステップ

実際のフレームで試すなら、[Brew で Figma を接続し](/ja/browse/integrations/figma)、フレームのURLを1つ貼り付けて、最初のテスト送信の前に、インポートされたリンクを確認しましょう。