---
url: "/ja/emailify/design/presets.md"
description: "メールにレイアウトコンポーネントを追加し始める最も手早い方法は、よく使われるデザインコンポーネントをEmailifyプラグインから直接追加することです。"
---

# メールにEmailifyのスターターコンポーネントを追加する

> メールにレイアウトコンポーネントを追加し始める最も手早い方法は、よく使われるデザインコンポーネントをEmailifyプラグインから直接追加することです。

[Video](/assets/videos/emailify/design/add-preset-components.mp4)

Emailifyプラグインで使えるコンポーネントを見るには、プラグインのヘッダーバーの下にあるカテゴリのタブをクリックします。各タブをクリックすると、そのカテゴリに含まれるコンポーネントが表示され、上下にスクロールして、選択したタブ内のサブカテゴリを見ながら探せます。

> **Note:** プリセットから追加したRowの順序を変更するには、（Auto Layoutが有効になっている）Emailifyのコンテナフレーム内で、そのRowを上下にドラッグして位置を変えます。

## 外部コンポーネントライブラリを閲覧する {#browsing-the-external-component-library}

### 動画チュートリアル：Figmaのデザインで500以上の無料HTMLメールコンポーネントを使う

この動画では、EmailifyのFigmaプラグインを使って、Figmaのデザインで500以上の無料HTMLメールコンポーネントを使う方法を解説します。
[Embedded media](https://www.youtube-nocookie.com/embed/zMUQ3tE76Vo)

[Video](/assets/videos/emailify/design/external-component-library.mp4)

Emailifyプラグインに組み込まれているコンポーネントに加えて、EmailifyのWebアプリから外部コンポーネントライブラリのコンポーネントを閲覧して使うこともできます。これにより、Figmaのデザインに直接コピーできる、より幅広い既成のメールコンポーネントを利用できます。

外部ライブラリのコンポーネントを使うには：

1. [EmailifyのWebアプリ](https://emailify.hypermatic.com)にアクセスして、利用できるメールコンポーネントのカタログ全体を閲覧します
2. カテゴリやテンプレートでの使用状況でコンポーネントを絞り込むか、特定の要素を検索します
3. 任意のコンポーネントの**Copy Figma Component**ボタンをクリックして、そのHTMLスニペットをクリップボードにコピーします
4. Figmaで、コンポーネントを貼り付けたいEmailifyフレームを選択します
5. **Cmd+V**（Mac）または**Ctrl+V**（Windows）で、コンポーネントをEmailifyフレームに直接貼り付けます

貼り付けたコンポーネントは自動的にメールデザインに組み込まれ、ほかのEmailifyコンポーネントと同じようにカスタマイズできます。

> **Note:** 外部コンポーネントは、EmailifyのAuto Layoutの構造を使っています。順序を変えるには、Emailifyのコンテナフレーム内でコンポーネントを上下にドラッグします。

## スターターコンポーネントのカテゴリ {#starter-component-categories}

Emailifyでは、メールデザインに必要なものを探しやすいように、コンポーネントをいくつかのカテゴリ（とサブカテゴリ）に分けています。

### Headers {#headers}

主にメールの上部で使われます。ブランドロゴ、「ブラウザで表示」リンク、ナビゲーションメニュー、ソーシャルアイコンなどのコンポーネントがあります。

### Images {#images}

画像コンテンツを表示するためのコンポーネントです。幅いっぱいの画像、（上にテキストを重ねるための）背景画像、ロゴグリッド、画像カード、グリッド、キャプションなどのコンポーネントがあります。

### Content {#content}

段落、引用、お客様の声、著者のアバター、記事カード、機能アイコン、統計、プロモーションコード、商品カードなど、テキストベースのコンポーネントが含まれます。

### Ecomm（Eコマース） {#ecomm-e-commerce}

商品や購入完了後のメールに関連する要素を表示するのによく使われるコンポーネントのほか、Klaviyoで動的な商品グリッドを表示するためのKlaviyo専用のコンポーネントも含まれます。

### CTAs（Call To Action） {#ctas-call-to-action}

主に、ユーザーに何かをクリックしたり行動を起こしたりしてもらうためのコンポーネントです。ボタン、リンク、背景画像付きのヒーロー、動画のサムネイル、機能タイル、アプリストアのボタン、ソーシャルメディアのアイコン、商品のヒーローなどのコンポーネントがあります。

### Footer {#footer}

主にメールの下部で使われます。ブランドロゴや住所の詳細、ソーシャルメディアのリンク、配信停止リンク、アプリのダウンロードボタンを表示するためのコンポーネントがあります。

> **Tip:** ほかのカテゴリで追加したコンポーネントは、あとで簡単にアクセスできるように、自動的にFavouritesカテゴリに「ブックマーク」されます。**Trash**アイコンをクリックすると、お気に入りからコンポーネントを削除することもできます。この操作ではお気に入りの一覧からコンポーネントが削除されるだけで、ほかのカテゴリからは「削除」されません。