---
url: "/ja/emailify/design/import.md"
description: "Emailifyの実験的なImportタブを使って、既存のHTMLやMJMLをFigmaで編集できるメールレイヤーに変換します。"
---

# HTMLメールとMJMLメールのインポート

> Emailifyの実験的なImportタブを使って、既存のHTMLやMJMLをFigmaで編集できるメールレイヤーに変換します。

**New Email**の**Import**タブを使うと、すべてのRowとColumnをゼロから作るのではなく、既存のメールのコードから始められます。HTMLやMJMLを貼り付けるかファイルを選択し、ソースを確認してから、編集可能なEmailifyフレームを作成します。

> **Note:** Importは実験的な機能で、現在はローカルで有効にした開発ビルドでのみ利用できます。通常のプラグインのビルドでは表示されません。以下の手順は、**New Email**モーダルに**Import**がある場合に適用されます。

## 対応しているソース {#supported-sources}

- **HTML：** メールのHTMLを貼り付けるか、`.html`または`.htm`ファイルを選択します。
- **MJML XML：** 完全な``ドキュメントを貼り付けるか、`.mjml`または`.xml`ファイルを選択します。
- **MJML JSON：** 標準的なMJMLのコンポーネントツリーを貼り付けるか、`.json`ファイルを選択します。
- **コピーしたメールパッケージ：** 実験的な**Copy to Emailify**拡張機能からパッケージを貼り付けます。

入力は**2 MB**未満にしてください。MJMLも、コンパイル後のHTMLがこの上限内に収まる必要があります。`.eml`メッセージ、ZIPファイル、任意のJSONには対応していません。`.eml`メッセージの場合は、インポートする前にHTML本文を抽出し、画像アセットにアクセスできるようにしてください。

アクセス可能な画像URLを使ってください。ログインが必要な画像、ローカルファイル、`cid:`などの添付ファイル参照は、ホスティングされたアセットに置き換える必要がある場合があります。

> **Tip:** 試しにインポートするメールを探していますか？[Really Good Emails](https://reallygoodemails.com/)でメールを開き、**Code**を選択するとHTMLソースを表示できます。そのHTMLをコピーして、**Import**タブにあるEmailifyの**Email code**欄に貼り付け、**Preview Import**をクリックすると、メールを作成する前に内容を確認できます。

## メールをインポートする {#import-an-email}

1. FigmaでEmailifyを開きます。
2. メール選択欄の横にある **+** アイコンをクリックして、**New Email**を開きます。
3. タブの並びの最後にある**Import**を選択します。
4. メールのコードを**Email code**に貼り付け、**Preview Import**をクリックします。または、**Choose file**をクリックして、対応しているファイルを読み込んで解析します。
5. **Preview**と**Notes**（ある場合）を確認します。想定しているテキスト、画像、背景がソースに含まれているかを確認してください。
6. **Email name**を入力し、**Create Email**をクリックします。
7. 作成されたEmailifyフレームと、その編集可能なレイヤーを確認します。
8. エクスポートする前に、[EmailifyのHTMLプレビュー](/ja/emailify/design/preview)で、生成されたデスクトップとモバイルの出力を確認します。

> **Warning:** Importパネルでプレビューされるのはソースのメールです。再構築されたEmailifyレイヤーからエクスポートされる最終的なHTMLは表示されません。作成されたフレームとEmailifyが生成するプレビューは、必ず別々に確認してください。

ソースを編集すると、それまでのインポートの準備内容はクリアされます。更新したメールを作成する前に、もう一度**Preview Import**をクリックしてください。

## MJMLをインポートする {#import-mjml}

`mj-body`を1つだけ含む、完全なMJMLドキュメントを1つ用意します。例：

```xml

        Hello from Emailify

```

同じ内容をJSONで表す場合は、`tagName`、`attributes`、`children`、`content`を使います。

```json
{
  "tagName": "mjml",
  "children": [{
    "tagName": "mj-body",
    "attributes": { "width": "600px" },
    "children": [{
      "tagName": "mj-section",
      "children": [{
        "tagName": "mj-column",
        "children": [{ "tagName": "mj-text", "content": "Hello from Emailify" }]
      }]
    }]
  }]
}
```

Emailifyは**MJML4**を使ってMJMLを検証し、HTMLにレンダリングしてから、そのHTMLをもとに編集可能なレイヤーを再構築します。元のMJMLのコンポーネントツリーをそのまま復元するものではありません。インポート後に、カスタムCSS、フォント、スペース、レスポンシブの挙動を確認してください。

- インポートする前に、`mj-include`の内容をインライン化してください。インクルードされたファイルは読み込まれません。
- `mj-raw`は編集可能なMJMLコンポーネントに置き換えるか、レンダリングされたHTMLをインポートして確認してください。
- MJMLのアコーディオンやカルーセルは静的なバージョンを使ってください。インタラクティブなコンポーネントは、編集可能な形でのインポートに対応していません。
- XMLのDOCTYPE宣言とエンティティ宣言を削除してください。無効なコンポーネント構造や属性は、修正してから再試行してください。

## 結果を確認する {#check-the-result}

作成したメールをソースと比較し、デスクトップと、**375px**などの狭いモバイル幅で確認します。すべてのテキスト、画像、背景画像、ボタン、リンク先を確認してから、カラムの縦積み、折り返し、パディングを確認してください。

Importは、ソースをEmailifyが対応しているレイアウト構造に対応付けようとします。複雑なネスト、カスタムCSS、利用できないアセットがある場合は、手動での調整が必要になることがあります。ソースの準備が成功しても、見た目の完全な一致や、すべてのメールクライアントでの配信時の挙動が保証されるわけではありません。

準備に失敗した場合は、**Notes**を開いて報告された問題を確認します。ソースを修正するか、アクセスできないアセットを置き換えてから、もう一度プレビューしてください。作成されたレイアウトに調整が必要な場合は、[Row](/ja/emailify/design/rows)、[Column](/ja/emailify/design/columns)、[レスポンシブ設定](/ja/emailify/design/responsive)を使い、そのあと[メールのテストガイド](/ja/emailify/export/testing)に従ってください。