---
url: "/ja/emailify/elements/hero.md"
description: "Heroセクションを使って、背景画像とコンテンツ要素を持つ1カラムのコンテンツを作成します。"
---

# ヒーロー

> Heroセクションを使って、背景画像とコンテンツ要素を持つ1カラムのコンテンツを作成します。

**🦸 Hero**要素は特別な種類のコンテンツコンテナで、自身のフレーム要素に背景画像を追加できます。

> **Warning:** **Heroレイヤーは入れ子にできず、カラムも含められません** 。**🦸 Hero**要素は、✉️ **Email**レイヤーの直下にしか追加できません。**🦸 Hero**要素は複数カラムのレイアウトに対応していないため、**🏛️ Column**レイヤーを含めることはできません。その代わり、（**🚣 Row**要素とは異なり）**🏛️ Column**レイヤーを使わずに、フレームの直下にコンテンツレイヤーを追加します。

> **Tip:** **背景画像やグラデーションを追加する** 。🚣 **Row**、🏛️ **Column**、🦸 **Hero**、🎁 **Wrapper**レイヤーには、画像やグラデーションの背景の塗りを追加できます。なお、未加工の`mjml`と`loops`のエクスポートでは、引き続きColumnの背景画像の属性は出力されません。

## Heroのコンテンツ要素 {#hero-content-elements}

🦸 **Hero**のFigmaレイヤーを選択すると、次のオプションが表示されます。

- ✍️ [テキスト](/ja/emailify/elements/text)
- 📷 [画像](/ja/emailify/elements/image)
- 🔗 [ボタン](/ja/emailify/elements/button)
- 📐 [スペーサー](/ja/emailify/elements/spacer)
- ➖ [区切り線](/ja/emailify/elements/divider)
- 🧾 [スプレッドシート（インポート）](/ja/emailify/elements/spreadsheet)
- 🪑 [データテーブル](/ja/emailify/elements/table)
- 🍔 [ナビゲーションリンク](/ja/emailify/elements/navbar)
- 🐦 [ソーシャル](/ja/emailify/elements/social)
- 🎠 [画像カルーセル](/ja/emailify/elements/carousel)

## 「Quick Add」機能で新しいEmailifyレイヤーを追加する {#using-the-quick-add-feature-to-add-new-emailify-layers}

[Video](/assets/videos/emailify/element-contexts.mp4)

Emailifyでは、Figmaのデザインにレイヤーとして追加される専用のレイアウトブロックとコンテンツ要素を使ってデザインを組み立て、プラグインからHTMLにエクスポートできます。

これらのレイアウトブロックやコンテンツ要素を追加するには、Emailifyフレームを1つ以上作成しておき、そのフレームをクリックします。プラグイン下部に**Quick Add Element**コンテキストメニューが自動で表示されるので、追加したい要素をクリックし、**Add +** ボタンをクリックすると、選択したレイヤーに追加されます。

> **Tip:** コンテキストメニューに表示されるオプションは、現在選択しているFigmaのレイヤーに応じて変わります。