---
url: "/ja/emailify/integrations/klaviyo.md"
description: "EmailifyにはKlaviyoとの連携機能が組み込まれており、FigmaプラグインからHTMLメールをKlaviyoのテンプレートに直接アップロードできます。"
---

# Klaviyoにメールをアップロードする

> EmailifyにはKlaviyoとの連携機能が組み込まれており、FigmaプラグインからHTMLメールをKlaviyoのテンプレートに直接アップロードできます。

### 動画チュートリアル：Klaviyoにメールをアップロードする

この動画では、FigmaのEmailifyプラグインからKlaviyoにHTMLメールをアップロードする方法を紹介しています。
[Embedded media](https://www.youtube-nocookie.com/embed/7OCqmOsrAYk)

> **Tip:** [テキストの段落](/ja/emailify/content/link-paragraphs)でKlaviyoのテンプレートリンク（例：`{{ event.url }}`）が必要な場合、Figma標準のリンク欄では無効なURLとしてブロックされます。これを回避するには、代わりにEmailify独自のKlaviyo用リンク形式`https://klaviyo.invalid/?{{ event.url }}`を使ってください。エクスポートしたHTMLには、Klaviyoのテンプレート構文がそのまま出力されます。

Emailifyのエクスポートパネルで、ドロップダウンリストから**Klaviyo**オプションを選択し、有効なKlaviyoのプライベートAPIキーを貼り付けます（以下の手順で取得できます）。

1. Klaviyoにログインし、[KlaviyoのAPI Keys設定ページ](https://www.klaviyo.com/settings/account/api-keys)に移動します。
2. **Create Private API Key**ボタンをクリックします。
3. 名前（例：「Emailify API Key」）を付け、**Custom Key**ラジオボタンをクリックします。
4. **Templates**のAPI Scopesのラジオボタンを**Read/Write Access**に設定します（その他のAPIスコープは*No Access*のままでかまいません）。
5. APIキーの作成完了画面で、**Your Private Key**セクションの下にある**Copy**アイコンボタンをクリックします。
6. コピーしたAPIキー（`pk_b3338b071136f98817d2a0e0a9581137ee`のような形式）をEmailifyプラグインに貼り付けます。

準備ができたら、**Upload To Klaviyo**ボタンをクリックすると、Figmaで選択したメールのHTMLへのエクスポートが始まり、[Klaviyoのテンプレート](https://www.klaviyo.com/email-templates/list)ページに自動でアップロードされます。

> **Info:** HTMLメールのサイズが102kb未満なのに、Klaviyoから送信したメールがGmailで途中で切れてしまう場合は、Klaviyoでリンクトラッキングがオンになっていることが原因です。リンクトラッキングは元のリンクURLをはるかに長い「トラッキングURL」に自動で置き換えるため、送信されるHTMLのファイルサイズが大きくなります。これを防ぐには、必要に応じてKlaviyoアカウントでリンクトラッキング・GAの設定をオフにしてください。

## EmailifyからアップロードしたKlaviyoテンプレートを更新する {#updating-klaviyo-templates-uploaded-from-emailify}

毎回新しいテンプレートを作成するのではなく、同じKlaviyoテンプレートをEmailifyで自動的に更新したい場合は、**Klaviyo**オプションを選択した状態で、プラグインのエクスポート設定にある**Enable Updatable Templates**トグルを有効にしてください（任意）。

最初のアップロードが成功すると、Figmaのフレーム名に`klaviyoTemplateId`の値が自動で追加されます。次回同じフレームをKlaviyoにアップロードする際、Emailifyは保存されたテンプレートIDを再利用します。

> **Tip:** テンプレートを初めてアップロードする前に、**Enable Updatable Templates**トグルが有効になっていることを確認してください。最初のアップロードで、元のKlaviyoテンプレートIDがFigmaのフレーム名に保存され、以降の再アップロードで使われます。

> **Warning:** この機能で更新されるのは、Klaviyoのテンプレートライブラリにある保存済みテンプレートのみです。そのテンプレートがすでにKlaviyoのキャンペーンやフローで使われている場合、Klaviyoはそのメッセージ用にコピーを作成するため、Emailifyから再アップロードしても、使用中のコピーは自動では置き換わりません。

## アップロードしたKlaviyoのメールテンプレートをキャンペーンで使う {#using-your-uploaded-klaviyo-email-template-in-a-campaign}

1. Klaviyoで新しい[メールキャンペーン](https://www.klaviyo.com/campaigns)を作成します
2. **Templates**ページの一覧の**Email:saved**タブで、新しいテンプレート名をクリックします。
3. ポップアップのプレビューウィンドウで**Use template**ボタンをクリックします。
4. コードエディターのページで**Save**ボタンをクリックします（**この手順は重要です**）
5. 「Your changes have been saved.」と表示されたら、**Back to Content**ボタンをクリックします。
6. 必要に応じてメールキャンペーンのスケジュールを設定します。

## KlaviyoでカスタムHTMLテンプレートをA/Bテストする {#a-b-testing-custom-html-templates-in-klaviyo}

KlaviyoはカスタムHTMLメールのA/Bテストに対応していますが、テストを作成すると、Variation BはVariation Aとまったく同じコピーとして自動で作成されます。2つの異なるEmailifyのデザインをテストするには：

1. Figmaで、2つのEmailifyフレームに分かりやすい名前（例：**Summer Sale - Test A**と**Summer Sale - Test B**）を付けます。Emailifyはこのフレーム名を、Klaviyoの保存済みテンプレートの名前として使います。
2. 両方のフレームを、別々の保存済みテンプレートとしてKlaviyoにアップロードします。
3. Test AのテンプレートでKlaviyoのキャンペーンを作成し、件名の上にある**Create A/B test**をクリックします。KlaviyoがVariation AのコピーとしてVariation Bを作成します。
4. ブラウザの別のタブで、**Content > Templates**から保存済みのTest Bテンプレートを開き、コードエディターを開いて、HTMLをすべてコピーします。
5. キャンペーンに戻ってVariation Bを開き、**Edit**をクリックして、コピーされたTest AのHTMLをTest BのHTMLに置き換え、変更を保存します。
6. 両方のバリエーションに分かりやすい名前を付けてから、それぞれのバージョンをプレビューまたはテスト送信し、キャンペーンのスケジュールを設定する前にプレーンテキスト版を確認します。

> **Tip:** メールのデザインやコンテンツをテストする場合は、件名と送信者情報を同じにして、変わる要素が1つだけになるようにしてください。

テストの設定や勝者を決める指標の選び方について詳しくは、Klaviyoの[A/Bテストのガイド](https://help.klaviyo.com/hc/en-us/articles/115005228148)をご覧ください。

## Klaviyoでテキスト・画像を編集可能にする（任意） {#editable-text-images-in-klaviyo-optional}

> **Warning:** **重要：Klaviyoの新しいエディターは、編集可能なテキストブロックやボタンに余白を自動で追加します。** 残念ながら、Figmaの元のデザインどおりの見た目にするには、下の「**Klaviyoの編集可能なキャンペーンで自動追加される余白を修正する**」セクションの動画に従って、これらの値を1つずつ手作業で「0」に戻す必要があります。

Klaviyoにテンプレートをアップロードした後もコンテンツブロックを編集できるようにしたい場合は、Emailifyのエクスポートオプションで**Editable Content**トグルを有効にしてから、Klaviyoで以下の手順を行います。

1. Klaviyoで新しい[メールキャンペーン](https://www.klaviyo.com/campaigns)を作成します
2. キャンペーンの**Content**ステップで**Drag and Drop**オプションをクリックします
3. **My Templates**タブをクリックし、新しいテンプレートをクリックします
4. **Save**ボタンをクリックし、**Back to Content**をクリックします
5. **Edit Email**ボタンをクリックします

### Klaviyoの編集可能なキャンペーンで自動追加される余白を修正する {#fixing-klaviyo-s-automatic-padding-overrides-in-editable-campaigns}

[Video](/assets/videos/emailify/export/klaviyo-padding-overrides.mp4)

Klaviyoが[エディターを更新](https://help.klaviyo.com/hc/en-us/articles/13160284274459)し、2023年6月6日以降すべてのテンプレートで新しいエディターの使用を必須にしたため、Emailifyで**Editable Content**トグルを有効にしてHTMLメールをエクスポートすると、残念ながらKlaviyoはデフォルトで各テキスト要素の周りに約18pxの余白を自動で追加します。この余白は、編集可能なテンプレートの場合にKlaviyoがHTMLに挿入する新しい``要素に、インラインの`style`属性として付けられます。

Emailifyで**Force the padding added by Klaviyo's new editor to be 0px**トグルを有効にすると、すべてのモバイルクライアントと、GmailなどのOutlook以外のデスクトップクライアントでこの余白を取り除くCSSが自動で追加されます。ただし、キャンペーン用にKlaviyoのエディターでメールを編集する際、テンプレート内の編集可能なテキストブロックの「Padding」の値をすべて手作業で「0」に変更しない限り、*Outlook*では**余白が表示されたままになります**。

## Klaviyoのメールに動的なプロダクトフィードを追加する {#adding-a-dynamic-product-feed-to-your-klaviyo-emails}

### 動画チュートリアル：Klaviyoのメールに動的なプロダクトフィードを追加する

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

EmailifyでHTMLメールテンプレートに動的なKlaviyoの[プロダクトフィード](https://help.klaviyo.com/hc/en-us/articles/115005082787)を追加するには、Emailifyプラグインのカテゴリタブにある**Ecomm**タブのコンポーネントプリセットを使う方法があります。

Emailifyフレームにコンポーネントを追加したら、追加されたコンポーネント内の`YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE`という名前を、Klaviyoアカウントで作成した独自のプロダクトフィード名に置き換える必要があります。

KlaviyoでカスタムHTMLのプロダクトフィードを使うには、Emailifyのエクスポートオプションで**Editable Content**トグルを有効にしておく必要もあります。これにより、Klaviyoのテンプレートにアップロードした後、Klaviyoエディターの「Blocks」サイドバーからデフォルトの「Product」ブロックをメールにドラッグ＆ドロップできるようになります。

上の動画チュートリアルで手順を1つずつ確認し、Klaviyoのテンプレートが正しく設定されていることを確かめることをおすすめします。手順どおりに設定しないと、プロダクトフィードのデータが表示されないことがあります。

> **Note:** **サポートが必要な場合は**、チームの開発者または[Klaviyoのサポート担当者](https://www.klaviyo.com/support)にご相談ください。Klaviyoのこの高度なテンプレート機能のカスタム実装について、当社（Emailify）は技術的な知見の提供やサポートを行うことができません。

### Klaviyoのプロダクトフィードをドラッグ＆ドロップするための編集可能領域を手作業で追加する {#manually-adding-editable-region-to-drag-drop-the-klaviyo-product-feed}

2025年以降、動的なプロダクトフィードのデータを確実に読み込むには、キャンペーンで使う前に、Klaviyo独自のHTMLテンプレートコードエディターで、この編集可能領域をHTMLテンプレートに*先に*手作業で追加し、テンプレートを保存し直す必要もあるようです。

```

        Drag and Drop your Klaviyo Product Feed Block Here

        NOTE: Remove this text element in Klaviyo's editor when you're done!

        Video Tutorial: https://www.youtube.com/watch?v=PaRSIxVLYlo

```

Klaviyoのテンプレートエディターで、HTMLテンプレート内の` **Note:** **サポートが必要な場合は**、チームの開発者または[Klaviyoのサポート担当者](https://www.klaviyo.com/support)にご相談ください。Klaviyoのこの高度なテンプレート機能のカスタム実装について、当社（Emailify）は技術的な知見の提供やサポートを行うことができません。