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

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

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

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

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

Emailifyのエクスポートパネルで、ドロップダウンリストから**Braze (API)** オプションを選択し、有効なBrazeの[APIキーとRESTエンドポイントのリージョン](https://www.braze.com/docs/api/basics/)を貼り付けます。これらはBrazeのダッシュボードページで確認・生成できます。

> **Note:** Brazeでメールを*作成*するには、**templates.email.create**権限が有効になったBrazeのAPIキーが必要です。

準備ができたら**Upload To Braze**ボタンをクリックします。Figmaで選択したメールのHTMLエクスポートが始まり、Brazeのマーケティングテンプレートに自動でアップロードされます。アップロードしたテンプレートを確認するには、Brazeアカウントにログインし、サイドバーの**Templates**、**Email Templates**の順にクリックしてから、**HTML Editor**オプションをクリックして、下にある**Saved HTML Templates**の一覧を参照します。

## 重要：Inline CSS設定を無効にする {#important-disable-inline-css-setting}

Brazeアカウントで[BrazeのInline CSS設定](https://www.braze.com/docs/user_guide/message_building_by_channel/email/html_editor/css_inline)が有効になっていると、CSSスタイルシートのスタイルをHTMLメールの本文に移す処理でHTMLが再処理されます。この処理はEmailifyですでに行われているため、このトグルが有効なままだとほかのスタイルが削除され、モバイルとデスクトップでレイアウトの一部が崩れてしまいます。

> **Warning:** **Sending Settings** -> **Advanced**セクションの**Enable Inline CSS**が*無効*になっていることを確認してください。EmailifyはHTMLのインライン化と圧縮を自動で行うため、Brazeで再処理するとコードが壊れてしまいます。

> **Tip:** 1通のメールだけInline CSSをオフにするには、BrazeのDrag & Drop Editorで**Edit Sending Info** -> **Advanced**タブに移動し、**Inline CSS**を*無効*にします。Brazeの**Settings** -> **Email Preferences**から全体の設定として変更することもできます。

> **Note:** 旧バージョンのBrazeを使っている場合、全体のInline CSSトグル（オフにするもの）は**Manage Settings** -> **Email Settings** -> **Inline CSS**にあります。

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

アップロードのたびに新しいテンプレートを作成するのではなく、Brazeのテンプレートを自動で*更新*したい場合は、プラグインのエクスポート設定で（*Braze (API)* オプションを選択した状態で）**Enable Updatable Templates**トグルを必要に応じて有効にします。

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

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

> **Note:** Brazeでメールを*更新*するには、**templates.email.update**権限が有効になったBrazeのAPIキーが必要です。

## ユニバーサルリンクとApp Links（SparkPost） {#universal-links-and-app-links-sparkpost}

[Emailifyのリンク](https://docs.hypermatic.com/emailify/content/link-images)を[SparkPost用のユニバーサルリンク](https://www.braze.com/docs/user_guide/message_building_by_channel/email/universal_links/#sparkpost)にするには、URLの末尾に`[[data-msys-sublink='open-in-app']]`を追加します（例：`http://www.example.com[[data-msys-sublink='open-in-app']]`）。これにより、``リンクタグに`data-msys-sublink`データ属性が自動で追加されます（例：``）。

次に、アプリがカスタムパスを正しく処理できるように設定されていることを確認してください。詳しくは、SparkPostの[ディープリンクでSparkPostのクリックトラッキングを使う方法](https://support.sparkpost.com/docs/tech-resources/deep-links-self-serve#preferred-solution-using-sparkpost-click-tracking-on-deep-links)に関する記事をご覧ください。この記事には、[iOS](https://support.sparkpost.com/docs/tech-resources/deep-links-self-serve#ios-swift-forwarding-clicks-to-sparkpost)と[Android](https://support.sparkpost.com/docs/tech-resources/deep-links-self-serve#forwarding-clicks-from-android-to-sparkpost)のサンプルコードが含まれています。

## ユニバーサルリンクとApp Links（SendGrid） {#universal-links-and-app-links-sendgrid}

[Emailifyのリンク](https://docs.hypermatic.com/emailify/content/link-images)を[SendGrid用のユニバーサルリンク](https://www.braze.com/docs/user_guide/message_building_by_channel/email/universal_links/#sendgrid)にするには、URLの末尾に`[[universal='true']]`を追加します（例：`http://www.example.com[[universal='true']]`）。これにより、``リンクタグに`universal`データ属性が自動で追加されます（例：``）。

次に、アプリがカスタムパスを正しく処理できるように設定されていることを確認してください。詳しくは、SendGridの[ディープリンクでSendGridのクリックトラッキングを使う方法](https://www.twilio.com/docs/sendgrid/ui/sending-email/universal-links)に関する記事をご覧ください。この記事には、[iOS](https://www.twilio.com/docs/sendgrid/ui/sending-email/universal-links#resolving-links-in-ios)と[Android](https://www.twilio.com/docs/sendgrid/ui/sending-email/universal-links#resolving-links-in-android)のサンプルコードが含まれています。