---
url: "/ja/emailify/design/padding.md"
description: "Auto Layoutの「Padding」プロパティを更新して、Emailifyのレイアウトレイヤーの上下左右のパディングを調整できます。"
---

# メールデザインのレイアウトにパディングを追加する

> Auto Layoutの「Padding」プロパティを更新して、Emailifyのレイアウトレイヤーの上下左右のパディングを調整できます。

## レイアウトレイヤーにパディングを追加する {#adding-padding-to-your-layout-layers}

[Video](/assets/videos/emailify/design/adding-layout-padding.mp4)

レイアウトレイヤーの高さを設定し、上下のスペースの大きさを指定するには、FigmaでAuto Layoutの**Vertical Padding**プロパティを調整します。

レイアウトレイヤー内のコンテンツの幅を設定し、左右のスペースの大きさを指定するには、FigmaでAuto Layoutの**Horizontal Padding**プロパティを調整します。

> **Warning:** RowやColumnレイヤーの高さは、常に**Padding**で設定してください（レイヤーのAuto Layoutの高さのプロパティは**Hug**に設定します）。HTMLでは要素の高さがコンテンツのサイズ（と上下のパディング）によって決まるため、Figmaで設定した**Fixed**の高さは最終的なHTMLに反映されません。HTMLにエクスポートするメールを見た目どおりにデザインするには、**Padding**を使うのが最も確実な方法です。

## 複数のRowレイヤーの周りに外側のパディングを追加する {#adding-outer-padding-around-multiple-row-layers}

[Video](/assets/videos/emailify/design/adding-outer-wrapper-padding.mp4)

複数のRowの周りにパディングを追加したい場合は、専用の[Wrapper](/ja/emailify/design/wrappers)レイアウトレイヤーをメールに追加できます。Emailifyフレームをクリックし、Quick Addドロップダウンメニューのオプションから**Row Wrapper**を選択して、**Add +** をクリックすると、新しいFigmaレイヤーとしてメールに挿入されます。

デザインにWrapperを追加したら、Rowを新しいWrapperレイヤーの中に移動し、FigmaでAuto Layoutの**Horizontal Padding**と**Vertical Padding**プロパティを調整して、Wrapper内のRowレイヤーの周りに外側のパディングを作ります。

## テキストレイヤーに内側のパディングを追加する {#adding-inner-padding-to-your-text-layers}

[Video](/assets/videos/emailify/design/text-padding.mp4)

**Settings**パネルを開いた状態でメール内のFigmaテキストレイヤーを選択し、**Inner Padding**トグルを有効にして、選択したテキストレイヤーに適用したいパディングの値を入力すると、テキストの内側にパディングを追加できます。

これにより、HTMLにレンダリングされたときにテキストレイヤーの内側に「内側の」パディングが追加されます。ほかのレイヤーに影響を与えずに、Column内の特定のテキストレイヤーにパディングの値を指定できます。

> **Tip:** **Mobile Padding**トグルを有効にして、選択したテキストレイヤーに適用したいパディングの値を入力すれば、モバイルでのテキストレイヤーのパディングを上書きすることもできます。この値は、HTMLメールをモバイルで表示したときにのみ反映されます。

## 区切り線レイヤーに内側のパディングを追加する {#adding-inner-padding-to-your-divider-line-layers}

[Video](/assets/videos/emailify/design/divider-padding.mp4)

**Settings**パネルを開いた状態でメール内のEmailifyの区切り線レイヤーを選択し、**Inner Padding**トグルを有効にして、選択した区切り線レイヤーに適用したいパディングの値を入力すると、区切り線に内側のパディングを追加できます。

これにより、HTMLにレンダリングされたときに区切り線レイヤーの内側に「内側の」パディングが追加されます。ほかのレイヤーに影響を与えずに、Column内の特定のテキストレイヤーにパディングの値を指定できます。

> **Tip:** **Mobile Padding**トグルを有効にして、選択した区切り線レイヤーに適用したいパディングの値を入力すれば、モバイルでのEmailifyの区切り線レイヤーのパディングを上書きすることもできます。この値は、HTMLメールをモバイルで表示したときにのみ反映されます。