インターネットを使っていれば、FacebookなどでアニメーションGIFを一度は見たことがあるはずです。動きがあるGIF画像のことで、いわば静止画と動画の中間にあたります。
アニメーションGIFはマーケティングにも効果があります。簡単に表示できるうえ、訪問者の目を引いて大きなインパクトを与えられるからです。
シェアしたいと思ってもらえるコンテンツを作り出すうえで、アニメーションGIFを試してみる価値は大いにあります。
アニメーションGIFの何よりの特長は、とても簡単に作れることです。Photoshopを使える環境にあれば、すぐに完成までこぎつけることができます。
この記事では、アニメーションGIFの作成方法について説明していきます。サンプルに使うのはCreative Cloud 2015バージョンのPhotoshopですが、他のバージョンでも手順は同様です。
Adobe Creative Cloud アプリの基礎ガイド
このガイドでは基本概要からPhotoShopやIllustratorなど、主なアプリを中心に解説しており、目的に合わせたアプリやプランの選び方などが詳しく紹介されています。ぜひご覧ください。
- Adobe Creative Cloudの概要
- 料金プランとアプリの紹介
- Adobe Creative Cloudアプリのインストール方法
- 最適なプランの選び方
今すぐダウンロードする
全てのフィールドが必須です。
PhotoshopでアニメーションGIFを作成する方法
このチュートリアルでは、次のようなアニメーションGIFを作っていくことにします。
ではさっそく始めましょう。
ステップ１：Photoshopに画像をアップロード
アニメーションの各フレームの画像を作成済みの場合：
対象の画像ファイルを1つのフォルダにまとめておいてください。それらをPhotoshopに読み込むには、まずは「ファイル」 > 「スクリプト」 > 「ファイルをレイヤーとして読み込み」をクリックします。
次に「参照」をクリックし、対象のファイルを選択して、「OK」をクリック。
画像が1つずつ、それぞれ個別のレイヤーに読み込まれます。ここまで済んだら、ステップ2に進んでください。
各フレームの画像をまだ作成していない場合：
まずは、アニメーションGIFの各フレームを、それぞれ別個のレイヤーとして作成しましょう。新しいレイヤーを追加するには、「レイヤー」>「新規」>「レイヤー」をクリックします。
各レイヤーには、GIFを作成するときにわかりやすくなるような名前を付けておきましょう。画面右下のレイヤーパネルで、デフォルトのレイヤー名をダブルクリックして、新しい名前を入力し、Enterキーで確定します。
レイヤーを作成して名前を付けたら、次はステップ2です。
ヒント： 複数のレイヤーを組み合わせて、GIFで単一のフレームにまとめたい場合は、まずは該当するレイヤーの表示をオンにします（レイヤー名の左にある「目」を開かせる）。次に、Shift + Command + Option + E（Mac）またはShift + Ctrl + Alt + E（Windows）を押すと、表示内容が新しいレイヤーとして追加されます。このレイヤーも名前を変えておきましょう。
ステップ２：タイムラインパネルを開く
タイムラインパネルを開くには、画面上部のメニューで「ウィンドウ」>「タイムライン」をクリックします。タイムラインでは、特定の時間枠ごとに各レイヤーの表示/非表示を切り替えることによって、静止画像からアニメーションを作成できます。
タイムラインパネルは、画面の一番下に表示されるこの部分です。
ステップ３：タイムラインパネルで「フレームアニメーションを作成」をクリック
自動で選択されていない場合は、ドロップダウンメニューから「フレームアニメーションを作成」を選択したうえで、ボタンをクリックしてください。ボタンをクリックしないと、フレームアニメーションのオプションが表示されません。
この時点で、タイムラインは次のような表示になります。
ステップ４：新規フレームごとに新規レイヤーを作成
まずはすべてのレイヤーを選択しましょう。画面上部のメニューで「選択範囲」>「すべてのレイヤー」をクリック。
次に、タイムラインパネルの右側にあるメニューアイコンをクリック。
ドロップダウンメニューで、「新規フレームごとに新規レイヤーを作成」をクリック。
ステップ５：同じドロップダウンメニューで「レイヤーからフレームを作成」をクリック
これで、画像の各レイヤーが、それぞれアニメーションGIFの1フレームになります。
ステップ６：次のフレームに移るまでの表示時間を各フレームに対して設定
各フレームの下に表示された時間をクリックし、フレームの表示時間を選択。この例では0.5秒に設定しました。
ステップ７：ツールバーの下部でループ回数を選択
デフォルトは「一度」ですが、「無限」なら無限にループします。「その他」なら回数を指定できます。 
ステップ８：再生ボタンをクリックして、アニメーションGIFをプレビュー
ステップ９：ウェブ用にアニメーションGIFを保存
アニメーションが上出来なら、ウェブ用として保存しましょう。画面上部のメニューで、「ファイル」>「エクスポート」>「Web用に保存（従来）」をクリック。
次に、GIFファイルの保存形式を「プリセット」のドロップダウンで選択します。画像でグラデーションを使っている場合なら、帯状の不自然な色調にならないよう、ディザありの形式にしましょう。ベタ塗りばかりの画像なら、ディザなしでもよいかもしれません。
GIFファイルのサイズや、元のJPEGファイルやPNGファイルと比べたときの色の精彩さは、横に表示されたディザの数字によって決まります。Adobeのヘルプの説明によると、ディザの値を大きくすると、画像の色数が増え、ディテールが鮮明になりますが、ファイルサイズも大きくなります。
下部の「保存」をクリックすると、ファイルをパソコンに保存できます。あとはこのGIFファイルをウェブにアップロードして、マーケティングに使うだけです。
ウェブ上で画像を配置できる場所であれば、たいていはスムーズに使用できるはずです。最終的に、次のようなアニメーションGIFが完成しました。
アニメーションGIFをマーケティングに活用する方法
１）ソーシャルメディア
メジャーなソーシャルメディアではPinterestが最初にアニメーションGIFに対応し、Twitterが続きました。そして、2015年夏にはFacebookも対応しました。こうしたSNSでアニメーションGIFを使えば、雑多なフィードの中でコンテンツを目立たせることができます。
たとえばSamsungは、商品のプロモーションに次のようなアニメーションGIFを使っています。
各SNSへの投稿でアニメーションGIFを使う方法は、以下の記事を参考にしてください。
- TwitterアニメーションGIFの関連記事：Say Hello to Animated GIFs on Twitter
- FacebookアニメーションGIF関連記事：Facebook Finally Supports GIFs : 10 Ways to Celebrate
- PinterestアニメーションGIF関連記事：Pinterest Now Supports Animated GIFs [New Feature]
２）Eメール
アニメーションGIFはメールでも使えます。通常の画像に代えてアニメーションGIFを置けば、メールに動きが加わって華やかになります。
これは、物珍しさで読み手の目を引くという効果だけではありません。売上にも直接作用します。BlueFlyが実施したA/Bテストによると、アニメーションGIFを使ったメールの方が、静止画像を使ったメールに比べて、売上が12%多かったそうです。
商品やイベントの告知など、読み手の気を引くためにアニメーションGIFを使ってみましょう。こちらのアニメーションGIFは、女性服ショップのAnn Taylor LOFTのものです。プレゼントを揺らして見せることで、読み手の興味をそそり、プレゼントの包みを開けるためにクリックしようという気にさせています（参照記事はこちら：A Guide to Animated GIFs in Email）。
画像出典：Litmus
３）ブログ記事
BuzzFeed風のリスティクル（箇条書き形式のブログ記事）でなくても、アニメーションGIFは使えます。
たとえば、私の同僚のGinny Soskeyは、Call-To-Action（CTA）の意味を説明するにあたり、次のようなシンプルなアニメーションGIFを用意しました（関連記事はこちら：Call-to-Action:Defined in a Single GIF）。
あるいは、オフィスの給湯室で使えるレシピの記事でも、アニメーションGIFを活用しています（関連記事はこちら：10 Delicious Recipes You Can Make in your Office Kitchen）。
アニメーションGIFをマーケティングでどのように使いたいとお考えですか。ぜひコメントで聞かせてください。
