簡単なGIFアニメは何度も作っていたのですが、こだわったものを作ろうとするとなかなかうまくいかない！
今回こだわったGIFアニメを作ろうとしたらいろいろと問題が出てきました。
解決するまでの流れをまとめてみようと思います。
広告用のGIFアニメをつくる
ブログを書いてアフィリエイトを貼り付ける。
そんな記事が間もなく２００記事になろうとしています。
そんな時ふと思いました。
ここに自分の宣伝を入れるといいのではないか？
宣伝したいことは在ります。
大道芸ライブ配信
ところが、今まで宣伝広告を作るという概念がなかったため一から考えてみる事にしました。
簡単にやれるのはGIFアニメかな？
そんな感覚で今回取り組んでみました。
今現在の完成形
一見完成されたように見えますが、見出しとGIFアニメとの間に結構隙間が空いてるのがわかりますか？
これはGIFアニメの高さが大きくなってしまっているのです。
今後これを解決していこうと思うのですが、とりあえずここまで作るのにかかった手順を紹介していこうと思います。
バナーサイズ
まず最初に考えたのはバナーのサイズです。
どれが一番最適なのかな？
先ず僕のブログだと、見る人の９割がスマートフォンというデーターが出ています。
まぁ今はどのサイトもそうかもしれないですけどね(;^_^A
なのでスマフォで見やすいサイズ感がいいかな？
調べた結果３つのサイズに絞り込みました。
３００×２５０
３２０×５０
３２０×１００
初めて作るには小さいほうが簡単かな？という安直な考えで３２０×５０で作ろうと思ったのですが、写真を入れてみると写真が小さくなりすぎる(；▽；)
ということで３２０×１００で行うことにしました。
１サイクルの時間
GIFアニメはエンドレスで繰り返してくれるものと、一度最後まで行ったら止まってしまう二つのタイプがあります。
どちらにせよ１サイクルの時間はどれくらいがいいのかな？と考えた時にテレビコマーシャルを思い出しました。
CMは１５秒版と３０秒版の二つが一般的です。
GIFアニメを作った時に思わず見入ってしまった場合どれくらいの時間がいいのかな？と考えた時にコマーシャル位の長さがいいのではないか？
と一つの過程を建ててみました。
そして１５秒でひと段落、３０秒で全部
そんなものを作ってみようと思いました。
宣伝したい内容を考える。
宣伝したいことは大道芸ライブ配信です。
これが何なのか？
どうしたらクリックしたくなるのか？
そういったことを考えて９個の文を考えました。
- アルジェントさーかす大道芸ライブ配信
- 大道芸・サーカス・わらい
- ツイキャスで配信中
- みんな見に来てね♪
- 大道芸人GEN(ジェン)大道芸ライブ配信
- そこには歓声と笑い声と叫び声がある
- ツイキャスで配信中
- ここをくりっくしてね
- 待ってまーす
１０個あれば３秒づつで３０秒なのですが、あまり多すぎても読むのが大変なので、無理に１０個考えないことにしました。
ベース画像を作る
GIFアニメですから、当然GIF画像をつなぎ合わせてアニメーションを作っていきます。
その為にベースとなるGIF画像を作る必要があります。
今回は写真と文字で作っていこうと思うので、画像編集アプリを使いました。
僕はアルくんにイラストの描き方を習っているので、スマホ（Galaxyノート８）で絵を描いたり画像処理をすることが多いです。
使っているアプリはMediBang
これで画像と文字を入れた画像を９つ作りました。
これをGIFメーカーエディターでアニメーションを作ってみました。
ここで一つ問題が！
ひとつ3秒表示されると凄く長く感じる。
なので動きが必要と考えました。
GIFアニメのコマ数を増やして動きをつける。
例
この画像だったら
この二つの画像を追加して文字がひとつづつ浮かび上がってくるようにしました。
全ての画像を用意してもい一度GIFメーカーエディターで作ってみると、
次の問題が・・・(；▽；)
GIFメーカーエディターだと速度調整はできるもののすべてが均等に切り替わってしまう為、それぞれの動き方によって時間が大きく変わってしまう上に文字の動き方が遅すぎるものが出てきてしまうという問題が・・・(ノＴ∇Ｔ)ノ )))))) はぅ～～っっ
ひとつづつアニメーションを作ってみる。
ひとつづつアニメーションを作ることによって一つについて3秒という問題はクリアーする事が出来ました。
この段階では動かないものがあってもいいかな？と思っていました。
が、止まっているとそこで終わってしまったと思ってみるのをやめてしまうことが判明！
そこでアプリについてる
全部をつなぎ合わせてみる。
ここでまた問題が勃発！
GIFメーカーエディターだとGIFアニメをつないでいく事が出来ないのです(´；ω；`)ｳｩｩ
そこでひとつづつ作ったGIFアニメを一度動画にして保存して、動画編集アプリでつないでそれを改めGIF アニメにすることに挑戦。
この時使った動画編集はVivaVideoというアプリを使いました。
このアプリはスマホで動画を作る時に比較的簡単に使う事ができる為、重宝しています。
よく使うので僕は有料版VivaVideo PROを使っています。
できた！と思って画像を確認してみると・・・
後半アニメーションがちゃんと動いていない(；▽；)
スマホだとこの辺が限界なのかな？他にもGIFアニメを作るアプリはあるものの、どれを使ったいいのかわからない！
だれか良いGIFアニメを作るアプリを知ってる人がいたら教えてください(｡>人<｡)
そこでPCで作ることにしたもののフリーソフトで探してもいまいちどれがいいのかわからない( ﾉД`)ｼｸｼｸ…
こちらも誰か良いフリーソフトを知ってる方がいたら教えてください(｡>人<｡)
そこで昔使っていたホームページビルダーのWEBアニメーターを引っ張り出してきました。
最近はホームページはWordPressで作っているため、ホームページビルダーは全然使ってないのです。
このWEBアニメーターは使い勝手がよく、使いたい機能、がほぼすべて入っています。
めんどくさがらずに画像が出来た時点でこれで作っておけばよかった！
と思えるほどスムーズに作れました。
ところが、冒頭にも書いたバナーの高さ問題
これだけがかいけつできない！
実際の画像の背景を黒くするとこんな感じです。
この黒い部分までがGIFアニメとして保存されてしまっているのです。
これを画像編集ソフトで余白を切ろうと思ったらアニメではなく、ただのGIF画像となってしまったので、繰りぬくことはできませんでした。
どうしたらいいんだ！！
でもとりあえずは使う事ができるので、さっそくブログに張り付けてみました。
今後この問題が解決出来たらまた報告させていただきます。
ちなみにこれもGIFアニメ
これくらい単純なものならすぐに作れちゃうんですけどね(;^_^A
大道芸ライブ配信についてはこちらをご覧ください。
アルジェントさーかすについてはこちらをご覧ください。
大道芸人GEN（ジェン）についてはこちらをご覧ください。
コメント