---
url: "/ja/emailify/export/images.md"
description: "エクスポートした画像ファイルは、自分でホスティングすることも、EmailifyのCDNに自動でアップロードすることもできます。"
---

# エクスポートしたメール画像をホスティングする

> エクスポートした画像ファイルは、自分でホスティングすることも、EmailifyのCDNに自動でアップロードすることもできます。

## Emailifyの画像ホスティングCDNを使う（初期設定） {#using-the-emailify-image-hosting-cdn-default}

[Video](/assets/videos/emailify/export/upload-image-urls.mp4)

HTMLエクスポートでは、初期設定でEmailifyは画像を`.html`ファイルと同じ場所に保存してHTMLメールをエクスポートします。画像は好きな場所にアップロードできます。

ただし、EmailifyのCDN（コンテンツデリバリーネットワーク）で画像をホスティングしたい場合は、**Upload Hosted Image URLs**トグルを有効にします。画像がアップロードされ、HTMLメール内のURLがアップロードしたファイルを指すように自動で差し替えられます。

> **Note:** 組み込みのメールマーケティングプラットフォームとの[連携](/ja/emailify/integrations)を使っている場合は、画像が自動的にEmailifyのCDNにアップロードされます。

### ホスティングした画像が元のファイルより大きくなる理由 {#why-a-hosted-image-can-be-larger-than-the-source-file}

Emailifyは、エクスポートするメールで使う画像のバイトデータをレンダリングし、生成したPNGまたはJPGを最適化してから、その同じファイルをエクスポートに追加し、有効な場合はアップロードします。ホスティングで変わるのはURLだけで、別途圧縮処理が行われるわけではありません。

Figmaから提供されるのは、アップロードした元のファイルではなくレンダリングされたエクスポート用のバイトデータです。そのため、ホスティングされるファイルは元のJPGやPNGとバイト単位で同一のコピーにはなりません。サイズが異なることがあり、大きくなる場合もあります。結果のサイズを小さくするには、エクスポートする前に、適切なサイズのソースレイヤーと適した画像形式を使ってください。このワークフローでは、Emailifyは元のファイルの圧縮されたバイトデータをそのまま保持することはできません。

## 独自にホストするクラウドストレージのバケットに画像アセットをアップロードする {#uploading-image-assets-to-your-own-self-hosted-cloud-storage-bucket}

[Video](/assets/videos/emailify/export/webook-image-bucket-selector.mp4)

初期設定では、EmailifyはEmailifyのCDN（コンテンツデリバリーネットワーク）を使って画像をホスティングしますが、必要に応じて独自のクラウドストレージサービスのバケット（たとえば[AWS S3](https://aws.amazon.com/s3/)や[Backblaze B2](https://www.backblaze.com/cloud-storage)）に切り替えることもできます。

使いたい画像ホスティングサービスを選択したら、以下のバケットの認証情報と詳細を入力する必要があります。エクスポート時に、画像アセットが自分のバケットに自動でアップロードされます（HTMLの``タグの`src`属性には、バケットの画像パスが使われます）。

- Region（例：`us-east-1`）
- Access Key（例：`003g8...`）
- Secret Access Key（例：`K454q...`）
- Bucket Name（例：`my-emailify-bucket`）
- Bucket URL（例：`https://my-emailify-bucket.s3.us-east-1.amazonaws.com/`）

> **Tip:** 作成するバケットの閲覧権限は、必ず**Public**アクセスに設定してください。そうしないと、HTMLメールを送信したときに、アップロードした画像のURLにアクセスできません。

### Cloudflare R2のアドレス {#cloudflare-r2-addresses}

R2では2つの異なるアドレスを使います。画像ホスティングの設定で両方を入力してください。

- **S3 API endpoint:** Cloudflareアカウントからエンドポイント（例：`https://accountid.r2.cloudflarestorage.com`）をコピーします。Cloudflareに`.eu`などの管轄区域のセグメントが表示されている場合は、それも残してください。バケット名は**R2 Bucket Name**に入力します。
- **公開画像URL：** バケットに接続したカスタムドメイン（例：`https://images.example.com/`）か、有効にした公開用の`r2.dev`のURLを使います。S3 APIエンドポイントは認証が必要なため、メール内の公開画像URLとしては使えません。

以前にS3 APIエンドポイントをURL欄に保存していた場合、Emailifyはそれを**S3 API endpoint**に移動します。再度エクスポートする前に、公開画像URLを追加してください。公開ドメインを保存済みの場合はそのまま保持されるので、APIエンドポイントが未入力であれば別途追加してください。アクセスキーとバケット名はそのまま保持されます。

Cloudflareの[S3 APIエンドポイントのガイド](https://developers.cloudflare.com/r2/api/)と[公開バケットへのアクセスのガイド](https://developers.cloudflare.com/r2/buckets/public-buckets/)をご覧ください。

### Mailchimpの画像ホスティングのエラー {#mailchimp-image-hosting-errors}

Mailchimpに直接エクスポートする場合、Emailifyは画像フォルダ、既存のファイル、アップロードした画像のURLを確認します。Mailchimpが画像のリクエストを拒否した場合、エクスポートはエラーを報告し、確認できていない画像URLのままテンプレートを作成することはありません。Mailchimpとの接続とAPIキーを確認してから、もう一度エクスポートしてください。

### Emailifyで対応している、独自にホストするクラウドストレージサービス {#supported-self-hosted-cloud-storage-service-options-in-emailify}

Emailifyからエクスポートした画像は、以下のS3互換のオブジェクトストレージサービスで自分でホスティングできます。

- [Amazon AWS S3](https://aws.amazon.com/s3/)
- [Backblaze B2](https://www.backblaze.com/cloud-storage)
- [Cloudflare R2](https://www.cloudflare.com/en-au/developer-platform/products/r2/)
- [Wasabi](https://wasabi.com/)
- [Google Cloud Storage](https://cloud.google.com/storage)
- [DigitalOcean Spaces](https://www.digitalocean.com/products/spaces)
- [Vultr](https://docs.vultr.com/products/cloud-storage/object-storage)
- [Tencent Cloud Object Storage](https://www.tencentcloud.com/product/cos)

## カスタムのベースURLを設定して、エクスポートしたメール画像を独自のサーバーやCDNでホスティングする {#setting-a-custom-base-url-to-self-host-the-exported-email-images-on-your-own-server-or-cdn}

初期設定では、EmailifyがエクスポートしたHTML内のすべての画像のsrcは、相対パスのimg/になります（例：`img/ceb3f891b78815897e04299f93eef255.jpg`）。これにより、メールを確認したうえで、MailChimpなどの一部のプラットフォームにzipをアップロードできます。そうしたプラットフォームでは、画像が自動でアップロードされ、srcのURLも更新されます。

ただし、この機能に対応していないプラットフォームを使っている場合や、独自のサーバーで画像をホスティングしているだけの場合は、代わりに独自のカスタムベースURLを設定するとよいでしょう。

### メールごとのカスタムベースURL {#per-email-custom-base-url}

[Video](/assets/videos/emailify/export/set-base-image-url.mp4)

個々のメールにカスタムベースURLを設定するには、メインのメールのFigmaフレームを選択し、プラグインのヘッダーにあるSettingsボタンをクリックして、**Override "img/" Base Path**トグルを有効にし、画像をホスティングする場所のベースURLパスを貼り付けます。カスタムベースURLを有効にすると、すべての画像のsrc属性の先頭に自動でそのURLが付加されます（たとえば、エクスポートしたHTMLファイル内の`img/`が`https://your-custom-server.com/image/path/here/`に置き換わります）。

このメールごとの設定は、特定のキャンペーンで異なるベースURLが必要な場合や、個々のメールでグローバルなCDN設定を上書きしたい場合に最適です。

### グローバルなカスタムCDNベースURL {#global-custom-cdn-base-url}

すべてのメールで同じカスタムCDNやサーバーに画像をホスティングしている場合は、メールごとに設定する代わりに、グローバルなカスタムベースURLを設定できます。

1. エクスポート設定パネルでCDNのドロップダウンメニューを見つけます
2. CDNのオプション一覧から**Custom Base Image Path URL**を選択します
3. 表示された入力欄にカスタムベースURLを入力します（例：`https://cdn.example.com/images/`）
4. これで、エクスポートするすべてのメールで、このベースURLが画像パスに標準で使われます

グローバルなカスタムCDN設定を使うと、メールキャンペーン全体で画像のホスティングを手軽に統一できます。グローバルとメールごとの両方のカスタムベースURLが設定されている場合はメールごとの設定が優先されるため、特定のキャンペーンで必要に応じてグローバルなCDNを柔軟に上書きできます。

> **Note:** グローバルとメールごとのどちらの設定を使う場合でも、カスタムベースURLが一般に公開されてアクセスできること、必要に応じてCORSが正しく設定されていることを確認してください。URLの末尾のスラッシュはあってもなくても構いません。Emailifyはどちらの形式も正しく処理します。

### エクスポートしたHTMLメールで画像が表示されないのはなぜですか？ {#why-are-images-not-rendering-in-my-exported-html-email}

送信後にメールの画像が表示されない原因は、通常、画像ファイルが公開されたオンラインのURLでホスティングされていない、HTMLを書き換えるツールからメールが送信された、または受信者のメールクライアントが外部画像をブロックした、のいずれかです。

ローカルの`img/`パスでHTMLをエクスポートした場合、画像は`.html`ファイルの隣に保存されるため、メールテンプレートと一緒にアップロードするか、別途ホスティングする必要があります。**Upload Hosted Image URLs**を有効にすると、Emailifyが画像をアップロードし、HTML内の画像URLをホスティング先のリンクに自動で差し替えます。

### ローカルでは画像が表示されるのに、送信後に表示されないのはなぜですか？ {#why-do-images-work-locally-but-not-after-sending}

ローカルのHTMLプレビューでは、コンピューター上のエクスポートされた`img/`フォルダから画像を読み込めます。メールを送信すると、受信者は送信者のコンピューター上のファイルにはアクセスできないため、画像をオンラインでホスティングするか、ESPからアップロードする必要があります。

GmailやOutlookは、マークアップを変更してしまうことがあり、大量配信用のHTMLメールのワークフローで必要な画像のホスティングにも対応していないため、エクスポートしたカスタムHTMLの送信手段としては信頼できません。代わりに、ESPかEmailifyの組み込みの連携を使ってください。

### エクスポートした画像が壊れている場合、まず何を確認すればよいですか？ {#what-should-i-check-first-if-exported-images-are-broken}

- 画像が公開された`https://`のURLでホスティングされていることを確認するか、エクスポートした`img/`フォルダをESPからアップロードします。
- Emailifyに画像アセットをアップロードさせたい場合は、**Upload Hosted Image URLs**を有効にします。
- カスタムのバケットやCDNを使っている場合は、アップロードした画像のURLに対してバケットが公開の読み取りアクセスを許可していることを確認します。
- アップロードに失敗する場合は、VPN、ファイアウォール、プロキシ、社内ネットワークがアップロードのリクエストをブロックしていないか確認します。
- エクスポートする前に、ファイル内のFigmaの画像の読み込みが完了するまで待ちます。
- 一部のメールクライアントでは、受信者が表示を選択するまで外部画像がブロックされることに留意してください。

### カスタムホスティングの接続エラー {#custom-hosting-connection-errors}

Amazon S3の場合、Emailifyは選択した**Region**と**Bucket Name**からアップロード用のエンドポイントを構築します。**Bucket URL**は、エクスポートしたメール内の画像に使われる公開ベースURLです。これを変更しても、アップロード用のエンドポイントは変わりません。

バケット名は、アカウントIDやリージョンのサフィックスも含めて完全な名前を入力してください。たとえば、`my-email-images-123456789012-ap-southeast-2-an`という名前のアカウントリージョナルバケットでは、リージョンに`ap-southeast-2`、バケットURLに`https://my-email-images-123456789012-ap-southeast-2-an.s3.ap-southeast-2.amazonaws.com/`を使います。[AWSはグローバルなバケット名とアカウントリージョナルなバケット名の両方に対応しています](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html)。

画像をアップロードするには、アクセスキーに紐づくIAMアイデンティティに、`arn:aws:s3:::YOUR-BUCKET-NAME/*`に対する`s3:PutObject`の権限が必要です。Emailifyには、公開の書き込みアクセスや、バケットを作成・削除する権限は必要ありません。ただし、AWSのポリシーや暗号化設定による追加の制限によって、アップロードが妨げられることはあります。[AWSの権限に関するガイド](https://docs.aws.amazon.com/AmazonS3/latest/userguide/security_iam_service-with-iam.html)をご覧ください。

また、エクスポートした画像のURLは、サインインせずに読み取れる必要があります。公開用の画像バケットか、バケットを基盤とする公開CDNを使い、アップロードした画像のURLを1つ、ブラウザのプライベートウィンドウで開いて確認してください。無関係な非公開ファイルは別のストレージに分けて保管し、メール画像を表示するためにそれらを公開しないでください。

エクスポートで**Image hosting failed**と表示された場合は、接続や権限の問題を解決してから、もう一度エクスポートしてください。メールテンプレートのアップロードに成功しても、画像のアップロードに成功したとは限りません。エラーが解決しない場合は、アクセスキーやシークレットキーを含めずに、エラーメッセージまたはスクリーンショットを[サポート](mailto:adam@hypermatic.com)までお送りください。