HTMLメールでGIFアニメーションを送る方法から、かんたんなGIFの作り方まで。メルマガ担当者がわかりやすく解説します

HTMLメール には、GIFアニメーションをかんたんに挿入できます。
この記事では、

• HTMLメールにGIFアニメーションを挿入する手順
• HTMLメールにGIFアニメーションを挿入する際の注意点
• たった３分でGIFアニメーションを作る方法

をご紹介します。

HTMLメールにGIFアニメーションを使いたいご担当者さまのお役に立てば幸いです。

HTMLメールにGIFアニメーションを挿入する手順

この記事では、マケフリ編集部が利用しているマーケティングオートメーション「Kairos3 Marketing」を例に、HTMLメールにGIFアニメーションを挿し込む手順をご紹介します。

みなさまがお使いのメール配信ツールやマーケティングオートメーションとUIや操作方法は少し異なると思いますが、ご参考にはしていただけるはずです。

以下は、Kairos3 MarketingのHTMLエディタ画面です。

メール内のGIFアニメーションを挿入したい場所にポインターを表示し、「画像の挿入・編集」をクリックします。

挿入したいGIFアニメーションのファイルを選びます。

「画像の管理」から、GIFアニメーションのサイズ変更ができます。

これでGIFアニメーションをHTMLメールに入れられました。

GIFアニメーションは、画像と同じ扱いなのでリンクを埋め込むことができます。

実際のメールでは、GIFアニメーションは以下のように表示されます。GIFアニメーションをクリックすると、指定したリンクにジャンプできます。

HTMLメールにGIFアニメーションを挿入する際の注意点

この章では、GIFアニメーションをHTMLメールに挿入する際の注意点をお伝えします。

GIFアニメーションの圧縮を忘れない

GIFアニメーションのデータ容量は、なるべく200KB以内に収めましょう。

GIFアニメーションのデータ容量が大きすぎると、メールが読者の受信箱に入らなかったり、メールの読み込みが上手くいかなかったりします。

GIFアニメーションの縮小は、先ほどご紹介した BANNERKOUBOU の GIFアニメのサイズ（容量）縮小 を活用すればかんたんです。20MBまでのファイルを縮小できます。

「画像選択」のボタンをクリックして、縮小したいGIFアニメーションをアップロードします。「縦横幅の縮小率」から好きな縮小率を選びます。

GIFアニメーションが表示されなくても意味が通じるメールにする

メーラーによってはGIFアニメーションが静止画として表示されたり、GIFアニメーションそのものが表示されなかったりします。

GIFアニメーションが意図した通り表示されなくても、読者に意味が伝わるメールを作るために、２つの対策を講じましょう。

１つは、GIFアニメーションが静止画として表示されても問題ないように、動かなくても意味が通じるGIFアニメーションに仕上げることです。

例えば、「５月７日締め切り」の文字を点滅させるGIFアニメーションを作る場面を想定してみましょう。

文字を点滅させたい場合、文字色を変えて点滅させるか、文字の間に空白を挟んで点滅させるかの２択です。

後者の「文字の間に空白を挟んで点滅させる」手法は使わないようにしましょう。なぜなら、GIFがうまく動かず、２枚目の「　月　日締め切り」という画像のみが表示されてしまう可能性があるからです。

もう１つは、GIFアニメーションに代替テキストを入力することです。

代替テキストとは、画像に設定するテキスト情報のことです。

代替テキストは、alt属性とも呼ばれます。代替テキストを設定しておけば、画像表示ができないときに、設定されたテキストが表示されます。マケフリ編集部が使っているマーケティングオートメーションKairos3 Marketingでも２ステップで代替テキストを入力できます。

HTMLメールに画像を挿入した際に表示される「画像の管理」の「画像の説明」を選択して、代替テキストを入力します。

これで、代替テキストが入力できました。

静止画からかんたんにGIFアニメーションを作る手順

この章では静止画からGIFアニメーションを作る方法をご紹介します。

今回の記事では、GIFアニメーションをかんたんに作成できるWebサービス「 BANNERKOUBOU 」を使います。

手順１：素材を用意する

静止画からGIFアニメーションを作るときは、異なる画像を２枚以上用意します。今回作成するGIFアニメーションは、以下の画像です。

このGIFアニメーションは、２枚のイラストから作成します。

手順２：WEBでGIFアニメーションの動きを設定する

静止画からGIFアニメーションが作れるWebサービスをご紹介します。

BANNERKOUBOU は、静止画からGIFアニメーションが作れるWEBサービスです。アップロードできる画像の上限は100枚です。

手順が全て書かれているので、かんたんにGIFアニメーションを作成できます。

また、同じサイト内でGIFアニメーションのサイズを 縮小 できるため、別ツールを使う必要がありません。

BANNERKOUBOU でGIFアニメーションを作る手順を、具体的にご紹介します。

まずアニメーションにしたい画像を用意します。

今回は、イラストを２枚用意しました。頭の上の電球をチカチカさせます。

BANNERKOUBOU のオプション設定（全体設定）から「重ね合わせる枚数」「ループの有無」「点滅間隔」を選択します。

「重ね合わせる枚数」とは、GIFアニメーションにしたい画像の数です。今回使う画像は２枚なので「10枚以内」を選択しました。

電球がチカチカする動きをループさせたいので「ループする」を選択します。点滅の間隔が長すぎると静止画に見えるため、今回は0.5秒に設定しました。

画像選択時の切り取り設定で、GIFアニメーションのサイズや比率を選べます。今回は「比率で切り取る」を選択しました。GIFアニメーションを正方形にしたいので、比率は１：１です。

手順３：画像をアップロードする

オプション設定が終わったら、次はアニメーションさせたい画像を１枚ずつアップロードします。

画像をアップロードすると、先ほど選んだ比率でトリミングができます。今回は１：１のトリミングです。

「GIFアニメを作る」をクリックします。２枚のイラストから、GIFアニメーションができました。

この確認画面を見て、OKなら「保存」でダウンロードします。

画像の枚数やアニメーションのループ設定、間隔を修正したいときは、この確認画面を下にスクロールしましょう。

先程の画面と同じ設定画面が出てくるので、数値を変更できます。

完成したGIFアニメーションがこちらです。

GIFアニメーションにする素材があれば、Webを使ってすぐに作れます。

画像をアップロードして秒数やサイズを設定するだけなので、初めてでもたった３分でできました。

参考：パワーポイントで作れる、文字がメインのGIFアニメーション

文字がメインのGIFアニメーションは、 パワーポイント で作成できます。

パワーポイントで二種類の画像を作る手順をご紹介します。

1. テキストボックスか図形ツールで長方形を作る。
2. 長方形の中に文字を入力。
3. スライドをcommand+shift+Dでコピぺし、文字の色を変える。
4. 「7月10日」の文字が赤と黒のファイルを２つ別々にJPGファイルにエクスポート。もしくは「画像として保存」する。

文字の色だけ違う画像が２枚できました。

この画像を、WebサイトでGIFアニメーションにします。

動画からかんたんにGIFアニメーションを作る手順

この章では、動画からGIFアニメーションを作る方法をご紹介します。

macの画面録画機能と、Webサイト Convertio を使います。

手順１：素材を用意する

今回作成するGIFアニメーションは、以下の画像です。

まず、GIFアニメーションにしたい動画を用意しましょう。今回は、macの画面録画機能で動画を撮影しました。

ショートカットキー「Shift＋Command+5」を押して、PCの画面を録画します。

録画した動画を、好きな長さにトリミングします。

macの録画画面については、 Appleの公式サイト に、よりくわしい方法が記載されています。

手順２：動画をアップロードする

今回は、 Convertio というサイトを使いました。

このサイトでは、動画や静止画からGIFアニメーションが作れるだけでなく、様々な形式のファイルを他のフォーマットに変換できます。

今回は、動画のmovファイルを、gifファイルに変換します。

「ファイルを選ぶ」をクリックし、GIFアニメーションの素材のファイルをアップロードします。

「変換するファイル」で「GIF」を選択します。「準備完了」の文字が出たら、「変換」をクリックしましょう。

これで、GIFアニメーションが完成しました。「ダウンロード」をクリックしてダウンロードしましょう。 Convertio での作業も数分で完了しました。

完成したGIFアニメーションはこちらです。