---
url: "/ja/emailify/design/builder.md"
description: "コンポーネントビルダーで、Emailifyのカスタムコンポーネントを作成・編集・管理します。"
---

# 独自のカスタムコンポーネントを作成する

> コンポーネントビルダーで、Emailifyのカスタムコンポーネントを作成・編集・管理します。

### 動画チュートリアル：HTMLメールのエクスポート用にカスタムコンポーネントを作成する

この動画では、メールデザインにカスタムコンポーネントを追加し、Emailifyプラグインを使ってFigmaから本番用のレスポンシブHTMLメールをエクスポートする方法を紹介します。
[Embedded media](https://www.youtube-nocookie.com/embed/vczegDic1Do)

[Video](/assets/videos/emailify/custom-component.mp4)

Emailifyに付属している基本コンポーネントで目的に合うものがない場合は、組み込みのコンポーネントビルダー機能を使って独自のカスタムコンポーネントを作成できます。

コンポーネントカテゴリのヘッダーで**Custom**タブをクリックし、**Build New Custom Component +** ボタンをクリックすると、コンポーネントビルダーが開きます。ここで、独自のコンポーネントのレイアウトとコンテンツ要素をカスタマイズできます。

構成が決まったら、**Create & Insert New Component**ボタンをクリックします。コンポーネントがFigmaのメールデザインに追加され、今後使えるように**Custom**カテゴリにも保存されます。

## 保存したカスタムコンポーネントの編集とフォーク {#editing-and-forking-your-saved-custom-components}

[Video](/assets/videos/emailify/edit-custom-component.mp4)

保存したカスタムコンポーネントを編集するには、コンポーネントカテゴリの**Custom**タブに表示されている任意のコンポーネントの横にある**Settings**アイコンボタンをクリックします。

**Update Saved Component**ボタンをクリックすると、更新したコンポーネントを元のコンポーネントに上書き保存できます。保存済みのコンポーネントは更新されますが、デザイン内ですでに使われている箇所のコンポーネントには影響せず、変更もされません。

または、**Create & Insert New Component**ボタンをクリックして、元のコンポーネントを*フォーク*し、新しいカスタムコンポーネントとして「別名で保存」することもできます。元の保存済みコンポーネントを上書きせずに、新しいカスタムコンポーネントとしてリストに保存されます。

## 保存したカスタムコンポーネントの削除 {#removing-a-saved-custom-component}

**Trash**アイコンボタンをクリックすると、保存したカスタムコンポーネントを削除することもできます。保存済みのコンポーネントは**Custom**カテゴリと**Favourites**カテゴリから削除されますが、デザイン内ですでに使われている箇所のコンポーネントは削除・変更されません。