見出し画像

雑記(2024/7/13)-GIFをつくろう

ここ最近はヤケ買いばかりしているトルテです。
ついつい買っちゃう。そして満足してしまう。
こうして積みゲーはより高くそびえるんですね。

まあそれはそれとして。
今回はちょっと前にやってたことを書き出しておこうかなと。
先に書いときますがあまり面白い話ではないです。
普通に間違ってる情報とかありそうだし……。



ことのほったん

最近、X(もといツイッター)を惰性で使ってると、とある宣伝ツイートが流れてきました。
以下にリンクを貼ります。

コレね。以前より名前だけは知ってましたが、まじまじと見たのは初めてかも。
漫画のプロモーション映像なわけですが、冒頭の子があまりにもエッチなので凄いなぁと思ってたら、何でも男の子らしい。まあ私はどっちでも、というかどちらに属してなくてもイケますので、特にさしたる問題でもないですね。

まあこのような、何かしらぶっ刺さるイラストや作品に出会う経験自体はXを見てたらよく起こることです。
いちいち悶絶してるとキリがないから、大体の場合はスルーしちゃうことも多くて、今回もまあ最初は軽く流したんですが……。

その後、自分の中で「どうみても見た目女だろこの男ブーム」が来まして、「どうみても見た目女だろこの男概念っていいな」と思うようになります(ブームは周期性を持っているので、急に現れて急に消え去ります)
素敵な同人誌とか読みたいな……と思っていたんですが、そういえばこの前見た子は男だったなと思い出し、じゃあこの子を愛でるかと。

思い立ったら吉日。
そして改めて映像を見返すと冒頭シーンがやはりとても良い。できればこのシーンのみ欲しいな、と思ったので、切り抜いてるアカウントがいないか探し始めました。

スルーした時なんかは、引用で当該シーンをGIF化してる人なんかも見かけたんだけど、この時には山のような引用が付いてて全然見つからず。
その後、何度かワード検索も使ってようやくGIF化してる人を見つけ出したんですが、ループ処理が上手くいってなくてちょっと不自然。これは美しくないなと。
というか後から知ったんですが、バニラの状態だとXからGIFってDLできないんですね。やったことないから全然知らなかった……。

まあ何にしろ、求めた状態じゃないし、かといって冒頭だけの映像を録画して編集もダレるから、元気があるうちにGIFを自分で作ってみるかぁとなりました。
こうして無駄に苦労したGIF作りが始まります。

そざいをあつめる

GIFなんて作ったことがありませんので、まずは作り方を調べてみます。
すると、専用のアプリなどを使わなくてもウェブ上で作れるサイトがいくつかヒットしました。
動画からGIFを作るタイプもありましたが、たぶんGIF制作でやってることはアニメと同じだろうと漠然と思ってたので、当該シーンを一通りスクショして1秒間○コマみたいに連結させる方向でやってみることにしました。
要するに、画像からGIFを作るタイプですね。

さっそく、元の動画をコマ送りのように再生していきます。この時は一連の流れをスマホで完結させようとしたので、スマホで直に動画をスクショしてました。無駄に手間だな……。
コマがどれだけ進んでるかは画面上部のミラーボールの光で判別しました。キャラクターの動きで判別すると混乱しそうな気がしたので。
それで、ひとつずつスクショしたところ、当該シーンには全部で10コマ、またアニメーションの1ループに4コマ使われてることが分かりました。

1ループ目→1〜4コマ
2ループ目→5〜8コマ
3ループ目→9〜10コマ(この次のコマから場面転換)

なので、GIF化するなら1〜4コマまでのスクショがあれば良いのですが、背景は4コマでもキャラクターはそうじゃない可能性もあるので、GIF化には1〜8コマまでのスクショを使用しました。まあほとんど念の為って意味合いですね。
もしこの場合、1〜10コマでGIFを作ると間のアニメーションが飛ぶので動きがぎこちなくなると思われます。
幸い、この当該シーン自体がGIFのように短いコマをループしてる映像だったので、綺麗にGIF化するにはうってつけだと思います。

また、適当に測ったので正確じゃないかもですが、9コマ目にてシークバーの時間が1秒進んだので、1秒8コマのアニメーションであることが分かりました。
この情報はあとで使います。

写真フォルダにまとめたスクショの画像。
「全部同じじゃないですか!?」「もっとよく見ろ!」
と言う気持ちになってくる。

「キャラの動きで判断すると混乱しそう」と本文に書いたけど、こんな感じで1コマずつだと動きが掴みにくい。
なので、動きが大きい別のものを基準にスクショしていった。

GIFをまなぼう

まず、適当に検索して出てきたこのサイトに素材をぶっ込み、とりあえず作成。


…したのは良いものの、明らかにアニメーション速度がオリジナルより速いGIFが完成しました。
これはこのサイトだと0.1秒単位で点滅間隔(次の画像に移るまでの時間)を調節できるのですが、これを最も早い0.1秒にしていたのがダメだと気づきます。
なのでとりあえず点滅間隔を0.2秒にしてみますが…。
しかし、そうすると今度はオリジナルに比べて遅いGIFが出来上がってしまいます。

つまり、点滅間隔が0.1〜0.2秒の間が、オリジナルの速度ということになりますね。ただ、このサイトでは前述したように0.1秒単位でしか調節できないので、これ以上オリジナルに近づけるのは難しいでしょう。

そもそも、オリジナルのここで言う点滅間隔=次の画像に切り替わる秒数はどれくらいなんでしょう?
…まあこれはさっき書いたんですが、オリジナルの動画は1秒8コマでした。つまり、1秒間の間に8回画像が切り替わっているわけです。
そして、1÷8=0.125なので、オリジナルの点滅間隔=0.125秒ということになります。

ちなみに、アニメとかだとよく1秒24コマを聞きますが、これは約0.04秒に1回画像を切り替えていることになります。
…そう言った情報は置いといて、とりあえずもうちょっとオリジナルに近しいGIFにすべく、他のサイトやアプリの情報を探ってみます。

すると、GIFについて以下のような記述が見つかりました。

30fpsの動画は等速のままGIFアニメには変換できません。同じフレーム数のまま33.33fpsに強制変換され、そのぶん速度も約1.1倍になります。

これは、GIFアニメではフレーム間の時間間隔が「0.01秒単位」と決められているために起こります。30fpsの場合フレーム間は0.0333秒となるため、フレーム間が0.03秒に調整されることで、フレームレートと速度が強制変換されます。

よって、動画から等速のままGIFに変換できるフレームレートもおのずと制限されます。以下は一例です。50fps(フレーム間0.02秒)
25fps(フレーム間0.04秒)
20fps(フレーム間0.05秒)
12.5fps(フレーム間0.08秒)
10fps(フレーム間0.1秒)

動画→GIFアニメ変換をPhotoshopできれいに仕上げる方法(https://www.maxmouse.co.jp/tips/2021/0517/)より引用


FPSとは1秒間に更新される画像の数のことです。
今回の事例だと1秒8コマ=8FPSとなりますし、1秒24コマでは24FPSとなります。
つまりは、GIFに変換する過程において8FPSの完全再現はできないと言うことですね。
それに近しい数値だったり、ちょっと工夫をすれば擬似的に8FPSにはなりますが、オリジナルそのままのGIFは作れないみたいです。

動画をそのまま変換できるものだとずっと思ってたので、調べてみてびっくりしました。
何事にも興味を持ってみるものですね……。

GIFをつくろう

ひとつ賢くなったところで、改めてGIFを作っていきます。
今回使用するのは、点滅間隔(FPS)の設定が自由に指定でき、オプションも豊富なこちらのサイト。


画像を突っ込んだのち、解像度をオリジナルに、アニメ速度を120(8.3FPS)に指定しました。
オリジナルに近い数値として130(7.7FPS)もありましたが、どちらも出力してみると前者の方がオリジナルに近い感覚があったので。
まあこればかりは完全に好みな気もしますが。

これにてGIF完成!
疲弊したので当初の目的はどこかに行ってしまいましたが、普段やらないことを調べるのは楽しいね。
久々に良い息抜きになりました。

備忘録みたく書いてみましたが、いかがでしたか?
中身のあまりない変な記事になってしまいましたが、今回はこの辺りで。


そして!
こんな読みにくい文章を最後まで読んでくれた人がいるのならすごく嬉しいので!

今回、無駄に苦労して作ったGIFをおすそ分け!
これで作らなくても済むね……!


「生徒会にも穴はある!」プロモーション映像冒頭のGIF
アニメ速度120(8.3FPS)版



追記GIF
アニメ速度130(7.7FPS)版
何だかこっちの方がオリジナルに近く感じてきたので……。
好きな速度の方を愛でましょう!

この記事が気に入ったらサポートをしてみませんか?