アニメーション GIF [およびその他のアニメーション ビジュアル] でコンテンツ マーケティングにスパイスを加える方法
公開: 2015-10-15
CNN
画像は強力なツールです。 言葉では表現できない方法で、注目を集めて保持したり、感情を捉えて伝えることができます。 画像に動きを加えると、実に魅力的なものになります。
ビデオは依然として強力ですが、控えめなアニメーション gif も人気が高まっています。 少し特別な注意を引くのはいつも楽しい方法でした。 残念なことに、アニメーション GIF はあまりにも多くの陳腐なバナー広告や迷惑なアニメーションの絵文字にも使用されています。 それは彼らの評判を少し汚しました。
しかし今では、アニメーション GIF をサポートするプラットフォームがますます増えています。 そして、ますます多くのマーケティング担当者が、コンテンツを目立たせるためにそれらを使用しています。 エレガントなビジュアル マーケティングを実現しています。
では、アニメーションGIFとは何ですか?
良い質問。 言葉を飛ばして、本音に飛びつきましょう。
これはアニメーション gif です。

この gif は、誰も気付かなかった会社の記念日についての発表として Reddit に最初に登場しました。
これもアニメーション gif です。

これは、オンライン小売業者の Evans から送信された電子メールによるお知らせです。 また、Alchemy Worx の最近の電子メールの注目すべきアニメーション gif のまとめにも含まれていました。
これらの 2 つのアニメーション GIF は、表示禁止メタメッセージでフォーマットを定義するのに役立ちます。 しかし、さらに進むには:
- アニメーション GIF は、写真またはグラフィックです。
- アニメーション GIF は、一連の短いフレームで構成されています。 各フレームは独自のアニメーション gif です。
- アニメーション GIF は短い傾向にあり、長さは 5 秒以内です。
- アニメーション GIF はループする傾向がありますが、数回再生してから停止するように設定できます。
- アニメーション GIF は、ネオン サインのように、注目を集める派手なグラフィックとして使用できます。 または、ストーリーを伝えるために使用することもできます。 私たちが最初に目にした gif は、単純なストーリーを伝えています。 それは起こった。 誰も気にしませんでした。
アニメーション GIF ではないもの
ご存じのとおり、GIF アニメーションは、オンラインの動画の最後の言葉ではありません。 知っておくべき非常によく似た形式と画像を動かす方法がいくつかあり、いくつかの注意点があります。
1. アニメーション GIF は動画ではありません。
アニメーション GIF はビデオのようなものに曲げることができますが、アニメーション GIF に多くのフレームが必要になるか、ビデオの新しい定義を受け入れる必要があります (一連の、たとえば 5 つのフレームとして)。 . ビデオも、gif とは異なるファイル形式を使用します。 ビデオは通常、AVI、MPEG、MOV、およびその他のビデオ固有の形式で提供されます。
2. アニメーション GIF はシネマグラフではありません。
シネマグラフは、写真とビデオのハイブリッドです。 アニメーション GIF と多くの類似点があります。
- ほとんどのアニメーション GIF のようにループします (つまり、繰り返します)。
- アニメーション GIF などの電子メール メッセージで使用できます。
- .gif で終わる
しかし、それらはアニメーション GIF ではありません。 これはシネマグラフです:

Convince and Convert ブログに、さまざまなブランドがマーケティングでシネマグラフをどのように使用しているかについての興味深い記事があります。 AdWeek は、Facebook のシネマグラフの計画についての投稿も公開しました。
シネマグラフは、アニメーション GIF よりも作成がかなり難しいことを理解しておいてください。 基本的な画像編集スキルがあれば、アニメーション GIF を作成できます。 シネマグラフを鳴らすには、アーティストのスキルが必要です。
3. アニメーション gif は CSS アニメーションではありません。
CSS アニメーションは、もう 1 つの最先端のビジュアル コンテンツ手法ですが、特定の種類の画像ファイルのおかげではなく、コーディングのおかげで機能します。 CSS アニメーションは、データの表示に適しています。 そのため、グラフを少しずつ動かしたり、円グラフを回転させたりしたい場合は、CSS アニメーションが機能する可能性があります。 残念ながら、これらはすべてのブラウザで動作するわけではなく、バグがある可能性もあります。
Creative Bloq は、見事な CSS アニメーションの例を含む非常にクールな投稿をしています。
4. アニメーション GIF は Flash ではありません。
Flashはちょっと古い学校です。 用途はありますが、レンダリングの問題 (iOS デバイスでは Flash を再生できない) と、Flash コンテンツは検索エンジンにとってブラック ボックスであるため、Flash は避けるのが最善です。
5. アニメーション GIF もハイパーラプス ビデオではありません。
Instagram は、スマートフォンでタイムラプス動画を作成できるようにする方法を考え出しました。 ハイパーラプスと呼ばれる技術です。 iOS デバイス用の Hyperlapse アプリはこちらから入手できます。 開発者は、バウンス効果を修正することもできました (彼らは修正を「シネマ スタビライゼーション」と呼んでいます)。
ハイパーラプス ビデオは Web ページに埋め込むことができますが、それでもほとんどは Instagram の生き物です。
アニメーションGIFの作り方
アニメーション GIF を作成するには 2 つの方法があります。 まずは画像から。 2つ目は動画から。
静止画像からgifを作成する方法は次のとおりです。
- GIFmaker.me に移動します。 無料のGIF作成ツールです。 他にも無料の gif クリエーターはたくさんあります (https://makeagif.com や https://imgflip.com なども試しています) が、Gifmaker.me:
- GIF の下隅に透かしを入れません
- 他のツールよりもファイル サイズが小さい gif を作成します
- 十分なコントロールが提供されるため、GIF を好きなように作成できます。
できないことの 1 つは、GIF にキャプションを追加できることです。 そうしたい場合は、MakeaGIF または IMGFlip を試してください。

2) GIF にしたい画像をアップロードします。 これらは巨大な画像にすることも、最終的なアニメーション GIF にしたいサイズに縮小することもできます。 実際に両方の方法で試してみました。最初のセットでは、画像は幅数千ピクセルの 300dpi 画像としてアップロードされました。 次に、Photoshop で 144 dpi で幅 500 ピクセルに縮小した画像で別のセットを作成しました。 巨大な画像からアニメーション化された gif は、実際には、縮小された画像から作成したものよりも 10% 小さくなりました。 図に行きます。
3) 画像がアップロードされたら、フレームをクリックしてドラッグすることで、フレームを並べ替えることができます。 完成した gif のサイズも制御でき、1 秒あたりのフレーム数も制御できます。 一部の情報源によると、gif の平均は 1 フレームあたり 500 ミリ秒です。 少し速すぎることに気づきました。GIF の速度を 1 フレームあたり 1100 ミリ秒まで下げました。
GIF を数回だけ再生するか、無限ループに設定できます。 私はループさせました。 また、音声を追加することもできますが、私はコンテンツに音声を追加することはあまり好きではありません (ウェビナー、ポッドキャスト、ビデオなど)。

これらの設定がすべて選択されたら、「GIF アニメーションの作成」をクリックするだけです。
次にこのようなものが表示されます。 アニメーションが再生されます...下の画像は単なるスクリーンショットです。

gifmaker.me はかなり小さいファイル サイズを作成しますが、アニメーション GIF をさらに小さくすることができます。 これは、電子メール メッセージ用のアニメーション gif を作成している場合に特に重要になります。
電子メールで 80 kb を超えるアニメーション gif を使用したくない場合。 通常、電子メール メッセージの場合は画像を小さくすることをお勧めしますが、アニメーション GIF の場合はルールを曲げる必要がある場合があります。 そのためには、使用するフレーム数を減らすか、最終的なアニメーション gif の表示サイズを小さくしてみてください。
または、ファイル サイズ リデューサーを使用することもできます。
これが私が使用したファイルサイズリデューサー、EZGif です。 最高の圧縮設定を使用しなくても、236K の画像を 113KB まで縮小することができました。

4 フレーム、幅 500 ピクセルのアニメーション gif の場合、113 KB はかなり適切です。
圧縮された最終的なアニメーション gif は次のとおりです。
YouTube や他の動画からアニメーション GIF を作成する方法
アニメーション GIF を作成する次の方法は、YouTube ビデオを使用することです。 これを行うには、非常に簡単な方法が 1 つあります。
GIFアニメにしたい動画のURLにアクセスするだけです。
次のように、「youtube.com」の前に「gif」と入力します。
ヒットリターン。 アニメーション GIF の設定を指定できるサイトにリダイレクトされます。
「GIFを作成」をクリックして…
次に、アニメーション GIF の共有方法を選択します。
ただし、これには問題があります。 このサイトは、画像をホストするように設定されています。gif をダウンロードするのは面倒です。 それは良いことかもしれませんし、悪いことかもしれませんが、自分のサイトで画像をホストしたいのです。
YouTube 動画からアニメーション GIF を作成できるサイトは他にもたくさんあります。 MakeAGif.com と IMGFlip.com はどちらも無料で使いやすいです。
作れないなら探せ
アニメーション GIF を作成する時間がありませんか? それは、既製品を使用できないという意味ではありません。 無料で使用できるアニメーション GIF のサイトがいくつかあります。
- Giphy.com
- Imagur.com
- ギフビン.com
- Hulu の完璧な gif
- GIFBay.com
礼儀正しく、GIF をどこで入手したかを示してください。

マーケティングでアニメーション GIF を使用する方法
ああ、ついに。 私たちは結果の部分にいます。 マーケティングでアニメーション GIF を使用するクールな方法をすべてご紹介します。
1) 電子メールメッセージ。
ファイル サイズを小さく保つようにしてください。ただし、アニメーション GIF はメールでうまく機能します。 次のようなアニメーション GIF のリフティング応答に関するレポートがいくつかあります。
- Bluefly は 2008 年に電子メールの 1 つにアニメーション GIF を追加し、テストのアニメーション GIF セグメントから 12% の収益を得ました。
- デルは、アニメーション GIF メール キャンペーンで収益を 109% 増加させました。
- Lake Champlain Chocolates は、チョコレートの箱が開く様子を示すアニメーション メールで、反応を 49% 向上させました。
Intouch Solutions には、メール内のアニメーション gif に関する他の 3 つのケース スタディに関する素晴らしい投稿もあります。
警告: 購読者がアニメーション GIF をサポートしていないクライアント (Outlook や Windows Phone 7 など) で電子メールを開いた場合に備えて、GIF の最初のフレームを常に静止画像として自立できるように設計してください。
2) ソーシャル メディアで。
Twitter と Tumblr はしばらくの間、アニメーション GIF をサポートしてきました。 しかし、Facebook は最近、ニュースフィードがアニメーション GIF もサポートしていると発表しました。 彼らは広告でそれらを許可することさえあります.
Pinterest はアニメーション GIF をサポートしていますが、再生するには「GIF」と書かれたボタンをクリックする必要があります。 また、Google+ はアニメーション GIF をサポートしています。
ご存じのとおり、ソーシャル メディアの画像は、テキストベースのコンテンツよりもはるかに多くのいいねやシェアを生み出します。 アニメーション GIF を散りばめることで、コンテンツのクリック価値がさらに高まります。
3) ブログ投稿について。
投稿でアニメーション GIF を使用するのに、BuzzFeed や Upworthy である必要はありません。 Social Fresh と Quick Sprout は、いくつかのデータを処理してくれました。 彼らは、アニメーション GIF がブログ投稿から共有される可能性が最も高いタイプの画像であることを発見しました。
4) 電子ブック、ホワイトペーパー、調査研究のダウンロード ページ。
電子ブック、ホワイトペーパー、調査研究には、多くの情報が含まれている傾向があります。 そして、彼らはすべきです。 しかし、そのすべての情報は、メッセージとページ上の要素を抽出する必要があるダウンロード ページでは問題になります。
アニメーション gif を入力します。 静的な eBook の画像を、ダウンロードしたチャートと引用の回転する画像に置き換えられなかったのはなぜですか?
5) ソフトウェアの説明やアプリのダウンロードを促すページ。
アニメーション GIF は、ソフトウェアの操作方法を人々に示す優れた方法です。 短くシンプルにしてください。 SEMRush が新機能を発表したかったとき、彼らはこのアニメーション gif で電子メールを送信しました:
そして、ここで、90 年代後半にインターネットをぶらぶらしていた皆さんのために振り返りをします。 最初のバイラル GIF の 1 つである、漠然と不気味な Dancing Baby です。
結論
アニメーション GIF は、ページ、電子メール、またはソーシャル メディアの更新に動きを追加する最も簡単な方法です。 少しアマチュアっぽいイメージがあるかもしれませんが、視聴者が喜ぶ魅力的なストーリーを伝える魅力的でブランドに即した画像を選択できない理由はありません。
アニメーション GIF をサポートするプラットフォームやサービスがますます増えているため、少なくとも動画に飛び込む準備が整うまでは、アニメーション GIF は動画に自信を持たせるための最良の方法かもしれません。
マーケティングでアニメーション GIF を使用していますか? 私たちと共有できるケーススタディはありますか? コメントでそれらについて教えてください。
メールに動きを加えて、他のメールより目立つようにする準備はできていますか? GIF、シネマグラフ、ビデオなどを使い始める方法については、無料の eBook – Email Idea Lab をご覧ください。