---
url: "/ja/emailify/design/button-gradient-background.md"
description: "Emailifyからエクスポートしたボタンのグラデーション背景は、ほとんどのメールクライアント（Outlookを含む）で機能します。非対応のクライアント（Yahoo! Mailなど）では、Figmaのグラデーションの最初の単色で表示されます。"
---

# ボタンにグラデーション背景を追加する

> Emailifyからエクスポートしたボタンのグラデーション背景は、ほとんどのメールクライアント（Outlookを含む）で機能します。非対応のクライアント（Yahoo! Mailなど）では、Figmaのグラデーションの最初の単色で表示されます。

### 動画チュートリアル：FigmaでHTMLメールにOutlook対応のグラデーションボタンを追加する

この動画では、Figma用のEmailifyプラグインを使って、HTMLメールにOutlook対応の角丸グラデーションボタンを追加する方法を紹介します。
  [Embedded media](https://www.youtube-nocookie.com/embed/P-faEnzef20)

[Video](/assets/videos/emailify/design/button-gradient-background.mp4)

EmailifyのButtonレイヤーにグラデーション背景を追加するには、Figmaでレイヤーの「Fill」プロパティを線形または放射状のグラデーションに設定します。HTMLにエクスポートすると、Buttonにグラデーション背景が自動的に追加されます。

> **Tip:** Emailifyからエクスポートしたボタンのグラデーション背景は、ほとんどのメールクライアント（Outlookを含む）で対応していますが、グラデーション背景に対応していないメールクライアントでは、Figmaのグラデーション塗りで使った最初の単色で代替表示されます。対応していない場合（Yahoo! Mailなど）に備えて、その色が（ボタンのテキスト色と十分なコントラストがある）適切な単色の代替色になっているか確認してください。

> **Warning:** グラデーションボタンのコードは**MJML**エクスポートには含まれず、Outlook用の追加コードは**SendGrid**エクスポートには含まれません。それぞれ、これらの拡張に必要な追加コードに対応していないためです。