---
url: "/ja/emailify/design/item-spacing.md"
description: "Auto LayoutのItem Spacingプロパティを調整してレイヤー間のスペースを変更できるほか、Emailifyのスペーサー要素を使って縦方向のスペースをさらに追加することもできます。"
---

# メールデザインにアイテム間のスペースとスペーサー要素を追加する

> Auto LayoutのItem Spacingプロパティを調整してレイヤー間のスペースを変更できるほか、Emailifyのスペーサー要素を使って縦方向のスペースをさらに追加することもできます。

## レイヤーのデフォルトのAuto Layoutのアイテム間スペースを変更する {#changing-the-default-auto-layout-item-spacing-for-your-layers}

[Video](/assets/videos/emailify/design/adding-item-spacing.mp4)

Row、Column、そのほかのEmailifyのレイアウトレイヤー（Wrapper、Hero、ソーシャルアイコンのコンテナなど）の**Item Spacing**プロパティを調整すると、そのレイヤー内の子要素の間に入るデフォルトのスペースの大きさを指定できます。

たとえば、ColumnレイヤーのItem Spacingの値を`16`に設定すると、そのColumnレイヤー内のすべての要素（テキスト、画像、ボタンなど）の間に、均等なスペース（16ピクセル）が配分されます。

## カラムに縦方向のカスタムスペーサー要素を追加する {#adding-custom-vertical-spacer-elements-to-your-columns}

[Video](/assets/videos/emailify/design/adding-spacer-elements.mp4)

デフォルトのアイテム間スペースを設定済みでも、Column内の特定のレイヤーの間に縦方向のスペースを少し追加したい場合は、Emailify専用のスペーサー要素を追加できます。「Column」レイヤーをクリックし、プラグイン下部のQuick Addドロップダウンメニューから「Spacer」項目を選択して、**Add +** ボタンをクリックすると、スペーサーレイヤーがColumnに挿入されます。

スペーサーレイヤーをColumnに追加したら、レイヤーパネルでドラッグ＆ドロップして、どのレイヤーの間に置くかを並べ替えられます。サイズは、Figmaのレイヤーのプロパティパネルでレイヤーの**Height**を調整して変更します。

> **Info:** カスタムスペーサー要素の周りにも、親要素のデフォルトのItem Spacingが入ります。スペーサーのHeightの値を指定するときは、この点を考慮してください。

## カラム内のレイヤー間に縦方向のスペースを自動で入れる {#adding-automatic-vertical-item-spacing-between-your-column-layers}

[Video](/assets/videos/emailify/design/vertical-auto-layout-split.mp4)

Columnの上端に1つのレイヤー、下端に別のレイヤーを配置したままにするには、Columnの縦方向のAuto Layoutのサイズ設定を**Fill container**にします。次に、**Item spacing**を**Auto**に設定します。コンテンツの長さが変わると、Figmaが利用可能なスペースをレイヤーの間に配分します。

> **Tip:** **モバイル用にアイテム間スペースの値を上書きする** この方法でデスクトップのデザインに上下に分かれたレイアウトを作る場合は、Item Spacingのモバイル用の上書き値も追加してください。上記の手順を適用したのと同じ「Column」レイヤーをクリックし、**Settings**ボタンをクリックして**Mobile Item Spacing**トグルを有効にし、任意の数値（ピクセル単位）を入力します。これで、（デスクトップでの「auto」のスペースの大きさにかかわらず）モバイルでのアイテム間スペースが一定のサイズに固定されます。

## テキストレイヤーの段落の間に縦方向のカスタムマージンを追加する {#adding-custom-vertical-margin-spacing-between-your-text-layer-paragraphs}

[Video](/assets/videos/emailify/design/paragraph-spacing.mp4)

Figmaのテキストのプロパティパネルを開き、**Basics**タブの**Paragraph spacing**の値を調整すると、Figmaのテキストレイヤーの段落の間の縦方向のスペースをカスタマイズできます。この値によって、HTMLメールの生成時に、そのテキストレイヤーのコンテンツ内の``タグに追加される`margin-bottom`の大きさが決まります。

> **Tip:** 余分な段落の行を追加している場合（たとえば、`Enter`や`Return`を2回押して1行空けた場合）、その*空の*段落もそのまま含まれ、その下にもカスタムの段落の間隔が`margin-bottom`として追加されます。段落の間隔をより細かく調整したい場合は、（上の動画のように）こうした余分な空の段落を削除することもできます。

> **Tip:** **Settings**を開いてから、Figmaで同じ種類のEmailifyレイヤーを複数選択すると、[設定を一括で適用](/ja/emailify/design/settings#apply-settings-in-bulk)できます。変更した設定は、選択したすべてのレイヤーに適用されます。