Emailifyは、プラグイン外で作成されたFigmaのメールデザインには対応していません。

Emailifyの概要

Emailifyは、Figmaでメールをデザインするための一般的なスターターコンポーネント一式を提供します。コンテンツ、スタイル、ブランドはFigmaの通常のデザインツールでカスタマイズでき、レスポンシブなスタイルを適用して、本番用のHTMLとしてメールをエクスポートできます。

Emailifyができること

• メールのレイアウトを作成するためのスターターコンポーネントとデザインツールを提供します。
• テキストや画像のコンテンツ、ビジュアルスタイル、リンクをFigmaでカスタマイズできます。
• （Emailifyプラグインでデザインした）メールを本番用のHTMLとしてエクスポートできます。
• メールマーケティングプラットフォームと連携し、API経由でHTMLテンプレートをアップロードできます。

Emailifyができないこと

• Emailifyプラグインを使わずにFigmaで手作業でデザインしたメールデザインを、自動的に変換すること（このようなデザインをHTMLにエクスポートするには、Emailifyプラグインのデザインツールを使ってデザインを作り直す必要があります）。
• 一部のクライアントでしか対応していないHTMLやCSSのプロパティについて、メールクライアントの対応不足を克服するための特別な回避策を提供すること（たとえば、GmailやOutlookでのダークモードのスタイルの上書きや、Apple Mail以外のクライアントでのカスタムフォントの表示など）

Emailifyはほかのメール用Figmaプラグインと何が違うのですか？

FigmaからHTMLへのメールのエクスポートを支援するほかのFigmaプラグインとは異なり、Emailifyは、Figmaで手作業でデザインされた任意のFigmaファイルを自動的に読み取り、メールで送信できるHTMLコードに魔法のように変換しようとはしません。

ほかの「メールデザインからHTMLへ」系Figmaプラグインの問題点

手作業でデザインされた任意のメールのモックアップのFigmaファイルをHTMLに変換しようとするときの根本的な問題は、そこに意図という概念がないことです。

最もシンプルな例として、「Rectangle」レイヤーと「Text」レイヤーを含むFigmaの「Frame」レイヤーが、（デザイナーによって）何として意図されているかを想像してみてください。

• クリックできるボタン？
• （テキストが埋め込まれた）1枚の静的な画像？
• 背景画像の上にリッチテキストが乗ったヒーローブロック？
• ソーシャルアイコンのリンク？

仮にFigmaプラグインがこの3つのレイヤーの意図を正しく判断できたとしても、その要素がモバイルでどう見えるべきか、クリックしたときにどこかへリンクすべきか、ほかの属性（altテキストなど）を持つかといった意図までは含まれていません。

上の例だけでも十分に難しいのですが、これは3つのFigmaレイヤーの意図を理解するという、かなり甘めに見積もった最もシンプルな例にすぎず、複雑さはさらに増していきます。

実際のメールのモックアップのFigmaデザインには何千ものレイヤーが含まれることがあり、それらが数十（あるいは数百）もの「frame」や「group」レイヤーの中にネストされている可能性もあります。しかも、それらのレイヤーにはHTMLとしてどうレンダリングすべきかという情報もありません。そうなると、Figmaで作成したデザインの入力（構造化されていない何百もの長方形、フレーム、グループ、テキストレイヤー）をもとに、必要なHTMLを出力することはすぐにほぼ不可能になります。

HTMLメールは、もともとすべてのメールクライアントで見た目を一貫してレンダリングすることが非常に難しいものです。そのため、デザイナーごとにやり方が異なる、無限に考えられるFigmaのレイヤー構造からデザイナーの意図を推測しようとするのは、あまりにもリスクが高いと私たちは考えています。

Emailifyが「意図」の問題を解決する方法

意図の問題を解決するために、Emailifyはメールのデザインについて、よりはっきりとした「レールに沿った」アプローチを取っています。コードをエクスポートしたときに実際のHTML要素に直接対応する特別なレイヤーをFigmaで作成できるようにしているため、プラグインはメールの各要素が何として意図されているかを正確に把握できます（たとえば、「Button」はまさにボタンであり、「Column」はまさにカラムです）。

たとえば、Emailifyプラグインを使ってFigmaのメールデザインにButtonレイヤーを追加すると、特別なデータが付与された新しいレイヤーが作成されます。このデータによって、Emailifyはそれが「ボタン」として意図されているかもしれない（いないかもしれない）単なる長方形レイヤーではなく、まさにボタンであると判断できます。

こうしたデザインツールがあることで、Emailifyが理解できるレイアウトやコンテンツ要素をすばやく作成でき、それを確実な方法で自動的にHTMLへエクスポートできます。

EmailifyとFigmaでどのようなデザインを作成できますか？

Emailifyにはレイアウトを作成するためのさまざまなツールがあり、作成したレイアウトのコンテンツやスタイルはFigmaでカスタマイズでき、レスポンシブデザインも指定できます。

プラグインのツールと、スタイルやコンテンツ用のFigmaを組み合わせて使うことで、完全にカスタマイズされた、ブランドに沿ったメールデザインを作成できます。

アイデアの参考として、（FigmaでEmailifyだけを使ってデザインされた）Emailify対応の無料Figmaテンプレートをぜひご覧ください。自社ブランドに合わせたメールのカスタマイズのヒントになります。

各Figmaテンプレートには、Figmaページの説明欄に、ステップごとに解説した完全な動画チュートリアルへのリンクも用意されており、テンプレートの作成方法を詳しく確認できます。各FigmaテンプレートのYouTubeプレイリスト全体も閲覧できます。

EmailifyデザインにおけるFigmaのレイヤー構造を理解する

EmailifyのスターターコンポーネントやQuick Add Element（プラグイン下部のドロップダウン）のデザインツールを使ってメールのレイアウトを作成すると、プラグインが必要なレイヤー構造を自動的に作成します。

この基本的なレイヤー構造を維持することがとても重要です。 生成されたFigmaレイヤーを、Figmaで手動で追加したほかのフレームやグループの中にネストするといった操作はしないでください。そうしないとプラグインが混乱し、それらのブロックを外部のレイヤーとして扱います（外部のレイヤーは、リッチテキストやHTMLコンテンツではなく静的な画像としてレンダリングされます）。

Emailifyのレイヤー構造の例

具体例として、下のスクリーンショットでは、Emailifyプラグインが自動的に作成したFigmaレイヤーの一式を確認できます。

Figmaのレイヤー構造が非常に一貫していることがわかります。Emailifyが追加した親のメールフレームの直下には1つ以上の「Row」レイヤーを置くことができ、各Rowの中には1つ以上の「Column」レイヤーを置くことができます。そして、各「Column」レイヤーには1つ以上の「Content」レイヤー（テキスト、画像、ボタンなど）を入れられます。

Emailifyのレイヤー構造の基本例

• ✉️ Email
  • 🦸 Hero
    • ✍️ Text
    • ✍️ Text
    • 🔗 Button
      • ✍️ Button Text
  • 🚣 Row
    • 🏛️ Column
      • 📷 Image
    • 🏛️ Column
      • ✍️ Text
      • ✍️ Text
  • 🚣 Row
    • 🏛️ Column
      • 📷 Image
    • 🏛️ Column
      • 🪑 Data Table
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • 📷 Vector Icon
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • 📷 Vector Icon
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
  • 🚣 Row
    • 🏛️ Column
      • 📷 Image
      • ✍️ Text
      • 🐦 Social
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
      • 🍔 Navigation
        • 🔗 Nav Link
          • ✍️ Nav Link Text
        • 🔗 Nav Link
          • ✍️ Nav Link Text
  • 🚣 Row
    • 🏛️ Column
      • 🪑 Data Table
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
  • 🎁 Wrapper (For Multiple Rows)
    • 🚣 Row
      • 🏛️ Column
        • 📷 Image
      • 🏛️ Column
        • ✍️ Text
    • 🚣 Row
      • 🏛️ Column
        • 📷 Image
      • 🏛️ Column
        • ✍️ Text

使用できるEmailifyのレイヤーの種類

各レイヤーの種類について詳しくは、Emailifyのドキュメントで個々のレイアウト要素とデザイン要素の説明をお読みください。

繰り返しになりますが、この構造を維持することはとても重要です。これらのレイヤーの順序を崩して移動すると、HTMLが期待どおりにレンダリングされなくなります（たとえば、「Row」の中に別の「Row」を入れたり、「Text」レイヤーを「Email」フレームの直下に置いたり、「Row」を「Column」の中に入れたりすることはできません）。

正しい構造で追加するための最もシンプルな方法は、Emailifyプラグインからスターターコンポーネントを追加し、レイアウトレイヤーの構造を根本的に変えずに、必要に応じてコンテンツやスタイルをカスタマイズすることです。

Figmaでレイヤーをカスタマイズする

動画チュートリアル：FigmaでメールをデザインしてHTMLにエクスポートする

この動画では、Emailifyプラグインを使って、Figmaから本番用のレスポンシブなHTMLメールをデザイン・エクスポートする方法を解説します。

Emailifyのコンポーネントをメールに追加すると、Figmaのキャンバス上にレンダリングされ、（自分で手動でレイヤーを追加した場合と同じように）通常どおりレイヤーを操作できます。

たとえばテキストレイヤーなら、Figmaの通常の設定パネルを使って、内容の更新や、フォントサイズ、行の高さ、文字間隔、段落の間隔、水平方向の配置の変更ができます。

Emailifyはあえてごく基本的な要素をレンダリングしているので、画像、テキスト、レイアウトの値を自社のブランドやスタイルガイドに合わせてカスタマイズできます。

コンポーネントをFigmaのインスタンスとして再利用する コンポーネントをカスタマイズしたら、Figmaのインスタンスとして何度でも再利用でき、今後ほかのメールデザインで使うこともできます。

EmailifyのコンテンツコンポーネントはFigmaのAuto Layoutを使用しています。 Emailifyに含まれるコンポーネントはAuto Layoutを使っているため、パディングやカラム間・要素間のスペースといったレイアウトの値をとても簡単に調整できます。

次のステップ

• Emailifyクイックスタートガイドに沿って、最初のメールを作成しましょう。
• Emailifyのレイアウトでコンテンツを配置する方法を学んでから、レスポンシブなメールのスタイルを追加しましょう。
• 本番用のHTMLエクスポートとプラットフォーム連携については、EmailifyのFigmaプラグインをご覧ください。