メールデザインにアニメーションGIFを追加する

パソコンのアニメーション.gifファイルを、インライン画像（Column内）または背景画像（Row、Hero、Wrapper）としてメールデザインに追加できます。

動画チュートリアル：FigmaからHTMLメールのエクスポートにアニメーションGIFを追加する

この動画では、メールデザインにアニメーションGIFを追加し、Emailifyプラグインを使ってFigmaから本番用のレスポンシブHTMLメールをエクスポートする方法を紹介します。

アニメーションGIF画像のアップロードにはEmailify Proライセンスが必要です。

プラグインの無料トライアル版を使っている場合、GIFは静止画像としてアップロードされます。または、UploadトグルをoffにしてExport HTMLオプションを使うと、アニメーション.gifファイルをHTMLメールと一緒にローカルに保存・ダウンロードできます。

Columnレイヤー内にアニメーションGIFをコンテンツ画像として追加する ​

パソコンの.gifファイルを任意のColumnレイヤーにドラッグ＆ドロップすると、Figmaの画像コンテンツレイヤーとして追加されます。

GIFの画質を保つため、レイヤーのサイズは縦横比を保ったまま変更してください（Figmaレイヤーのサイズ変更中にShiftキーを押し続けます）。元の縦横比を維持すると、Emailifyがエクスポートで元のGIFファイルのデータを使えます。

Figmaレイヤーの縦横比を元のGIFと異なるものに変更すると、トリミングされた画像領域に合わせるため、EmailifyがGIFのフレームを新しい.gifファイルとして作り直す必要があります（HTMLメールクライアントはCSSによるトリミングに対応していないためです）。その結果、GIFのファイルサイズが大きくなり、エクスポートにも時間がかかります。

エクスポートしたGIFが元のGIFより大きくなるのはなぜですか？ ​

FigmaでGIFレイヤーの縦横比を変更すると、エクスポートされるメールをトリミングされた画像領域に合わせるため、EmailifyはGIFのフレームを新しい.gifファイルとして作り直す必要があります。HTMLメールクライアントは、Figmaのプレビューと同じようにGIFをCSSでトリミングすることに対応していないため、フレームを作り直すと最終的なファイルサイズが大きくなり、エクスポートも遅くなることがあります。

エクスポートしたGIFのファイルサイズを元のファイルに近づけるには、GIFのサイズを縦横比を保ったまま変更し、元の縦横比を維持してください。

プラグインヘッダーのSettingsボタンから、画像に代替テキスト属性を設定したり、クリック可能なURLリンクを追加したりできます。

Emailifyは、GIFの背景が透明かどうかを自動的に検出しようとします。GIFに透明部分が必要なのにプラグインが検出しない場合は、Figmaレイヤー名のどこかにTransparentという単語を追加してください（例：My Layer Name - Transparent）。これで、背景の透明を有効にした状態で強制的にエクスポートされます。

GIFファイル形式が対応している不透明度は0%か100%のどちらかだけで、その中間はありません。つまり、完全に不透明で見える要素の背後を、完全に透明な背景にしたアニメーションGIFは作れます。そのため、レイヤーは完全に透明か、そうでないかのどちらかになります。不透明度が50%未満のレイヤーは透明に、50%を超えるレイヤーは不透明になります。

Row、Hero、WrapperレイヤーにアニメーションGIFを背景画像として追加する ​

実際のリッチテキストコンテンツの背後にアニメーションGIFを背景画像として使う場合は、パソコンの.gifファイルを任意のRow、Hero、WrapperフレームのFigmaの塗りにドラッグします。これで、フレームの背景に画像塗りとして設定されます。このフレームに追加したFigmaの塗り（カラーやグラデーションのオーバーレイなど）も、最終的な.gifエクスポートに含まれます。

この方法の利点は、フレーム内のコンテンツレイヤーが、HTMLメールのエクスポートでもアニメーションGIFの背景の上に個別のリッチコンテンツレイヤーとして表示されることです。

Emailifyは、GIFの背景が透明かどうかを自動的に検出しようとします。GIFに透明部分が必要なのにプラグインが検出しない場合は、Figmaレイヤー名のどこかにTransparentという単語を追加してください（例：My Layer Name - Transparent）。これで、背景の透明を有効にした状態で強制的にエクスポートされます。

GIFファイル形式が対応している不透明度は0%か100%のどちらかだけで、その中間はありません。つまり、完全に不透明で見える要素の背後を、完全に透明な背景にしたアニメーションGIFは作れます。そのため、レイヤーは完全に透明か、そうでないかのどちらかになります。不透明度が50%未満のレイヤーは透明に、50%を超えるレイヤーは不透明になります。

OutlookでのアニメーションGIF： ほとんどのメールクライアントはアニメーションGIFに対応していますが、Outlook 2019以前ではアニメーションが再生されず、GIFの最初のフレームだけが表示されます。静的な代替表示としても機能するよう、最初のフレームに重要な画像やテキストを入れてください。Office 365のOutlookでは、GIFが自動的に3回再生されたあと一時停止し、再生ボタンで再生し直せます。