インターネットを使っていれば、FacebookなどでアニメーションGIFを一度は見たことがあるはずです。動きがあるGIF画像のことで、いわば静止画と動画の中間にあたります。
アニメーションGIFはマーケティングにも効果があります。簡単に表示できるうえ、訪問者の目を引いて大きなインパクトを与えられるからです。
シェアしたいと思ってもらえるコンテンツを作り出すうえで、アニメーションGIFを試してみる価値は大いにあります。
アニメーションGIFの何よりの特長は、とても簡単に作れることです。Photoshopを使える環境にあれば、すぐに完成までこぎつけることができます。
この記事では、アニメーションGIFの作成方法について説明していきます。サンプルに使うのはCreative Cloud 2015バージョンのPhotoshopですが、他のバージョンでも手順は同様です。
このチュートリアルでは、次のようなアニメーションGIFを作っていくことにします。
ではさっそく始めましょう。
対象の画像ファイルを1つのフォルダにまとめておいてください。それらをPhotoshopに読み込むには、まずは「ファイル」 > 「スクリプト」 > 「ファイルをレイヤーとして読み込み」をクリックします。
次に「参照」をクリックし、対象のファイルを選択して、「OK」をクリック。
画像が1つずつ、それぞれ個別のレイヤーに読み込まれます。ここまで済んだら、ステップ2に進んでください。
まずは、アニメーションGIFの各フレームを、それぞれ別個のレイヤーとして作成しましょう。新しいレイヤーを追加するには、「レイヤー」>「新規」>「レイヤー」をクリックします。
各レイヤーには、GIFを作成するときにわかりやすくなるような名前を付けておきましょう。画面右下のレイヤーパネルで、デフォルトのレイヤー名をダブルクリックして、新しい名前を入力し、Enterキーで確定します。
レイヤーを作成して名前を付けたら、次はステップ2です。
ヒント： 複数のレイヤーを組み合わせて、GIFで単一のフレームにまとめたい場合は、まずは該当するレイヤーの表示をオンにします（レイヤー名の左にある「目」を開かせる）。次に、Shift + Command + Option + E（Mac）またはShift + Ctrl + Alt + E（Windows）を押すと、表示内容が新しいレイヤーとして追加されます。このレイヤーも名前を変えておきましょう。
タイムラインパネルを開くには、画面上部のメニューで「ウィンドウ」>「タイムライン」をクリックします。タイムラインでは、特定の時間枠ごとに各レイヤーの表示/非表示を切り替えることによって、静止画像からアニメーションを作成できます。
タイムラインパネルは、画面の一番下に表示されるこの部分です。
自動で選択されていない場合は、ドロップダウンメニューから「フレームアニメーションを作成」を選択したうえで、ボタンをクリックしてください。ボタンをクリックしないと、フレームアニメーションのオプションが表示されません。
この時点で、タイムラインは次のような表示になります。
まずはすべてのレイヤーを選択しましょう。画面上部のメニューで「選択範囲」>「すべてのレイヤー」をクリック。
次に、タイムラインパネルの右側にあるメニューアイコンをクリック。
ドロップダウンメニューで、「新規フレームごとに新規レイヤーを作成」をクリック。
これで、画像の各レイヤーが、それぞれアニメーションGIFの1フレームになります。
各フレームの下に表示された時間をクリックし、フレームの表示時間を選択。この例では0.5秒に設定しました。
デフォルトは「一度」ですが、「無限」なら無限にループします。「その他」なら回数を指定できます。
アニメーションが上出来なら、ウェブ用として保存しましょう。画面上部のメニューで、「ファイル」>「エクスポート」>「Web用に保存（従来）」をクリック。
次に、GIFファイルの保存形式を「プリセット」のドロップダウンで選択します。画像でグラデーションを使っている場合なら、帯状の不自然な色調にならないよう、ディザありの形式にしましょう。ベタ塗りばかりの画像なら、ディザなしでもよいかもしれません。
GIFファイルのサイズや、元のJPEGファイルやPNGファイルと比べたときの色の精彩さは、横に表示されたディザの数字によって決まります。Adobeのヘルプの説明によると、ディザの値を大きくすると、画像の色数が増え、ディテールが鮮明になりますが、ファイルサイズも大きくなります。
下部の「保存」をクリックすると、ファイルをパソコンに保存できます。あとはこのGIFファイルをウェブにアップロードして、マーケティングに使うだけです。
ウェブ上で画像を配置できる場所であれば、たいていはスムーズに使用できるはずです。最終的に、次のようなアニメーションGIFが完成しました。
メジャーなソーシャルメディアではPinterestが最初にアニメーションGIFに対応し、Twitterが続きました。そして、2015年夏にはFacebookも対応しました。こうしたSNSでアニメーションGIFを使えば、雑多なフィードの中でコンテンツを目立たせることができます。
たとえばSamsungは、商品のプロモーションに次のようなアニメーションGIFを使っています。
各SNSへの投稿でアニメーションGIFを使う方法は、以下の記事を参考にしてください。
アニメーション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をマーケティングでどのように使いたいとお考えですか。ぜひコメントで聞かせてください。