---
url: "/ja/emailify/integrations/customer-io.md"
description: "EmailifyにはDesign Studioのメールや再利用できるテンプレート向けのCustomer.io APIアップロードと、HTMLを手動でCustomer.ioにコピーするためのZIPエクスポートがあります。"
---

# Customer.ioにメールをアップロードする

> EmailifyにはDesign Studioのメールや再利用できるテンプレート向けのCustomer.io APIアップロードと、HTMLを手動でCustomer.ioにコピーするためのZIPエクスポートがあります。

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

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

EmailifyにはCustomer.io向けのエクスポートオプションが2つあります。

- **Customer.io (API)**：メールをCustomer.io Design Studioに、メールまたは再利用できるメールテンプレートとして直接アップロードします。
- **Customer.io (Zip)**：Customer.ioに手動でコピーできるZIPファイルをエクスポートします。

## Customer.io Design Studioに直接アップロードする {#uploading-directly-to-customer-io-design-studio}

Emailifyのエクスポートパネルで、ドロップダウンリストから**Customer.io (API)** オプションを選択し、有効なCustomer.ioの[App API Key](https://docs.customer.io/integrations/api/app/)を貼り付けて、ワークスペースに合ったCustomer.ioのリージョンを選択します。

> **Note:** Customer.ioのワークスペースがEUでホストされている場合は、Emailifyで**EU**リージョンを選択してください。それ以外の場合は、デフォルトの**US**リージョンのままにします。

**Upload As**設定で、Customer.ioに再利用できるメールテンプレートと通常のDesign Studioのメールのどちらを作成するかを選びます。後方互換性のため、デフォルトは**Template**です。準備ができたら**Upload To Customer.io**ボタンをクリックします。Figmaで選択したメールのHTMLエクスポートが始まり、Customer.io Design Studioに自動でアップロードされます。

> **Note:** Customer.ioのワークスペースでDesign Studioのメールを作成できるCustomer.ioのApp APIキーが必要です。

Customer.io API経由でアップロードする場合、Emailifyはデフォルトで、対応するメール画像を[Customer.io Assets](https://docs.customer.io/integrations/api/app/#tag/assets/createAsset)にアップロードします。Customer.io Assetsの`emailify`フォルダを使い、フォルダがまだない場合は自動で作成します。Customer.ioのファイルサイズ上限である2MBを超える画像など、Customer.io Assetsが受け付けない画像は、代わりにHypermaticにアップロードされるため、Design Studioのメールやテンプレートでは引き続きホストされた画像URLを参照できます。

## EmailifyからアップロードしたCustomer.ioのメールとテンプレートを更新する {#updating-customer-io-emails-and-templates-uploaded-from-emailify}

アップロードのたびに新しいアイテムを作成するのではなく、Customer.ioのメールやテンプレートを自動で*更新*したい場合は、プラグインのエクスポート設定で**Enable Updatable Templates**トグル（**Upload As**設定が**Email**の場合は**Enable Updatable Emails**）を必要に応じて有効にします。

これにより、アップロードしたFigmaフレームのレイヤー名に`customerioEmailId`または`customerioTemplateId`の値が自動で追加され、次回プラグインからエクスポートする際に同じフレームをAPI経由でCustomer.ioに再アップロードすると、そのIDが再利用されます。

> **Tip:** **最初のメールやテンプレートをアップロードする*前に *、* Enable Updatable Templates*または*Enable Updatable Emails*トグルも有効にしておく必要があります**。これにより、元のCustomer.ioのメールまたはテンプレートのIDがFigmaのフレーム名に追加されます。以降の再アップロードではこのIDが使われ、（毎回新しいアイテムを作成する代わりに）Customer.ioアカウント内の同じアイテムが更新されます。ただし、更新用のトグルを有効にしたままにしておく必要があります。

> **Note:** Customer.ioのメールやテンプレートを*更新*するには、最初にアップロードを受け取ったのと同じCustomer.ioのワークスペースとリージョンのApp APIキーを使う必要があります。

## ZIPエクスポートをCustomer.ioに手動でアップロードする {#manually-uploading-a-zip-export-to-customer-io}

Emailifyのエクスポートパネルで、ドロップダウンリストから**Customer.io (Zip)** オプションを選択します。準備ができたら**Export For Customer.io**ボタンをクリックすると、Figmaで選択したメールのHTMLエクスポートが始まります。

エクスポートが終わったら、.zipファイルをコンピューターにダウンロードして解凍します。メール名のフォルダ内にある`index.html`ファイルをコードエディターまたはテキストエディターで開き、ファイル内のHTMLをすべてコピーしてから、次の手順に進みます。

- Customer.ioアカウントに[ログイン](https://fly.customer.io/login)します
- 管理画面のナビゲーションで**Content**メニュー項目を展開します
- **Email Layouts**メニュー項目をクリックします
- **Create Layout**ボタンをクリックします
- **Start from scratch**オプションをクリックします
- レイアウトに名前を付けて、**Create Layout**をクリックします。
- エクスポートしたindex.htmlファイルからコピーしたHTMLを、**Edit**タブのエディターに貼り付けます。
- **Save changes**ボタンをクリックします。

## Customer.ioで完全に空のレイアウトを作成する {#creating-a-totally-blank-layout-in-customer-io}

> **Warning:** **完全に空のレイアウトを使っていることを確認してください！** Customer.ioはデフォルトで、新しく作成したレイアウトに独自のHTMLタグ（head、bodyなど）を自動で追加します。このコードを必ず削除してください。削除しないと、送信時にHTMLテンプレートの表示が崩れてしまいます。

Customer.ioでメールの作成を始めるときは、[Layout](https://customer.io/docs/journeys/3-layouts-and-customerio/)を選択する必要があります。独自のカスタムHTMLテンプレートだけがレンダリングされるよう、このレイアウトは完全に空である必要があります。

![Customer.ioでメールのレイアウトを選択している画面](/assets/images/emailify/customer-io-one.jpg)

下のスクリーンショットのとおり、空に見える**Layout**を選択しても、実際には空ではありません（``タグが自動で含まれ、HTMLテンプレートのコンテンツを囲んでいます）。

![Customer.ioのレイアウトに含まれるデフォルトのHTML](/assets/images/emailify/customer-io-two.jpg)

これを解決するには、Customer.ioが空のLayoutに追加したHTMLを手動で削除し、`content`タグ（下記）だけを残します。

![contentタグだけを残した空のCustomer.ioレイアウト](/assets/images/emailify/customer-io-three.jpg)

**Layout**を保存し、`content`タグだけが含まれる状態になれば、カスタムHTMLテンプレートが想定どおりにレンダリングされるはずです。