【マンションバナー研究会】は、マンションバナーの作り方や新しい技法を常日頃研究し、がんばるマーキュリーで研究結果を報告するシリーズ連載です。マンションバナー制作に役立つ内容を書いていきます。
こんにちは、タマです。
以前からガッキーとタマでバナーのことについて紹介してきましたが、今回はGIFアニメーションバナーの作り方とポイントを紹介したいと思います。
GIFアニメーションバナーとは
皆さんご存知だとは思いますが、GIFはjpegやpngなどのファイル形式であり、画像ファイルでありながらアニメーション(動画)を表現できます！
動きのあるバナーを作りたければHTML5でアニメーションバナーを作ることも可能ですが、ブラウザの古いバージョンやInternet Explorerでの表示が不安定というデメリットがあります。
ですが、GIFアニメーションバナーは、Photoshopで実際に作ったバナーにちょっと手を加えるだけで動きをつけることができるので手軽にアニメーションバナーが作れてしまうのです！
こちらが実際に作ったGIFアニメーションバナーです。
マンションが建つであろう場所に、光の柱が徐々に差し込むアニメーション。
伝えたい訴求ポイントに動きをつけて表示するアニメーション。
バナーに動きをつけることによって、静止画のバナーよりもユーザーの注意を惹きやすくなり、静止画で表現しきれないことを表現できるようになります！
いつも作っているバナー広告にアニメーションをつけてみたい！
そう、思ったあなたのために、
今回はGIFアニメーションバナーの作り方と、そのポイントをご紹介します！
では、早速作ってみましょう！
バナーをPhotoshopで作る
今回はphotoshopを使用してバナーを作ります。
静止の状態のバナーはこちら。
背景画像はフリー素材を使用し、光の柱は【Photoshop】マンションから出る光の柱のつくりかたの記事を参考にして、夜景空撮の上に光の柱を作っています。全て架空のものです。
完成のGIFアニメーションバナーはこちら。
マンションが建つであろう場所に、光の柱が徐々に差し込むアニメーションがループされています。
今回紹介するやり方は、光の柱が徐々に差し込むアニメーションにするための説明なので、その他にもPhotoshopでは様々な動きを自由に設定することが可能です！
バナーで動かす部分をタイムラインにはめ込む
バナーが用意できたところで、次は動かしたい部分をタイムラインにはめ込みます。
「ウィンドウ」→「タイムライン」→「フレームアニメーションを作成」でタイムラインを表示させます。
タイムラインが表示されたら、光の柱をつくっていたレイヤーを隠した状態にします。
光の柱のレイヤーが複数ある場合は、レイヤーを統合して１つのレイヤーにしてください。
(光の柱レイヤーを全て選択→右クリック→レイヤーを統合)
次にタイムラインのフレーム1で「フレームのディレイを設定」から秒数を0.2秒にし、「選択したフレームを複製」ボタンを押して0.2秒で設定されたフレームを6個複製します。
数値の設定やフレームの数は、あくまでも私が作った時の数値なので、実際に広告として使用するときは毎秒5フレーム未満でと決まっているので、使う用途によって設定を変えてください。
複製したことによりフレームが計７個表示されたら、各フレーム毎にレイヤーの不透明度の設定をしていきます。
フレーム１では「フレームのディレイを設定」で秒数を1秒にします。
そうすることにより、１秒間は光の柱がない状態になります。
次に、フレーム２では光の柱のレイヤーの不透明度を14%にします。
フレーム３では光の柱のレイヤーの不透明度を39%にします。
この作業をフレーム順に続けて不透明度を上げていきます。
不透明度の単位は徐々にはっきりと見せたいため、こちらで適度な数値を選んでいます。
あくまでも参考なので、お好みの数値を決めてください。
(例：フレーム4→光の柱のレイヤー不透明度48%、フレーム５→不透明度60%、フレーム６→不透明度83%、フレーム７→不透明度96%)
各フレームの設定が終わったら、再生ボタンを押してアニメーションの確認をします。
「ループオプションの選択」からループの回数を選べます。
今回は「無限」で設定していますが、web広告用のGIFアニメーションバナーを作成するときは、出稿する広告枠のルールによってループの使用やアニメーションの秒数が決められているので、使う用途によって設定を変えてください。
ここまでで光の柱が徐々に表示されるアニメーションができたので、次はバナー用に保存します。
GIFファイルで保存する
アニメーションが出来上がったらGIFファイルで保存します。
「ファイル」→「書き出し」→「GIFとしてクイック書き出し」と「ファイル」→「書き出し」→「web用に保存(従来)」の方法がありますが、今回はGIFファイルのサイズなど細かな設定ができる「web用に保存(従来)」から保存します。
詳細設定画面で「GIF」に変換すると、ファイルサイズが444KBと出てきました。
このまま保存するとweb広告ではバナーサイズが150KB以下でないといけないため、サイズオーバーしてしまいます。
そこで「プリセット」→「GIF 128ディザ」を選択すると、ファイルサイズが下がります。
(ディザとは、限られた色数で、より多くの階調を表現する技術のことです。)
ついつい忘れてしまいがちなのが、GIFファイルで保存するときには描画は256色でしか設定できないということです。ので、高解像度の写真や人物写真などを使う時は画質が悪くなってしまうことを念頭に置いておききましょう。
web広告以外では、ディザの変更をせず高画質のままGIFを保存すればいいのですが、web広告で使用したり、サイズの指定がある場合はディザの変更をするとファイルが圧縮されます。
保存するファイルサイズを圧縮したい場合は劣化にて数値を設定すると、圧縮されて保存されます。
ディザの色を少なくして保存したり、「劣化」の数値を大幅に変更すると、画質が粗くなってしまうので要注意です！！
完成したのがこちら！
光の柱が徐々に差し込むアニメーションになってループされていますね！
いかがでしたか？
Photoshopで作ったバナーをGIFアニメーションバナーにするには、「タイムライン」から各フレーム毎にレイヤーの変化をつけるだけでGIFアニメーションバナーが作れてしまいます！
バナーをGIFファイルに保存するときは、256色でしかGIFファイルでは設定できないので、高解像度の写真や人物写真などを使う時は画質が悪くなってしまうことを念頭に置いておきましょう。
web広告で使うときは、GIFバナーを150KB以下で、アニメーションの長さは30秒以下に設定しないとバナー広告に使えないため、保存するときはリサイズや秒数にも気をつけてください！
今回はマンションの光の柱に動きをつけることによって目を引くバナーを作りましたが、動きの種類や動かす箇所は、マンションの訴求ポイントごとに決めていくと良いと思います！
関連記事：誰でも簡単に作れちゃう！マンション広告バナーの作り方
関連記事：【Google Web Designer】HTML5でアニメーションバナーをつくろう！
関連記事：【マンションバナー研究会】コンバージョンにつながる配色の基本
