--- url: "/ja/emailify/design/fundamentals.md" description: "Emailifyを使ってHTMLメールをデザイン・エクスポートする前に、プラグインの仕組みに関するいくつかの基本を理解しておくことがとても重要です。" --- # Emailifyプラグインの仕組みを理解する > Emailifyを使ってHTMLメールをデザイン・エクスポートする前に、プラグインの仕組みに関するいくつかの基本を理解しておくことがとても重要です。 > **Warning:** Emailifyは、プラグイン外で作成されたFigmaのメールデザインには**対応していません**。 ## Emailifyの概要 {#emailify-overview} Emailifyは、Figmaでメールをデザインするための一般的なスターターコンポーネント一式を提供します。コンテンツ、スタイル、ブランドはFigmaの通常のデザインツールでカスタマイズでき、レスポンシブなスタイルを適用して、本番用のHTMLとしてメールをエクスポートできます。 ### Emailifyが*できる*こと {#emailify-does} - メールのレイアウトを作成するためのスターターコンポーネントとデザインツールを提供します。 - テキストや画像のコンテンツ、ビジュアルスタイル、リンクをFigmaでカスタマイズできます。 - （Emailifyプラグインでデザインした）メールを本番用のHTMLとしてエクスポートできます。 - メールマーケティングプラットフォームと連携し、API経由でHTMLテンプレートをアップロードできます。 ### Emailifyが*できない*こと {#emailify-does-not} - Emailifyプラグインを使わずにFigmaで手作業でデザインしたメールデザインを、自動的に変換すること（このようなデザインをHTMLにエクスポートするには、Emailifyプラグインのデザインツールを使ってデザインを作り直す必要があります）。 - 一部のクライアントでしか対応していないHTMLやCSSのプロパティについて、メールクライアントの対応不足を克服するための特別な回避策を提供すること（たとえば、GmailやOutlookでの[ダークモードのスタイルの上書き](https://www.caniemail.com/search/?s=dark%20mode)や、Apple Mail以外のクライアントでの[カスタムフォントの表示](https://www.caniemail.com/features/css-at-font-face/)など） ## Emailifyはほかのメール用Figmaプラグインと何が違うのですか？ {#how-is-emailify-different-from-other-email-figma-plugins} FigmaからHTMLへのメールのエクスポートを支援するほかのFigmaプラグインとは異なり、Emailifyは、Figmaで手作業でデザインされた任意のFigmaファイルを自動的に読み取り、メールで送信できるHTMLコードに*魔法のように*変換しようとはしません。 ### ほかの「メールデザインからHTMLへ」系Figmaプラグインの問題点 {#the-problem-with-other-email-design-to-html-figma-plugins} 手作業でデザインされた*任意の*メールのモックアップのFigmaファイルをHTMLに変換しようとするときの根本的な問題は、**そこに*意図*という概念がない**ことです。 最もシンプルな例として、「Rectangle」レイヤーと「Text」レイヤーを含むFigmaの「Frame」レイヤーが、（デザイナーによって）何として意図されているかを想像してみてください。 - クリックできるボタン？ - （テキストが埋め込まれた）1枚の静的な画像？ - 背景画像の上にリッチテキストが乗ったヒーローブロック？ - ソーシャルアイコンのリンク？ 仮にFigmaプラグインがこの3つのレイヤーの意図を正しく判断できたとしても、その要素がモバイルでどう見えるべきか、クリックしたときにどこかへリンクすべきか、ほかの属性（`alt`テキストなど）を持つかといった意図までは含まれていません。 上の例だけでも十分に難しいのですが、これは3つのFigmaレイヤーの意図を理解するという、かなり甘めに見積もった最もシンプルな例にすぎず、複雑さはさらに増していきます。 *実際の*メールのモックアップのFigmaデザインには何千ものレイヤーが含まれることがあり、それらが数十（あるいは数百）もの「frame」や「group」レイヤーの中にネストされている可能性もあります。しかも、それらのレイヤーにはHTMLとしてどうレンダリングすべきかという情報もありません。そうなると、Figmaで作成したデザインの入力（構造化されていない何百もの長方形、フレーム、グループ、テキストレイヤー）をもとに、必要なHTMLを出力することはすぐにほぼ不可能になります。 HTMLメールは、もともとすべてのメールクライアントで見た目を一貫してレンダリングすることが*非常に*難しいものです。そのため、デザイナーごとにやり方が異なる、無限に考えられるFigmaのレイヤー構造からデザイナーの意図を*推測*しようとするのは、あまりにもリスクが高いと私たちは考えています。 ### Emailifyが「意図」の問題を解決する方法 {#how-emailify-solves-the-intent-problem} **意図の問題を解決するため**に、Emailifyはメールのデザインについて、よりはっきりとした「レールに沿った」アプローチを取っています。コードをエクスポートしたときに*実際の*HTML要素に直接対応する特別なレイヤーをFigmaで作成できるようにしているため、プラグインはメールの各要素が何として意図されているかを正確に把握できます（たとえば、「Button」は*まさに*ボタンであり、「Column」は*まさに*カラムです）。 たとえば、Emailifyプラグインを使ってFigmaのメールデザインに*Button*レイヤーを追加すると、特別なデータが付与された新しいレイヤーが作成されます。このデータによって、Emailifyはそれが「ボタン」として意図されているかもしれない（いないかもしれない）単なる長方形レイヤーではなく、*まさに*ボタンであると判断できます。 こうしたデザインツールがあることで、Emailifyが理解できるレイアウトやコンテンツ要素をすばやく作成でき、それを確実な方法で自動的にHTMLへエクスポートできます。 ## EmailifyとFigmaでどのようなデザインを作成できますか？ {#what-kind-of-designs-can-you-create-with-emailify-and-figma} [Video](/assets/videos/emailify/design/template-examples.mp4) Emailifyにはレイアウトを作成するためのさまざまなツールがあり、作成したレイアウトのコンテンツやスタイルはFigmaでカスタマイズでき、レスポンシブデザインも指定できます。 プラグインのツールと、スタイルやコンテンツ用のFigmaを組み合わせて使うことで、完全にカスタマイズされた、ブランドに沿ったメールデザインを作成できます。 アイデアの参考として、（FigmaでEmailifyだけを使ってデザインされた）[Emailify対応の無料Figmaテンプレート](https://www.figma.com/@adambrock)をぜひご覧ください。自社ブランドに合わせたメールのカスタマイズのヒントになります。 各Figmaテンプレートには、Figmaページの説明欄に、ステップごとに解説した完全な動画チュートリアルへのリンクも用意されており、テンプレートの作成方法を詳しく確認できます。各Figmaテンプレートの[YouTubeプレイリスト全体](https://www.youtube.com/watch?v=_84LY0fL0Ag&list=PLUGeoZ1yrQAr2_hHBW7WXmXkExRQB1nXZ&index=2)も閲覧できます。 ## EmailifyデザインにおけるFigmaのレイヤー構造を理解する {#understanding-the-figma-layer-structure-in-emailify-designs} Emailifyの[スターターコンポーネント](/ja/emailify/design/presets)や**Quick Add Element**（プラグイン下部のドロップダウン）のデザインツールを使ってメールのレイアウトを作成すると、プラグインが必要なレイヤー構造を自動的に作成します。 **この基本的なレイヤー構造を維持することがとても重要です。** 生成されたFigmaレイヤーを、Figmaで手動で追加したほかのフレームやグループの中にネストするといった操作はしないでください。そうしないとプラグインが混乱し、それらのブロックを外部のレイヤーとして扱います（外部のレイヤーは、リッチテキストやHTMLコンテンツではなく静的な画像としてレンダリングされます）。 ### Emailifyのレイヤー構造の例 {#example-emailify-layer-structure} 具体例として、下のスクリーンショットでは、Emailifyプラグインが自動的に作成したFigmaレイヤーの一式を確認できます。 Figmaのレイヤー構造が非常に一貫していることがわかります。Emailifyが追加した親のメールフレームの直下には1つ以上の「Row」レイヤーを置くことができ、各Rowの中には1つ以上の「Column」レイヤーを置くことができます。そして、各「Column」レイヤーには1つ以上の「Content」レイヤー（テキスト、画像、ボタンなど）を入れられます。 ![Emailifyのレイヤー構造の基本例](/assets/images/emailify/example-layer-structure.jpg) #### Emailifyのレイヤー構造の基本例 {#basic-example-of-emailify-layer-structure} - ✉️ 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-layer-types-you-can-use} 各レイヤーの種類について詳しくは、Emailifyのドキュメントで個々の[レイアウト要素](/ja/emailify/elements/email)と[デザイン要素](/ja/emailify/elements/text)の説明をお読みください。 繰り返しになりますが、この構造を維持することはとても重要です。これらのレイヤーの順序を崩して移動すると、HTMLが期待どおりにレンダリングされなくなります（たとえば、「Row」の中に別の「Row」を入れたり、「Text」レイヤーを「Email」フレームの直下に置いたり、「Row」を「Column」の中に入れたりすることはできません）。 正しい構造で追加するための最もシンプルな方法は、Emailifyプラグインからスターターコンポーネントを追加し、レイアウトレイヤーの構造を根本的に変えずに、必要に応じてコンテンツやスタイルをカスタマイズすることです。 ### Figmaでレイヤーをカスタマイズする {#customizing-your-layers-in-figma} ### 動画チュートリアル：FigmaでメールをデザインしてHTMLにエクスポートする この動画では、Emailifyプラグインを使って、Figmaから本番用のレスポンシブなHTMLメールをデザイン・エクスポートする方法を解説します。 [Embedded media](https://www.youtube-nocookie.com/embed/OWv4WX3eqvU) Emailifyのコンポーネントをメールに追加すると、Figmaのキャンバス上にレンダリングされ、（自分で手動でレイヤーを追加した場合と同じように）通常どおりレイヤーを操作できます。 たとえばテキストレイヤーなら、Figmaの通常の設定パネルを使って、内容の更新や、フォントサイズ、行の高さ、文字間隔、段落の間隔、水平方向の配置の変更ができます。 Emailifyはあえてごく基本的な要素をレンダリングしているので、画像、テキスト、レイアウトの値を自社のブランドやスタイルガイドに合わせてカスタマイズできます。 > **Tip:** **コンポーネントをFigmaのインスタンスとして再利用する** コンポーネントをカスタマイズしたら、Figmaのインスタンスとして何度でも再利用でき、今後ほかのメールデザインで使うこともできます。 > **Note:** **EmailifyのコンテンツコンポーネントはFigmaのAuto Layoutを使用しています。** Emailifyに含まれるコンポーネントはAuto Layoutを使っているため、パディングやカラム間・要素間のスペースといったレイアウトの値をとても簡単に調整できます。 ## 次のステップ {#next-steps} - [Emailifyクイックスタートガイド](/ja/emailify/overview/quickstart)に沿って、最初のメールを作成しましょう。 - [Emailifyのレイアウトでコンテンツを配置する方法](/ja/emailify/design/alignment)を学んでから、[レスポンシブなメールのスタイル](/ja/emailify/design/responsive)を追加しましょう。 - 本番用のHTMLエクスポートとプラットフォーム連携については、[EmailifyのFigmaプラグイン](https://www.hypermatic.com/emailify/)をご覧ください。