--- url: "/ja/emailify/content/gifs.md" description: "パソコンのアニメーション.gifファイルを、インライン画像（Column内）または背景画像（Row、Hero、Wrapper）としてメールデザインに追加できます。" --- # メールデザインにアニメーションGIFを追加する > パソコンのアニメーション.gifファイルを、インライン画像（Column内）または背景画像（Row、Hero、Wrapper）としてメールデザインに追加できます。 ### 動画チュートリアル：FigmaからHTMLメールのエクスポートにアニメーションGIFを追加する この動画では、メールデザインにアニメーションGIFを追加し、Emailifyプラグインを使ってFigmaから本番用のレスポンシブHTMLメールをエクスポートする方法を紹介します。 [Embedded media](https://www.youtube-nocookie.com/embed/Jmy2Tuzzwjg) > **Warning:** アニメーションGIF画像のアップロードにはEmailify Proライセンスが必要です。 > **Note:** プラグインの無料トライアル版を使っている場合、GIFは静止画像としてアップロードされます。または、**Upload**トグルを**off**にして**Export HTML**オプションを使うと、アニメーション`.gif`ファイルをHTMLメールと一緒にローカルに保存・ダウンロードできます。 ## Columnレイヤー内にアニメーションGIFをコンテンツ画像として追加する {#add-an-animated-gif-as-a-content-image-inside-your-column-layers} [Video](/assets/videos/emailify/content/inline-animated-gif.mp4) パソコンの`.gif`ファイルを任意の**Column**レイヤーにドラッグ＆ドロップすると、Figmaの画像コンテンツレイヤーとして追加されます。 GIFの画質を保つため、レイヤーのサイズは縦横比を保ったまま変更してください（Figmaレイヤーのサイズ変更中に**Shift**キーを押し続けます）。元の縦横比を維持すると、Emailifyがエクスポートで元のGIFファイルのデータを使えます。 Figmaレイヤーの縦横比を元のGIFと異なるものに変更すると、トリミングされた画像領域に合わせるため、EmailifyがGIFのフレームを新しい`.gif`ファイルとして作り直す必要があります（HTMLメールクライアントはCSSによるトリミングに対応していないためです）。その結果、GIFのファイルサイズが大きくなり、エクスポートにも時間がかかります。 ## エクスポートしたGIFが元のGIFより大きくなるのはなぜですか？ {#why-is-my-exported-gif-larger-than-the-original-gif} FigmaでGIFレイヤーの縦横比を変更すると、エクスポートされるメールをトリミングされた画像領域に合わせるため、EmailifyはGIFのフレームを新しい`.gif`ファイルとして作り直す必要があります。HTMLメールクライアントは、Figmaのプレビューと同じようにGIFをCSSでトリミングすることに対応していないため、フレームを作り直すと最終的なファイルサイズが大きくなり、エクスポートも遅くなることがあります。 エクスポートしたGIFのファイルサイズを元のファイルに近づけるには、GIFのサイズを縦横比を保ったまま変更し、元の縦横比を維持してください。 > **Tip:** プラグインヘッダーのSettingsボタンから、画像に[代替テキスト](/ja/emailify/content/alt-text)属性を設定したり、[クリック可能なURLリンク](/ja/emailify/content/link-images)を追加したりできます。 > **Note:** Emailifyは、GIFの背景が透明かどうかを自動的に検出しようとします。GIFに透明部分が必要なのにプラグインが検出しない場合は、Figmaレイヤー名のどこかに**Transparent**という単語を追加してください（例：`My Layer Name - Transparent`）。これで、背景の透明を有効にした状態で強制的にエクスポートされます。 GIFファイル形式が対応している不透明度は0%か100%のどちらかだけで、その中間はありません。つまり、完全に不透明で見える要素の背後を、完全に透明な背景にしたアニメーションGIFは作れます。そのため、レイヤーは完全に透明か、そうでないかのどちらかになります。不透明度が50%未満のレイヤーは透明に、50%を超えるレイヤーは不透明になります。 ## Row、Hero、WrapperレイヤーにアニメーションGIFを背景画像として追加する {#add-an-animated-gif-as-a-background-image-on-a-row-hero-or-wrapper-layer} [Video](/assets/videos/emailify/content/gif-background-image.mp4) *実際の*リッチテキストコンテンツの背後にアニメーションGIFを背景画像として使う場合は、パソコンの`.gif`ファイルを任意のRow、Hero、WrapperフレームのFigmaの塗りにドラッグします。これで、フレームの背景に画像塗りとして設定されます。このフレームに追加したFigmaの塗り（カラーやグラデーションのオーバーレイなど）も、最終的な`.gif`エクスポートに含まれます。 この方法の利点は、フレーム内のコンテンツレイヤーが、HTMLメールのエクスポートでもアニメーションGIFの背景の上に個別のリッチコンテンツレイヤーとして表示されることです。 > **Note:** Emailifyは、GIFの背景が透明かどうかを自動的に検出しようとします。GIFに透明部分が必要なのにプラグインが検出しない場合は、Figmaレイヤー名のどこかに**Transparent**という単語を追加してください（例：`My Layer Name - Transparent`）。これで、背景の透明を有効にした状態で強制的にエクスポートされます。 GIFファイル形式が対応している不透明度は0%か100%のどちらかだけで、その中間はありません。つまり、完全に不透明で見える要素の背後を、完全に透明な背景にしたアニメーションGIFは作れます。そのため、レイヤーは完全に透明か、そうでないかのどちらかになります。不透明度が50%未満のレイヤーは透明に、50%を超えるレイヤーは不透明になります。 > **Warning:** **OutlookでのアニメーションGIF：** ほとんどのメールクライアントは[アニメーションGIFに対応](https://www.caniemail.com/features/image-gif/)していますが、Outlook *2019以前*ではアニメーションが再生されず、GIFの**最初のフレーム**だけが表示されます。静的な代替表示としても機能するよう、最初のフレームに重要な画像やテキストを入れてください。**Office 365のOutlook**では、GIFが自動的に*3回*再生されたあと一時停止し、*再生ボタン*で再生し直せます。