follow us in feedly

GIFアニメを作成してみた!こだわるといろいろ問題が出てきました。

大道芸ライブ配信GIFアニメ1 雑学
大道芸ライブ配信はこちら

簡単なGIFアニメは何度も作っていたのですが、こだわったものを作ろうとするとなかなかうまくいかない!
今回こだわったGIFアニメを作ろうとしたらいろいろと問題が出てきました。
解決するまでの流れをまとめてみようと思います。

広告用のGIFアニメをつくる

はじけるクラウン

ブログを書いてアフィリエイトを貼り付ける。

そんな記事が間もなく200記事になろうとしています。

そんな時ふと思いました。

ここに自分の宣伝を入れるといいのではないか?

宣伝したいことは在ります。
大道芸ライブ配信

ところが、今まで宣伝広告を作るという概念がなかったため一から考えてみる事にしました。

簡単にやれるのはGIFアニメかな?

そんな感覚で今回取り組んでみました。

今現在の完成形

大道芸ライブ配信GIFアニメ1
大道芸ライブ配信はこちら

一見完成されたように見えますが、見出しとGIFアニメとの間に結構隙間が空いてるのがわかりますか?

これはGIFアニメの高さが大きくなってしまっているのです。

今後これを解決していこうと思うのですが、とりあえずここまで作るのにかかった手順を紹介していこうと思います。

バナーサイズ

まず最初に考えたのはバナーのサイズです。

どれが一番最適なのかな?

先ず僕のブログだと、見る人の9割がスマートフォンというデーターが出ています。
まぁ今はどのサイトもそうかもしれないですけどね(;^_^A

なのでスマフォで見やすいサイズ感がいいかな?

調べた結果3つのサイズに絞り込みました。

300×250
320×50
320×100

初めて作るには小さいほうが簡単かな?という安直な考えで320×50で作ろうと思ったのですが、写真を入れてみると写真が小さくなりすぎる(;▽;)

ということで320×100で行うことにしました。

風船を被ったお化けが厚木市に登場

1サイクルの時間

GIFアニメはエンドレスで繰り返してくれるものと、一度最後まで行ったら止まってしまう二つのタイプがあります。

どちらにせよ1サイクルの時間はどれくらいがいいのかな?と考えた時にテレビコマーシャルを思い出しました。

CMは15秒版と30秒版の二つが一般的です。

GIFアニメを作った時に思わず見入ってしまった場合どれくらいの時間がいいのかな?と考えた時にコマーシャル位の長さがいいのではないか?

と一つの過程を建ててみました。

そして15秒でひと段落、30秒で全部
そんなものを作ってみようと思いました。

宣伝したい内容を考える。

宣伝したいことは大道芸ライブ配信です。

これが何なのか?
どうしたらクリックしたくなるのか?
そういったことを考えて9個の文を考えました。

  • アルジェントさーかす大道芸ライブ配信
  • 大道芸・サーカス・わらい
  • ツイキャスで配信中
  • みんな見に来てね♪
  • 大道芸人GEN(ジェン)大道芸ライブ配信
  • そこには歓声と笑い声と叫び声がある
  • ツイキャスで配信中
  • ここをくりっくしてね
  • 待ってまーす

10個あれば3秒づつで30秒なのですが、あまり多すぎても読むのが大変なので、無理に10個考えないことにしました。

クラウン(道化師)ロイくん

ベース画像を作る

GIFアニメですから、当然GIF画像をつなぎ合わせてアニメーションを作っていきます。
その為にベースとなるGIF画像を作る必要があります。

今回は写真と文字で作っていこうと思うので、画像編集アプリを使いました。

僕はアルくんにイラストの描き方を習っているので、スマホ(Galaxyノート8)で絵を描いたり画像処理をすることが多いです。

使っているアプリはMediBang 

これで画像と文字を入れた画像を9つ作りました。

これをGIFメーカーエディターでアニメーションを作ってみました。

ここで一つ問題が!
ひとつ3秒表示されると凄く長く感じる。
なので動きが必要と考えました。

GIFアニメのコマ数を増やして動きをつける。

大道芸・サーカス・わらい

この画像だったら

大道芸
大道芸・サーカス

この二つの画像を追加して文字がひとつづつ浮かび上がってくるようにしました。

全ての画像を用意してもい一度GIFメーカーエディターで作ってみると、

次の問題が・・・(;▽;)

GIFメーカーエディターだと速度調整はできるもののすべてが均等に切り替わってしまう為、それぞれの動き方によって時間が大きく変わってしまう上に文字の動き方が遅すぎるものが出てきてしまうという問題が・・・(ノT∇T)ノ )))))) はぅ~~っっ

ひとつづつアニメーションを作ってみる。

ひとつづつアニメーションを作ることによって一つについて3秒という問題はクリアーする事が出来ました。

この段階では動かないものがあってもいいかな?と思っていました。

が、止まっているとそこで終わってしまったと思ってみるのをやめてしまうことが判明!
そこでアプリについてる

全部をつなぎ合わせてみる。

ここでまた問題が勃発!

GIFメーカーエディターだとGIFアニメをつないでいく事が出来ないのです(´;ω;`)ウゥゥ

そこでひとつづつ作ったGIFアニメを一度動画にして保存して、動画編集アプリでつないでそれを改めGIF アニメにすることに挑戦。

この時使った動画編集はVivaVideoというアプリを使いました。
このアプリはスマホで動画を作る時に比較的簡単に使う事ができる為、重宝しています。
よく使うので僕は有料版VivaVideo PROを使っています。

できた!と思って画像を確認してみると・・・

後半アニメーションがちゃんと動いていない(;▽;)

スマホだとこの辺が限界なのかな?他にもGIFアニメを作るアプリはあるものの、どれを使ったいいのかわからない!

だれか良いGIFアニメを作るアプリを知ってる人がいたら教えてください(。>人<。)

そこでPCで作ることにしたもののフリーソフトで探してもいまいちどれがいいのかわからない( ノД`)シクシク…

こちらも誰か良いフリーソフトを知ってる方がいたら教えてください(。>人<。)

そこで昔使っていたホームページビルダーのWEBアニメーターを引っ張り出してきました。

最近はホームページはWordPressで作っているため、ホームページビルダーは全然使ってないのです。

このWEBアニメーターは使い勝手がよく、使いたい機能、がほぼすべて入っています。

めんどくさがらずに画像が出来た時点でこれで作っておけばよかった!
と思えるほどスムーズに作れました。

ところが、冒頭にも書いたバナーの高さ問題
これだけがかいけつできない!

実際の画像の背景を黒くするとこんな感じです。

この黒い部分までがGIFアニメとして保存されてしまっているのです。

これを画像編集ソフトで余白を切ろうと思ったらアニメではなく、ただのGIF画像となってしまったので、繰りぬくことはできませんでした。

どうしたらいいんだ!!

でもとりあえずは使う事ができるので、さっそくブログに張り付けてみました。

今後この問題が解決出来たらまた報告させていただきます。

ちなみにこれもGIFアニメ

これくらい単純なものならすぐに作れちゃうんですけどね(;^_^A

大道芸ライブ配信についてはこちらをご覧ください。

大道芸ライブ配信!家にいながら見れる♪これからの大道芸の可能性!
家にいながら大道芸を見ることが出来る。 コロナが猛威を奮ってる今、需要は高いです。 さらに大道芸をライブ配信する事により今まで仕事にならない様な現場でも大道芸をする事ができるようになってきます。 今後大道芸が発展していく為の新たな挑戦です。

アルジェントさーかすについてはこちらをご覧ください。

大道芸やイベントで大人気!アルジェントさーかすのパフォーマンスを見たら笑うしかない。
2019年アルジェントさーかすは様々なイベントでパフォーマンスを披露してきました。大道芸、イベント、お祭り、企業イベント、町おこしイベント、商業施設イベント、保育園、老人ホーム、大道芸フェスティバル、観光地、などなど驚くべき点は一...

大道芸人GEN(ジェン)についてはこちらをご覧ください。

『大道芸人GEN(ジェン)』のページ『ハッピーメリーサーカス』や『アルジェントさーかす』で活躍するパフォーマーです。
GEN(ジェン)とはGEN(ジェン)は世紀末(1999年)にパフォーマンスを始めた芸歴20年を超えるサーカス芸を行うパフォーマーです。サーカス芸を大道芸で面白おかしく見せています。ステージショー・イベント・...

コメント

タイトルとURLをコピーしました