ある日、届いたメルマガを見ていたら…
「え、なにこれカワイイ！！！！！！」
UberEatsの公式サイトはこちら
GIFアニメーションを使った動くメルマガは珍しかったので「UberEatsのメルマガはおしゃれだ！」と印象に残り、届くとついチェックするようになりました。
GIFアニメーションは、目立つだけでなく
| ・ついメルマガを読み進めてしまう ・次のメルマガも読んでしまう ・メルマガのファンになる |
という効果があります。
でも「どうやって作るの？」「難しそう…」と思いますよね。
この記事では、初心者でも簡単にGIFアニメーションを作って、HTMLメールに挿入する方法をやさしく解説します！
コンビーズメール
デザイン性と操作性に優れ、
AIが配信をサポート
コンビーズメールライト
初心者にもやさしい
シンプル機能と安心の配信
コンビーズメールプラス
低価格で直感的に使える
本格マーケティング機能
GIFアニメーションと動画の違い
メールにもっと動きをつけるのなら「動画を入れればもっと伝わるのでは？」と思うかもしれません！
しかし、実は動画ファイル（MP4など）は、ほとんどのメールソフトで再生することができません。
再生ボタンを押してもらう以前に、埋め込むこと自体が難しく、結局は外部サイトへ誘導する形になりがちです。
| 比較項目 | GIFアニメーション | 動画（MP4など） |
| 再生方法 | 自動で動く（再生ボタン不要） | 再生ボタンを押す必要あり外部サイトへの誘導でしか再生できない埋め込みできない |
| メールでの対応状況 | 多くのメールソフトで再生可能（Gmail、Apple Mailなど） | ほとんどのメールソフトで再生不可。 |
| 容量（ファイルサイズ） | 軽め（数百KB〜数MB） | 高画質だと重い（数MB〜数十MB）だが圧縮で調整可能 |
| 表現の自由度 | ループ・短い動きが得意。音声なし。 | 映像＋音声でより豊かな表現が可能。時間制限なし。 |
つまりGIFアニメーションは「伝わる」「目立つ」「軽い」の三拍子がそろった、メールマーケティングの救世主なんです！
そんな優れたGIFアニメーションですが、いくつか気をつけたいポイントがあります。
まず一番大事なのは、なんといってもファイルサイズ（容量）です！
いくら軽いといっても、容量が大きすぎるとメールの読み込みが遅くなって、かえってストレスになっちゃうかもしれません💦
目安として、GIFのサイズは大体1MBくらいに抑えるよう意識してみましょう！
ファイルサイズを軽く保つには、動きをシンプルにしたり、使う色や動かす部分をちょっと減らしてみたり、GIF圧縮ツールでサイズを小さくするのが有効です。
GIFの長さも、実はたったの数秒（3秒くらい）でOKなんです！
GIFは勝手にループ再生してくれるので、短い動きでも十分アピールできちゃいます。
見やすさも大事です。
パソコンでもスマホでも「見やすい！」と思ってもらえるように、横幅は600pxくらいで作るのがオススメです。
もちろん、複数のGIFを入れることもできますが、その場合もメール全体の合計容量が1MBを超えないように、本当に必要なものだけを選ぶようにしましょう。
最後に、もう一つ大事なのが「もしも」の備えです。
実は、一部のメールソフト（たとえば古いOutlookとか）だと、GIFが動かずに「最初の1コマ目」だけが静止画として表示されちゃうことがあるんです…！
万が一そうなっても「あれ？なんの画像？」とならないように、メールの本文でも内容を補足しておいたり、画像が表示されなかった時用の「代替テキスト（altテキスト）」をちゃんと設定しておく、といったひと手間を加えておくと、とっても安心です！
代替テキストの設定方法は以下の記事でわかりやすく解説しています↓
GIFアニメーションを作ってみた！
今回は「Canva（キャンバ）」を使ってGIFアニメーション作りに挑戦してみます。
Canvaの公式サイトはこちら
Canvaは無料プランでも高機能なので、メルマガ担当者の強い味方です！
さっそくCanvaのホーム画面で、テンプレートを検索します。
「GIF」と入力して検索してみると…
たくさんのおしゃれなテンプレートが出てきました。
これなら、デザインセンスに自信がなくても安心です。
メルマガに合いそうなビジネスチックなデザインを発見！
テンプレートを開いてみると動いている部分はGIF素材のようです。
そうなんです。1から作らなくても、GIF素材がたくさん用意されているんです。
素材タブで「メルマガ（好きな検索ワード）」と検索して「アニメーション」にチェックを入れると、その名の通りGIFアニメーションの素材のみが検索結果で表示されます。
パーツとして追加できるGIF素材がたくさん見つかります。
素材を組み合わせるだけで、プロが作ったようなGIFアニメーションがつくれちゃいます°˖✧◝(⁰▿⁰)◜✧˖°
早速こちらのテンプレートをお借りして、メルマガに使えそうなGIFアニメーションを作成してみます。
まず大切なのが、キャンバスサイズです。
HTMLメールの横幅は、一般的に600pxが推奨されています。
Canva Pro（有料版）なら「リサイズ」機能で簡単に変更できますが、無料版を使っている場合は少し工夫が必要です。
無料版の方は、まずホーム画面から「カスタムサイズ」を選び、幅を「600px」高さはお好み（例えば300pxなど）に設定して、まっさらなキャンバスを作成します。
次に、使いたいテンプレートを開き、そこにあるデザインパーツ（イラストや文字）をコピーして、先ほど作成した600px幅のキャンバスに貼り付ければOKです。
これで無料版でも推奨サイズで作成できます。
サイズが決まったら、あとはテンプレートのテキストをメルマガの内容に合わせて変更します。
デザインが固まったら、いよいよ保存です。
…とその前に、忘れがちなのが「再生時間」の調整です。
Canvaのアニメーションは、初期設定だと10秒程度と長めになっていることがあります。
GIFアニメがあまり長いとデータ容量が重くなってしまうため、編集画面の上部にあるタイマー（時計のアイコン）から、再生時間を調整しましょう。
今回は3秒くらいに設定してみます。
準備ができたら、右上の「共有」ボタンから「ダウンロード」を選び、ファイルの種類で「GIF」を選択して保存します。
ちなみに、Canva Pro（有料版）なら、背景を透明にした「透過GIF」として保存することも可能です。
メルマガの背景色とデザインを自然に馴染ませたい場合に便利ですね。
また、Canvaは動画（MP4など）をアップロードして、同じ手順でGIFに変換することもできますよ。
【完成品】
おしゃれなのに5分くらいでつくれました。
なんて便利なんだ…素材がおしゃれなので、それだけでクオリティが高く見えます✨
気になるファイル容量も、横幅600pxで作成した結果、935KBと1MBを切っており、メールで送るのにも問題ないサイズです。
今回はテンプレートを使いましたが、もちろん自分で撮影した商品写真などをアップロードし、Canvaの「アニメーション」機能を使って動き（フェードインやスライドなど）をつけることも可能です。
もし、パーツごとに動きを設定するのが大変…と感じる場合は、Canvaの「ページ全体のアニメーション」機能がおすすめです。
デザイン全体に、ワンクリックでプロのようなアニメーション効果を追加できるので、ぜひ試してみてください。
メルマガにGIFアニメーションを挿入する方法
完成したGIFアニメーションを、実際にHTMLメールに挿入する方法もご紹介します！
方法は大きく分けて2つあります。
方法1：メール配信ツールの機能を使う（推奨）
HTMLコードの知識に自信がない場合に、最も簡単で安心な方法です。
現在使用しているメール配信ツールに、HTMLメールを作成するエディタがある場合は、静止画（JPEGやPNG）を挿入する時と同じ手順を試してみてください。
「写真の挿入」や「ファイルのアップロード」といったボタンから、今回作成したGIFファイルを選択するだけで、そのまま挿入できる場合がほとんどです。
方法2：HTMLコードで直接指定する
もしHTMLコードを直接編集してメルマガを作成している場合は、まず作成したGIFファイルを、利用中のメール配信ツールや自社のサーバーにアップロードします。
アップロードが完了すると、そのGIFファイルのURLが発行されます。
あとは、メールのHTMLコード内でGIFを表示させたい位置に、以下のように<img>タグを記述します。
| <img src=”（ここにアップロードしたGIFファイルのURL）” alt=”（画像が表示されない場合の代替テキスト）”> |
この方法の場合、HTMLの基本的な知識が必要になります。
もし記述を間違えると、表示が大きく崩れたり、GIFがうまく再生されなかったりする原因になります。
コーディングに慣れていない場合は、無理をせず「方法1」を選ぶことをおすすめします！
復習テスト！
記事の内容を○×クイズにしました。ぜひ復習につかってみてくださいね！
| 問題番号 | 問題文 |
| 1 | GIFアニメーションは、ほとんどのメールソフトで再生できず、外部サイトへの誘導が必要である。 |
| 2 | GIFアニメーションのファイルサイズは、ストレスを避けるため、目安として1MBくらいに抑えることが推奨されている。 |
| 3 | GIFアニメーションの推奨される長さは、ループ再生を考慮すると、3秒程度の短いものでも十分である。 |
| 4 | GIFアニメーションは、一部のメールソフト（古いOutlookなど）では静止画として表示される場合があるため、代替テキスト（altテキスト）の設定は不要である。 |
| 5 | CanvaでGIFアニメーションを作成する際、無料版ではHTMLメールの推奨サイズである横幅600pxのキャンバスを作成できない。 |
| 6 | 動画ファイル（MP4など）は、GIFアニメーションと比較して、メールに埋め込んでも多くのメールソフトで再生可能である。 |
解き終わったら以下の回答をどうぞ！
| 問題番号 | 〇か×か | 簡単な解説 |
| 1 | × | 動画ファイル（MP4など）がほとんどのメールソフトで再生不可であり、GIFアニメーションは多くのメールソフトで再生可能です。 |
| 2 | 〇 | ファイルサイズが大きすぎるとメールの読み込みが遅くなるため、1MBくらいに抑えることが推奨されています。 |
| 3 | 〇 | GIFは自動でループ再生するため、短い動きで十分アピールでき、容量の軽量化にも繋がります。 |
| 4 | × | 一部のメールソフトで最初の1コマ目だけが静止画として表示されることがあるため、万が一に備え代替テキストの設定が重要です。 |
| 5 | × | 無料版でもカスタムサイズ機能を利用し、既存のテンプレートのパーツをコピー＆ペーストすることで600px幅のキャンバスで作成可能です。 |
| 6 | × | ほとんどのメールソフトで再生できないのは動画ファイル（MP4など）です。GIFアニメーションは多くのメールソフトで再生できます。 |
AIプロンプトを無料プレゼント！
コンビーズメールライト
まさかの月額3,300円〜。業界最安クラスなのに、安心のメール配信サービス
当方がご提供しているコンビーズメールライトは業界最安クラス月額3,300円〜のシンプルで使いやすいメール配信サービス。クレジットカード情報不要で開始できる無料トライアルもご用意しております。
初めてでも、使い方は無限大。大規模ビジネスはもちろんのこと、個人事業やサークル運営にも幅広く活用できます。
とにかくシンプルで使いやすく、安定してお客様に届きやすい。
だから初心者の方でも安心して使い始めることができます。
| 初期費用 | 0円 |
|---|---|
| 価格 | 月5000通：3,300円/月～ |
| 割引・キャンペーン | 要問い合わせ |
| 無料トライアル | あり |
この記事を書いた人
宇都宮凛奈
コンビーズの公式XとYouTubeショートを担当しているりんりんです！
こんびーちゃんとお仕事をしたりおやつを食べてます。
ライターとしてまだまだ修行中！
いろんなデザインを見たり、空と海の写真を撮るのが趣味。
コメント