動画チュートリアル：FigmaでHTMLメールに動的コンテンツを追加する
この動画では、Emailifyプラグインを使って、FigmaでHTMLメールに動的コンテンツを追加する方法を説明します。
動画チュートリアル：FigmaでKlaviyoのメールに動的な商品フィードを追加する
この動画では、EmailifyのFigmaプラグインを使って、カスタムHTMLテンプレートにKlaviyoのカスタム商品フィードを追加する方法を説明します。
動画チュートリアル：FigmaでKlaviyoのカゴ落ちフローのメールテンプレートを作成する
この動画では、EmailifyのFigmaプラグインを使って、カスタムHTMLテンプレートにKlaviyoのカゴ落ちフローを追加する方法を説明します。
プラットフォーム固有のパーソナライズコンテンツを追加する
メール配信サービス（MailChimp、Klaviyoなど）のマージタグを追加すると、受信者の名前などをパーソナライズしたテキストを入れられます。Emailifyのテキストコンテンツのレイヤーにマージタグを追加するだけです。
たとえば、Figmaのテキストレイヤーの内容にHello, %FIRSTNAME%やHello, *|FNAME|*（プラットフォームの構文や値によって異なります）を追加すると、メールの送信時にマージタグが実際のデータに自動的に置き換えられます。
これらのタグは、メールの送信に使うプラットフォームによって異なります。使えるタグについては、お使いのメール配信サービスのテンプレートに関するドキュメントを参照してください。
プラットフォーム別のテンプレート変数に関するドキュメント
主なプラットフォームの一部（すべてではありません）へのリンクを以下に示します。
- MailChimpのマージタグ
- Klaviyoのテンプレートタグ
- Campaign Monitorのテンプレート構文
- Postmarkのテンプレート構文
- SendGridの置換タグ
- HubSpotのパーソナライズトークン
- ActiveCampaignのパーソナライズタグ
- Mailjetのメールのパーソナライズ
- SendPulseのメールのパーソナライズ
- Brazeのパーソナライズタグ
- Iterableのテンプレートのパーソナライズ
- Dotdigitalのパーソナライズタグ
- Intercomのパーソナライズタグ
Row、Wrapper、Heroレイヤーの間にif/elseのロジックを追加する
🧑💻 Custom Codeレイヤーを使うと、デザイン内の行と行の間にカスタムのテンプレートロジックを挿入できます。構文は、お使いのメールマーケティングプラットフォームに合った正しいものにする必要がありますが、たとえば次のようになります。
{% if customer_type == 'premium' %}
ここにEmailifyのRow
{% else %}
ここに別のEmailifyのRow
{% endif %}
パーソナライズした画像や動的な画像を追加する
メールデザイン内の特定の画像レイヤーの画像URLは、Override Image Src入力欄に値を追加すると上書きできます。どこかにアップロード済みの画像のURL（例：https://mycdn/img.jpg）か、メール配信プラットフォームのテンプレート言語の動的な変数（例：{ variable.my_image }）を使えます。指定した値は、HTMLのエクスポート時に<img />タグのsrc属性へ自動的に追加されます。
動的な画像の高さを設定する（幅は「auto」）
動的な画像のファイルURLのサイズは事前にわからないことがあるため、高さを指定しつつ幅は自然に調整させたい場合は、Figmaで次のように設定します。
- FigmaのUIで、画像レイヤーのLock aspect ratioを有効にします。
- FigmaのUIで、画像レイヤーにMax heightの値を設定します。
これらを設定すると、デフォルトの動作（幅は固定、高さはauto）ではなく、高さは固定（Figmaで設定した最大の高さ）、幅は自動調整で画像がレンダリングされます。これにより、動的な画像は本来の縦横比を保ちながら、正しい縦のスペースを維持できます。
この動作は、動的なURLを使う画像にのみ適用されます。Emailifyでエクスポートした静的な画像や、MJMLプラットフォームの画像には影響しません。
長いカスタムテキストを省略表示する
長い動的テキストのタグをメールデザインに追加すると、特定の要素や背景画像などの高さが不自然に増え、デザインに影響することがあります。実際に送信するメールでは、動的なプレースホルダーのタグを最終的に置き換える最終的なコンテンツの方が、動的コンテンツのタグそのものより短い場合があるためです。
この影響を抑えるには、次の手順で、Figmaのテキストレイヤーを指定した最大行数で省略表示するように設定します。
- FigmaのEmailifyフレームのデザインで、テキストレイヤーをクリックします
- テキストレイヤーのテキストのサイズ設定の値をAuto widthにします
- （... アイコンをクリックして）Type settingsパネルを開きます
- Truncate textオプションをTruncate enabledにします
- （その下の）Max linesプロパティに、テキストを折り返す最大行数を設定します
- テキストレイヤーのAuto layoutのHorizontal resizingプロパティの値をFill containerにします
省略表示が適用されるのはFigmaのキャンバス上だけで、動的テキストの値全体が必要以上の高さを占めないようにするためのものです。最終的にエクスポートされるHTMLには省略表示は一切含まれません。動的テキストは、動的コンテンツのタグを使っているメールマーケティングプラットフォームから最終的なメールを配信対象に送るときに、実際のコンテンツへ自動的に置き換えられるためです。
長いプレースホルダーのテキストでもボタンの幅を狭く保つ
後で短い日付やラベルに置き換えられる長い変数やプレースホルダーがボタンに含まれている場合は、最終的なラベルに合わせてテキストレイヤーのサイズを設定してください。そうしないと、プレースホルダーのせいでエクスポートしたボタンの幅が広くなりすぎ、メール配信プラットフォームがプレースホルダーを置き換えた後も、Outlookではその幅が保たれてしまうことがあります。
- FigmaでButton内のテキストレイヤーを選択します。
- そのテキストレイヤーのHorizontal resizingをFixed widthにし、想定される最終的な日付やラベルが収まる幅を選びます。
- Type settingsを開いてTruncate textを有効にし、Max linesを1に設定します。
- テキストレイヤーには変数やプレースホルダーを省略せずに残したまま、メールをもう一度エクスポートします。
- メール配信プラットフォームからテストメールを送り、最終的な置き換え後のテキストでボタンを確認します。影響がある場合はOutlookでも確認してください。
省略表示で変わるのは、Figmaのキャンバス上でのプレースホルダーの見た目だけです。エクスポートしたHTMLにはプレースホルダー全体が残り、メール配信プラットフォームによって置き換えられます。送信する予定の最も長い最終ラベルが収まる幅を確保してください。
動的な色とフォントファミリーの変数を追加する
動的な色の変数
メールデザイン内の背景色、テキストの色、線の色を、Figmaの色の通常の16進数の値（例：#000000）ではなく、動的なコードスニペット（例：{{ primary_color }}）としてレンダリングしたい場合は、Figmaのカラースタイルを作成し、カラースタイルのNameに二重の波かっこが含まれるようにします（例：{{ my_color_var_name }}）。すると、EmailifyプラグインでHTMLを生成するときに、カラースタイルのNameの値がcolor、background-color、border-colorのCSSの値として自動的に使われます。
動的なフォントファミリーの変数
同様に、font-familyのCSSの値を、Figmaの通常のフォントの値（例：Arial, sans-serif）ではなく、動的なコードスニペット（例：{{ customer.font_family }}）としてレンダリングしたい場合は、Figmaのテキストスタイルを作成し、テキストスタイルのNameに二重の波かっこが含まれるようにします（例：{{ my_font_var_name }}）。すると、EmailifyプラグインでHTMLを生成するときに、スタイルのNameの値がfont-familyのCSSの値として自動的に使われます。
動的データでData Table Rowをループする
メール配信プラットフォームのデータを繰り返し処理するには、Data Table Rowを選択してSettingsを開きます。Opening Code Wrapper（例：{% for product in collection.products %}）とClosing Code Wrapper（例：{% endfor %}）にループの構文を追加します。Emailifyは、エクスポートしたHTMLで、その行の<tr></tr>要素の前後にタグを挿入します。
Data Table Rowレイヤーにラッパーのタグを追加したら、必要に応じて行内のレイヤーに動的なコンテンツを入れられます。
Settingsを開いてから、Figmaで同じ種類のEmailifyレイヤーを複数選択すると、設定を一括で適用できます。変更した設定は、選択したすべてのレイヤーに適用されます。