---
url: "/ja/emailify/content/dynamic.md"
description: "メールマーケティングプラットフォームが提供するマージタグと、そのプラットフォームの構文で書いたカスタムコードブロックを組み合わせて、メールに動的コンテンツを追加できます。"
---

# Emailifyで動的コンテンツやパーソナライズを追加

> メールマーケティングプラットフォームが提供するマージタグと、そのプラットフォームの構文で書いたカスタムコードブロックを組み合わせて、メールに動的コンテンツを追加できます。

### 動画チュートリアル：FigmaでHTMLメールに動的コンテンツを追加する

この動画では、Emailifyプラグインを使って、FigmaでHTMLメールに動的コンテンツを追加する方法を説明します。
[Embedded media](https://www.youtube-nocookie.com/embed/0512urzUNTk)

### 動画チュートリアル：FigmaでKlaviyoのメールに動的な商品フィードを追加する

この動画では、EmailifyのFigmaプラグインを使って、カスタムHTMLテンプレートにKlaviyoのカスタム商品フィードを追加する方法を説明します。
[Embedded media](https://www.youtube-nocookie.com/embed/PaRSIxVLYlo)
### 動画チュートリアル：FigmaでKlaviyoのカゴ落ちフローのメールテンプレートを作成する

この動画では、EmailifyのFigmaプラグインを使って、カスタムHTMLテンプレートにKlaviyoのカゴ落ちフローを追加する方法を説明します。
[Embedded media](https://www.youtube-nocookie.com/embed/MHPCkb1n8XM)

## プラットフォーム固有のパーソナライズコンテンツを追加する {#adding-platform-specific-personalization-content}

[Video](/assets/videos/emailify/content/text-merge-tags.mp4)

メール配信サービス（MailChimp、Klaviyoなど）のマージタグを追加すると、受信者の名前などをパーソナライズしたテキストを入れられます。Emailifyのテキストコンテンツのレイヤーにマージタグを追加するだけです。

たとえば、Figmaのテキストレイヤーの内容に`Hello, %FIRSTNAME%`や`Hello, *|FNAME|*`（プラットフォームの構文や値によって異なります）を追加すると、メールの送信時にマージタグが実際のデータに自動的に置き換えられます。

> **Note:** これらのタグは、メールの送信に使うプラットフォームによって異なります。使えるタグについては、お使いのメール配信サービスのテンプレートに関するドキュメントを参照してください。

### プラットフォーム別のテンプレート変数に関するドキュメント {#some-platform-specific-template-variable-documentation}

主なプラットフォームの一部（すべてではありません）へのリンクを以下に示します。

- [MailChimpのマージタグ](https://mailchimp.com/en-au/help/all-the-merge-tags-cheat-sheet/)
- [Klaviyoのテンプレートタグ](https://help.klaviyo.com/hc/en-us/articles/4408802648731)
- [Campaign Monitorのテンプレート構文](https://help.campaignmonitor.com/personalize-emails-with-subscriber-custom-fields)
- [Postmarkのテンプレート構文](https://postmarkapp.com/support/article/1077-template-syntax)
- [SendGridの置換タグ](https://docs.sendgrid.com/for-developers/sending-email/substitution-tags)
- [HubSpotのパーソナライズトークン](https://knowledge.hubspot.com/website-pages/personalize-your-content#add-personalization-to-a-coded-template)
- [ActiveCampaignのパーソナライズタグ](https://help.activecampaign.com/hc/en-us/articles/220709307-Personalization-Tags#list-of-standard-personalization-tags-0-5)
- [Mailjetのメールのパーソナライズ](https://documentation.mailjet.com/hc/en-us/articles/360043225773-Can-we-personalize-emails-)
- [SendPulseのメールのパーソナライズ](https://sendpulse.com/knowledge-base/email-service/additional/clever-personalization)
- [Brazeのパーソナライズタグ](https://www.braze.com/docs/user_guide/personalization_and_dynamic_content/liquid/supported_personalization_tags/)
- [Iterableのテンプレートのパーソナライズ](https://support.iterable.com/hc/en-us/articles/205480365-Personalizing-Templates-with-Handlebars-)
- [Dotdigitalのパーソナライズタグ](https://support.dotdigital.com/hc/en-gb/articles/212212798-Add-data-field-personalisation-to-your-email-campaign-or-landing-page)
- [Intercomのパーソナライズタグ](https://www.intercom.com/help/en/articles/247-create-custom-email-templates#2-when-adding-user-or-company-variables-to-your-template)

## Row、Wrapper、Heroレイヤーの間にif/elseのロジックを追加する {#add-if-else-logic-between-your-row-wrapper-or-hero-layers}

[Video](/assets/videos/emailify/content/custom-code-elements.mp4)

[🧑‍💻 Custom Code](/ja/emailify/content/code)レイヤーを使うと、デザイン内の行と行の間にカスタムのテンプレートロジックを挿入できます。構文は、お使いのメールマーケティングプラットフォームに合った正しいものにする必要がありますが、たとえば次のようになります。

`{% if customer_type == 'premium' %}`

*ここにEmailifyのRow*

`{% else %}`

*ここに別のEmailifyのRow*

`{% endif %} `

## パーソナライズした画像や動的な画像を追加する {#add-personalized-dynamic-images}

[Video](/assets/videos/emailify/content/custom-image-url-override.mp4)

メールデザイン内の特定の画像レイヤーの画像URLは、**Override Image Src**入力欄に値を追加すると上書きできます。どこかにアップロード済みの画像のURL（例：`https://mycdn/img.jpg`）か、メール配信プラットフォームのテンプレート言語の動的な変数（例：`{ variable.my_image }`）を使えます。指定した値は、HTMLのエクスポート時に``タグの`src`属性へ自動的に追加されます。

### 動的な画像の高さを設定する（幅は「auto」） {#optionally-setting-the-height-with-an-auto-width-for-a-dynamic-image}

動的な画像のファイルURLのサイズは事前にわからないことがあるため、高さを指定しつつ幅は自然に調整させたい場合は、Figmaで次のように設定します。

1. FigmaのUIで、画像レイヤーの**Lock aspect ratio**を有効にします。
2. FigmaのUIで、画像レイヤーに**Max height**の値を設定します。

これらを設定すると、デフォルトの動作（幅は固定、高さはauto）ではなく、高さは固定（Figmaで設定した最大の高さ）、幅は自動調整で画像がレンダリングされます。これにより、動的な画像は本来の縦横比を保ちながら、正しい縦のスペースを維持できます。

> **Info:** この動作は、動的なURLを使う画像にのみ適用されます。Emailifyでエクスポートした静的な画像や、MJMLプラットフォームの画像には影響しません。

## 長いカスタムテキストを省略表示する {#truncate-long-custom-text-content}

[Video](/assets/videos/emailify/content/truncate-lines.mp4)

長い動的テキストのタグをメールデザインに追加すると、特定の要素や背景画像などの高さが不自然に増え、デザインに影響することがあります。実際に送信するメールでは、動的なプレースホルダーのタグを最終的に置き換える*最終的なコンテンツ*の方が、動的コンテンツのタグそのものより短い場合があるためです。

この影響を抑えるには、次の手順で、Figmaのテキストレイヤーを指定した最大行数で省略表示するように設定します。

1. FigmaのEmailifyフレームのデザインで、**テキストレイヤーをクリック**します
2. テキストレイヤーの[テキストのサイズ設定](https://help.figma.com/hc/en-us/articles/27378154668951-Adjust-text-dimensions-and-resizing)の値を**Auto width**にします
3. （**...** アイコンをクリックして）**Type settings**パネルを開きます
4. **Truncate text**オプションを**Truncate enabled**にします
5. （その下の）**Max lines**プロパティに、テキストを折り返す最大行数を設定します
6. テキストレイヤーの**Auto layout**の**Horizontal resizing**プロパティの値を**Fill container**にします

> **Note:** 省略表示が適用されるのはFigmaのキャンバス上だけで、動的テキストの値全体が必要以上の高さを占めないようにするためのものです。最終的にエクスポートされるHTMLには省略表示は一切含まれません。動的テキストは、動的コンテンツのタグを使っているメールマーケティングプラットフォームから最終的なメールを配信対象に送るときに、実際のコンテンツへ自動的に置き換えられるためです。

### 長いプレースホルダーのテキストでもボタンの幅を狭く保つ {#keep-buttons-narrow-with-long-placeholder-text}

後で短い日付やラベルに置き換えられる長い変数やプレースホルダーがボタンに含まれている場合は、最終的なラベルに合わせてテキストレイヤーのサイズを設定してください。そうしないと、プレースホルダーのせいでエクスポートしたボタンの幅が広くなりすぎ、メール配信プラットフォームがプレースホルダーを置き換えた後も、Outlookではその幅が保たれてしまうことがあります。

1. Figmaで**Button内のテキストレイヤー**を選択します。
2. そのテキストレイヤーの**Horizontal resizing**を**Fixed width**にし、想定される最終的な日付やラベルが収まる幅を選びます。
3. **Type settings**を開いて**Truncate text**を有効にし、**Max lines**を**1**に設定します。
4. テキストレイヤーには変数やプレースホルダーを省略せずに残したまま、メールをもう一度エクスポートします。
5. メール配信プラットフォームからテストメールを送り、最終的な置き換え後のテキストでボタンを確認します。影響がある場合はOutlookでも確認してください。

> **Note:** 省略表示で変わるのは、Figmaのキャンバス上でのプレースホルダーの見た目だけです。エクスポートしたHTMLにはプレースホルダー全体が残り、メール配信プラットフォームによって置き換えられます。送信する予定の最も長い最終ラベルが収まる幅を確保してください。

## 動的な色とフォントファミリーの変数を追加する {#adding-dynamic-color-and-font-family-variables}

[Video](/assets/videos/emailify/content/dynamic-color-name-variables.mp4)

### 動的な色の変数 {#dynamic-color-variables}

メールデザイン内の背景色、テキストの色、線の色を、Figmaの色の通常の16進数の値（例：`#000000`）ではなく、動的なコードスニペット（例：**{{ primary_color }}**）としてレンダリングしたい場合は、[Figmaのカラースタイル](https://www.youtube.com/watch?v=d01Ql9ZtVnk)を作成し、カラースタイルの**Name**に二重の波かっこが含まれるようにします（例：**{{ my_color_var_name }}**）。すると、EmailifyプラグインでHTMLを生成するときに、カラースタイルの**Name**の値が`color`、`background-color`、`border-color`のCSSの値として自動的に使われます。

### 動的なフォントファミリーの変数 {#dynamic-font-family-variables}

同様に、`font-family`のCSSの値を、Figmaの通常のフォントの値（例：`Arial, sans-serif`）ではなく、動的なコードスニペット（例：**{{ customer.font_family }}**）としてレンダリングしたい場合は、[Figmaのテキストスタイル](https://www.youtube.com/watch?v=M0OuDhxaroU)を作成し、テキストスタイルの**Name**に二重の波かっこが含まれるようにします（例：**{{ my_font_var_name }}**）。すると、EmailifyプラグインでHTMLを生成するときに、スタイルの**Name**の値が`font-family`のCSSの値として自動的に使われます。

## 動的データでData Table Rowをループする {#looping-a-data-table-row-with-dynamic-data}

[Video](/assets/videos/emailify/content/looping-data-table-row.mp4)

メール配信プラットフォームのデータを繰り返し処理するには、**Data Table Row**を選択して**Settings**を開きます。**Opening Code Wrapper**（例：`{% for product in collection.products %}`）と**Closing Code Wrapper**（例：`{% endfor %}`）にループの構文を追加します。Emailifyは、エクスポートしたHTMLで、その行の``要素の前後にタグを挿入します。

**Data Table Row**レイヤーにラッパーのタグを追加したら、必要に応じて行内のレイヤーに[動的なコンテンツを入れられます](#adding-platform-specific-personalization-content)。

> **Tip:** **Settings**を開いてから、Figmaで同じ種類のEmailifyレイヤーを複数選択すると、[設定を一括で適用](/ja/emailify/design/settings#apply-settings-in-bulk)できます。変更した設定は、選択したすべてのレイヤーに適用されます。