MailChimpにメールをアップロードする

EmailifyにはMailChimpとの連携機能が組み込まれており、FigmaプラグインからHTMLメールをMailChimpのテンプレートに直接アップロードできます。

動画チュートリアル：MailChimpにメールをアップロードする

この動画では、FigmaのEmailifyプラグインからMailChimpにHTMLメールをアップロードする方法を紹介しています。

テキストの段落でMailchimpのマージタグのリンク（例：*|UNSUB|*）が必要な場合、Figma標準のリンク欄では無効なURLとしてブロックされます。これを回避するには、代わりにEmailify独自のMailchimp用リンク形式https://mailchimp.invalid/?*|UNSUB|*を使ってください。エクスポートしたHTMLには、Mailchimpのマージタグがそのまま出力されます。

Emailifyのエクスポートパネルで、ドロップダウンリストからMailChimp (API) オプションを選択し、有効なMailChimpのAPIキーを貼り付けます。APIキーは、MailChimpのアカウント設定ページで生成できます。

準備ができたら、Upload To MailChimpボタンをクリックすると、Figmaで選択したメールのHTMLへのエクスポートが始まり、MailChimpのテンプレートページに自動でアップロードされます（このページには、MailChimpのダッシュボードのメニューでContent、Email templatesの順にクリックしてもアクセスできます）。

MailChimpのキャンペーンエディターで画像を編集可能にする ​

デフォルトでは、アップロード後のHTMLテンプレートのテキストコンテンツ領域と行は、MailChimpのキャンペーンエディターで編集できます。Emailifyのエクスポート設定でEditable Imagesトグルを有効にすると、画像も編集可能にできます。

画像を編集可能にすると、（@2xのRetina画像ではなく）@1xの画像が使われます。 Editable Imagesトグルを使うと、テンプレート内の画像をMailChimpで編集可能にできますが、残念ながらMailChimpは編集可能な@2xのRetina画像に対応していないため、画像は@1xになります。編集はできなくても@2xのRetina画像を使いたい場合は、このオプションをオフのままにしてください。

MailChimpのエディターで画像がぼやける（テンプレートが編集可能な場合） ​

残念ながらMailChimpは編集可能な@2xのRetina画像に対応していないため、Editable Imagesトグルを有効にしている場合、画像は@1xの解像度でエクスポートされます。編集はできなくても@2xのRetina画像を使いたい場合は、Editable Imagesトグルをオフのままにしてください。

ローカルの.zipエクスポートをMailChimpに手作業でアップロードする（MailChimp APIを使わない場合） ​

.zipファイルのアップロードでメールテンプレートをMailChimpに手作業でアップロードしたい場合は、Export HTMLのドロップダウンリストからMailChimp (Zip) オプションを選択し、Export For MailChimpボタンをクリックします。

エクスポート処理が終わったら、Download your .zip fileボタンをクリックしてファイルをパソコンに保存し、解凍します。解凍したメインフォルダ内の _zips (For upload to MailChimp) フォルダにある.zipファイルをアップロードできます（上の動画を参照してください）。

MailChimpによるHTMLの書き換えとGmailでの表示 ​

MailChimpは、アップロードされたHTMLメールテンプレートを送信前に自動で書き換えます。この変更は強制的に適用され、無効にすることはできません。

確認されている書き換えには、次のようなものがあります。

  • まとめて記述された@mediaクエリのブロックを、複数の個別のメディアクエリに分割する
  • CSSルールを書き換えたり、構成を変えたりする
  • 一部のCSSセレクターから"（引用符）を削除する（例：a[href^="tel:"]がa[href^=tel:]になる）

これらの変更は、特にGmailで予期しない影響を及ぼすことがあります。GmailのCSSパーサーは厳格で、無効なセレクターやプロパティが1つでもあると、<style>タグ内のすべてのスタイルを無視します。その結果、カラムの幅が反映されなかったり、レイアウトが意図せず縦に並んだりすることがあります。

Emailifyでは、プラグインからのエクスポート時に、既知の問題を避けるためのMailChimp向けの回避策をできる限り適用しています。ただし、これらの書き換えはHTMLのアップロード後に行われるため、一部の動作は当社では制御できません（独自のカスタムCSSを追加している場合は特にそうです）。

MailChimp経由で送信した際にGmail特有のレイアウトの問題が起きる場合、Figmaからエクスポートした元のHTMLではなく、こうしたテンプレートの自動変換が原因である可能性が非常に高いです。