静止画のアイコン画像を動くGIFアニメアイコンにする：準備編

f:id:kiichima:20190224234114g:plain

kiichimaです。

前々々回の記事で「ツイッターのアイコンを動くアイコンにしてみたくてGIFアニメのアイコン画像を作成したものの、ツイッターでは数年前に仕様変更がおこなわれており、GIFアニメ画像をアイコンに使用することはできなくなっていた。」ということをお話しました。

せっかくがんばって作成したのに目的は果たせず、休日を一日つぶした苦労も水の泡……（涙）

で、終わってはなるものか。
かくなる上は、今回のGIFアニメ制作過程をブログ記事にして公開してしまおう！

ということでお届けする記事となります。

さっそく制作過程を紹介といきたいところですが、最初に今回の僕の制作環境について述べておきたいと思います。

です。

PhotoshopとAfterEffectsについては、パソコンで画像加工や動画編集をする人だと一度は耳にしたことがあるソフトなんじゃないかと思いますが、僕の使用しているバージョンはどちらもいまやかなり古いものとなっています。

ですが、操作方法については最新版でもそんなに変わってることはないんじゃないかなー？と思います。

そして、使うソフトは別にPhotoshopとAfterEffectsじゃなくてもぜんぜんいいです。

今回の作成方法を簡単に言うと「絵をパーツに分解してそれぞれ別個に動かす！」なわけでして、そういうことができるツールなら何でもよい、ということになります。

逆に、これは厳しいかな…？というものをあげるとすると、画像編集はWindows標準の「ペイント」などレイヤーが使用できないもの。

動画編集だとWindows標準の「フォト」やApple製品標準の「iMovie」など。
これも同様にオブジェクトやレイヤーとしてものを動かせないからですね。

まあモノづくりなんて「創意工夫と力技でなんとでもなる」とは思うんですが、それを言っちゃうとわざわざ説明記事書く意味もなくなっちゃいますからね…

それでは始めます。

さあ「GIFアニメのアイコン画像を作成するぞっ」とやる気になっても、じゃあ「どんなアニメーションを作るのか？」というイメージがなくては始まりません。

僕もいままではそれが思いつかなくて一歩を踏み出せずにいたわけですが、今回はすんなりと「前に使っていたアイコンに動きを追加してGIFアニメバージョンにする！」というアイデアというか方向性がバシッと決まりました。

そうしたら、今度は「どのような動きにするか？」という具体的なイメージを決めていくわけですが、今回はツイッターのアイコン画像を作成するわけですから、それにより次のような仕様もおのずと決まってきました。

GIFはアニメーションがスタートして最後まで流れると「自動的に最初の絵に戻り、同じアニメーションを延々と繰り返す」という特性があります（止めることも出来るのかな？この辺よくわかってないです）。

となると、作成するアニメーションは「繰り返し表示されても問題のない、動きの最後と最初が違和感なくつながるもの」に仕上げる必要があります。

別に絶対というわけじゃないですが、面白いアニメーションでも繰り返しのときに「パカッ」と最初に戻られると、なんとなく興ざめしてしまうような気がします。

もう一つの「短い時間」というのは容量を軽くするためです。

GIFアニメというのは一言で言えばパラパラマンガです。
１ループの時間が長ければ、それだけ多くの枚数の絵を保持するわけですから、容量も大きくなります。

容量が大きいと、そのGIFアニメ画像を表示するのにより多くのマシンパワーが必要となり、表示させているスマホやパソコンの性能によっては動作が遅くなってしまう可能性があるわけです。

自分のアイコンのせいでフォロワーさんのタイムライン閲覧性が著しく損なわれてしまう……なんてことになったら、ほんとに生きててスイマセンという感じがします。

ということですので、以上2つの条件を考慮して作成するアニメーションを次のように考えました。

どうでしょう。

たったこれだけですが、ちゃんとアニメーションとしてのストーリーが成立していると思いませんか？

アニメーションのイメージが決まったら、いよいよ制作にとりかかります。

先にも申しましたが、今回はアイコン画像の絵をパーツに分解して、それらを個別に動かすことでアニメーションを作成する手法をとります。

そのためには、アイコン画像そのものよりもアイコンとしてトリミングする前の元画像を扱った方が、切れている部分から下の絵が残っていたりしてアニメーションさせるうえでは都合がいいです。

前回お話ししたとおりこのアイコンの絵はiPhoneアプリで描いたものですので、iPhone画面にそった縦長サイズの絵がどこかに存在するはずです。

パソコンの中を探すと、トリミング前の画像が捨てずにとっておいてありました。
過去の自分、えらい。

この絵を作成した頃はiPhone4を使っていたので、画像サイズは 640 × 960 ピクセルです。
こいつを画像編集ソフトで開いてアニメーションに必要なパーツに分解していくわけです。

さて、いよいよこれから具体的に手を動かして作成を進めていくわけですが、すいません。いったん続かせてください（汗）

決してもったいぶるわけじゃなく、このあとも書いてはいるのですが、なんかうまくまとめられないというか。

どこまで説明するのか、そもそもどこから説明すべきなのか。
こんなものの作り方なんか書いても需要あるのか？意味があるのか？

など、情けないことにいろいろ悩んじゃってます（笑）
実はここまでも書くのにも、何度も書き直しして丸二日はかかってます。

長くなりそうなので、今回は「準備編」ということでいったん締めさせてください。
それでは、また。

あー、How to ものって難しい。。