---
url: "/ja/emailify/design/background-images.md"
description: "Figmaで画像塗りを適用すると、メールのRow、Column、Wrapper、Heroレイヤーに、すべてのメールクライアント（Outlookを含む）で機能する背景画像を追加できます。"
---

# メールレイアウトに背景画像を追加する

> Figmaで画像塗りを適用すると、メールのRow、Column、Wrapper、Heroレイヤーに、すべてのメールクライアント（Outlookを含む）で機能する背景画像を追加できます。

[Video](/assets/videos/emailify/design/row-background-image.mp4)

メールデザインの任意のRow、Column、Wrapper、Heroレイヤーに背景画像を追加するには、Figmaでレイヤーをクリックし、レイヤーのFigmaプロパティで**Fill**パネルの横にある **+** アイコンをクリックして、塗りの種類を**Image**に設定します。上の例はColumnレイヤーでの操作ですが、Row、Wrapper、Heroレイヤーでも手順は同じです。プラグインからメールをHTMLにエクスポートすると、この画像塗りが背景画像として適用されます。

> **Tip:** 背景画像とコンテンツレイヤーのコントラストを高めるには、レイヤーの背景画像の塗りの上に半透明の色を追加します（レイヤーのFigmaプロパティで**Fill**パネルの横にある **+** アイコンをクリックします）。新しい**Gradient**または**Solid**の塗りを好きな色に設定し、塗りの不透明度の値（例：`35`）を調整してください。

> **Note:** 背景画像とグラデーションは、EmailifyのプレビューとHTMLとして出力されるエクスポートで、Row、Column、Wrapper、Heroレイヤーに対応しています。`mjml`または`loops`の生の出力をエクスポートする場合は、Columnの背景画像の属性は引き続き省略されます。

## 背景画像の背後に単色の代替色を設定する {#setting-a-solid-fallback-color-behind-your-background-image}

[Video](/assets/videos/emailify/design/add-bg-fallback-color.mp4)

背景画像の背後に独自の代替色を表示させたい場合（受信者のメールクライアントで画像の読み込み中や、メールクライアントが最初に画像コンテンツの表示をブロックした場合に表示されます）は、背景画像を設定したRow、Column、Wrapper、Heroレイヤーの**Fills**に単色を追加します。**+** アイコンボタンをクリックし、選んだ塗りの色の不透明度を`100%`に設定して、Fillsリストのいちばん下（背景画像の塗りの下）にドラッグしてください。