つい先日、久しぶりにアニメーションGIFを制作致しました。
もう何年も前に制作したことを最後に考えもしなかったアニメーションGIFです（笑）
アニメーションGIFを使っているサイト、最近ではもう見なくなりましたよね。
今のところ（2016年3月現在）ですと、アダルトサイトの広告バナーやニッチ商品のバナー広告くらいでしか見なくなりました。
ユーザーの立場からすると、チカチカしますし、絵的に面白い絵が印象に残っておらず、あまりイイ印象がないのかもしれません。
10年くらい前、2chにはそういうアニメーションGIFやフラッシュで面白画像をつくる人がいたんですけどね、もうめっきり見なくなりました。
こういう言い方が正しいことかどうかは分かりませんが、フラッシュ動画はアニメーションGIFと同じような原理で制作することになります。
1枚1枚のフレーム（コマ）を繋ぎ合わせて動画に見せるという感じですね。
フラッシュの場合はさらに細かい調整などが出来るので、アニメーションGIFよりも制作時間はかかりますが、まぁそんな感じです。
アニメーションGIFの次にフラッシュがきて、その次にjavascript、jQueryがきたと思います。
これらはデバイスやローカルのスペックに伴って必要とされる分野が変わってきたと認識しています。
ということで、今更アニメーションGIFの作り方を解説したところで・・・なお話ですが、弊社は基本的に未経験でも受け入れていることと、こういうことを知らないクライアントさんに知って頂きたいということで、今更ではありますがアニメーションGIFの作り方を解説しようと思います。
今回はPhotoshopではなく、Illustratorでもなく、Fireworksです。
今回も画像メインで説明致しますので、感覚で憶えて下さいね。
今回は、アイキャッチでも使っている画像を制作するプロセスを簡単にまとめています。
ということで、サイズは600×400くらいにしています。
サイズに意味はありませんので、ご自由に決めて下さい。
まずは適当に画像をつくってみましょう。
ここで作る画像は、1枚目のコマです・・・厳密に言うと1枚目の「ステート」です。。
「ステート」については後ほど出てきます。
右側にあるパネルの中のレイヤータブの横にあるステートタブをクリックして下さい。
そうしますと、ステート欄に「ステート1」という表示が出ますよね。
これが先述の「ステート」です。
レイヤータブの横にあるステートタブを赤枠でくくっています。
今回は「ステートを複製」という操作で進めていきます。
「ステート1」の上で右クリックをすると、ステートの操作一覧が出てきます。
そこで「ステートの複製」を選びました。
2枚目以降のコマで全く異なる絵にする場合、複製ではなく新規作成を選んでくださいね。
同じ絵をしたコマが出来上がりました。
「ステート1」の下に「ステート2」ができましたね。
この時、選んでいるステート毎にレイヤーがありますので、例えば「ステート1」を選んでいる状態でステート1内にあるレイヤーを消しても、「ステート2」の中にあるレイヤーは消えません。
ステート毎のレイヤーはそれぞれのステートの中でしか見ることが出来ませんのでご注意下さい。
先ほどのステートタブの中にある「100」という数字、これはステートが切り替わる時間（速さ）のことです。
（赤枠で囲っている箇所です。）
そして、メニュー部分の「画像プレビュー」で画像のチェックを行うことが出来ます。
ステートが切り替わる時間の調整は「画像プレビュー」の中でも行うことが出来ます。
因みにですが、この時点ではまだアニメーションGIFにはなっていません。
この次でアニメーションGIFの設定を行います。
「画像プレビュー」をクリックするとウィンドウが開き、細かい設定をします。
まずはオプションボタンを選択している状態で「形式」欄があります。
この欄を「アニメーションGIF」にして下さい。
まずはこれでアニメーションGIFの書き出し準備が整った感じです。
あとは、「アニメーション」というボタンをクリックすると、先ほどのステートを切り替える時間などを設定することが出来る画面になります。
その他、リピートの回数を設定することが出来たりしますので、その時々に応じて設定して下さい。
画像右下部分にある矢印のボタンは再生などのコントロールボタンでして、再生ボタンを押して頂くとアニメーションGIFのプレビューが出来ます。
あとは、「書き出し」をクリックすることでアニメーションGIFを書き出すことが出来ます。
いかがでしたでしょうか？
アニメーションGIFをバナー広告などで使えるシーンがあるかもしれませんが、昨今は”落ち着いて情報伝達”を目的としたバナー広告が多いため、アニメーションGIFの使い道はないかもしれません。
jQueryやHTML5でも綺麗に見せることが出来るようになってきましたし、なかなか使いどころがないかもしれません。
しかし、端的に何かの説明を補助する場合には、意外に使えるモノです。
無理して使う必要があるとは思いませんが、サイト内のコンテンツで幅を取らず、”パッ”と何かを切り替えながらコンテンツを見せたい時には使えると思います。
ということで、ちょっとしたお役立ち程度に捉えて頂き、使えるシーンがあった時には是非使ってみて下さい。
執筆 : 清水 隼斗
「FireworksでアニメーションGIFを作成」のシェアをお願い致します！