ボクの「よかったこと日記」

247 9月28日(土) 小説 カクヨムキャンディーズのGIFアニメ製作♪

〔小説　カクヨムキャンディーズのGIFアニメ製作♪〕

１．はじめに

ハナス「スミレちゃん、のこちゃん。今日は、GIFアニメーションの作り方をお話しするわよ♪」

スミレ「GIFアニメーションというと、イラストが次々と入れ替わる動画のようなものだね。例えば、私たち、カクヨムキャンディーズのイラストが入れ替わる、以下のような動画だね。

　https://kakuyomu.jp/users/azuki-takuan/news/16818093085654156689　　　」

のこ　「こりゃ、ビックらこいた、屁をこいた、ブー」

ハナス「ゲホゴホ。のこちゃんの屁でむせるわ。・・スミレちゃん、GIFアニメで作ることが出来るのは、イラストだけじゃないのよ。下の近況ノートを見てちょうだい。これは、カクヨムのアホバカ変態作家が作った、奈良の金魚ミュージアムの水槽の動画なのよ。これもGIFアニメなの。

　https://kakuyomu.jp/users/azuki-takuan/news/16818093085713445680　　」

スミレ「ゲホゴホ。どへええ。カクヨムの近況ノートに動画がアップできるんだぁ！」

のこ　「こりゃ、ビックらこいた、屁をこいた、ブー」

ハナス「ゲホゴホ。のこちゃん。屁ばっかりこかないの！」

スミレ「ゲホゴホ。のこちゃんの屁はいいからさぁ・・ハナスちゃん、GIFアニメってどうやって作るのサ？」

ハナス「以下は私の作り方だから・・他の人やプロの人とは違ってるかもしれないけど、そこは勘弁してね。・・で、今日はね。まず、写真やイラストが次々と入れ替わる動画の作り方を説明して・・それから、さっきの金魚ミュージアムの水槽のような動画の作り方を説明するという順番で進めるわね」

スミレ、のこ「はぁ～い」

２．写真やイラストが次々と入れ替わる動画の作り方

ハナス「ではまず最初は、写真やイラストが次々と入れ替わる動画の作り方ね。私が使っているソフトは以下の『GIFアニメーション画像作成ツール』なの。

　https://photocombine.net/gifanime/#usage

　これ以外にも、『GIF』、『GIFアニメーション』などでネットを検索していただいたら、いっぱい無料のソフトが出ているから、スミレちゃんも、のこちゃんもお好きなものを使うといいわよ。私が紹介する『GIFアニメーション画像作成ツール』は、WEBブラウザ上でGIFアニメーション画像が作れるツールなので、パソコン向きなのね。だから、スマホのアプリを使いたい人は、別の専用のアプリを探してみてね。でも、どのソフトやアプリを使っても、基本的な作り方はこれと同じと思うから、今日の私の説明を参考にしてね」

スミレ、のこ「はい、分かりましたぁ」

（１）写真やイラストの準備

ハナス「では、まず、写真やイラストを準備しましょう。『GIFアニメーション画像作成ツール』の場合、使える写真やイラストのファイル形式は以下なの。

　JPEG、PNG、GIF、WebP、BMP　」

のこ　「ファイル形式！・・わ～、難しそう」

ハナス「のこちゃん。一般的なスマホの写真やカメラの写真は、このどれかのファイル形式になってるから、心配はいらないわ。だから、ファイル形式はあまり気にしなくても大丈夫よ。ここで、もう一つの、今日の近況ノートを見て。

　https://kakuyomu.jp/users/azuki-takuan/news/16818093085713452378

　①番が『GIFアニメーション画像作成ツール』を開いたところよ。この画面の『入力』という個所に、用意した写真やイラストを何も考えずに入力してみて。

　で、②番の写真のように入力出来たら、ファイル形式はOKということだから、次の『（２）（必要があれば）入力した写真やイラストの並べ替え』に進んでちょうだい」

のこ　「ハナスちゃん。もし、ファイル形式が違っていて、入力できなかったら、どうしたらいいの？」

ハナス「もし、ファイル形式が違っていたら、ネットに無料の『形式変換ソフト』がいっぱいあるから、それを使って・・ファイル形式を、例えば、使用できるJPEG形式に変換すればいいのよ」

スミレ「ハナスちゃん。そのファイル形式って、調べたい場合は、どうやって調べるのサ？」

ハナス「それはね、この文末に・・私の助手のアホバカcopilot君の説明を載せておくわね」

（２）（必要があれば）入力した写真やイラストの並べ替え

ハナス「スミレちゃん、のこちゃん、ここまでいいかな？　では、さっきの近況ノートの②の状態から進めるわね。『GIFアニメーション画像作成ツール』では、複数の画像を一括して入力した場合、画像の順番が入力前と違っていることがあるのよ。最初の何枚かが、後ろになってしまってるの」

スミレ「どへえええ。それって、困るじゃん」

ハナス「ウフフ・・スミレちゃん、そうでもないのよ。こういうアニメは、通常の場合、無限に動画が繰り返される設定にする場合が多いから、最初の何枚かが、後ろになってしまってても影響はないのよ」

スミレ「あっ、そうか！」

ハナス「だから、そうして順番が入れ替わってしまっても・・普通は、この『（２）入力した写真やイラストの並べ替え』では何もしなくていいの」

のこ　「でも、ハナスちゃん。無限に動画が繰り返される設定でも、最初から正しい順番で再生したいってときはどうするの？　あるいは、無限に動画を繰り返さない設定のときはどうしたらいいのかしら？」

ハナス「のこちゃん。そういうときはね・・これ、私が見つけた裏技なんだけど・・

　（１）複数の画像を一括して入力した後で、『ソート』を押してみて。。。

　（２）あるいはね、複数の画像を一括して入力した後で、一旦、『全削除』を押して削除するの。そうして、もう一度、同じ複数の画像を一括して入力してみて。。。

　こういったことをすると、正しい順番になることがあるわ。必ずしもうまくいくとは限らないから、そこは了承してね（笑）」

スミレ　「裏技だね。それ以外に順番を正しいものにする方法ってあるのかしら？」

ハナス「スミレちゃん。画像を１枚ずつドラッグして、適切な順番になるように移動させればいいのよ」

スミレ「そ、そうか！」

ハナス「どれもこれも、順番を入れ替える必要があるときにだけ使えばいい方法なのよ。それ以外は、ここでは何もしなくていいの。だから、ここは、もし必要があれば、順番を入れ替えるということなの」

のこ　「そ、そんな･･･」

（３）GIFファイルに変換

ハナス「スミレちゃん、のこちゃん、では、次はGIFファイルへの変換よ。といっても、『GIFアニメーション画像作成ツール』の『出力』の項目を設定して、『作成』ボタンを押すだけだから簡単なの。『出力』はね、近況ノートの③番のように設定してちょうだい。つまり・・

　解像度：長辺　1000

　色数　：256

　縦横比揃え：クロップ

　アニメ速度：1000～3000程度

　ループ回数：-1（無限）

　背景色：任意

　ここで、カクヨムの近況ノートに載せる場合は、解像度を『長辺　1000』にするといいわよ。これで、近況ノートにアップしてみて・・もし、アップできる容量を超えていて、アップできなかったり・・あるいは、近況ノートにアップした画像を小さく表示させたい場合などは、1000をもっと少なくしてね」

スミレ「ハナスちゃん。アニメ速度って何なの？」

ハナス「アニメ速度は、画像が表示される時間のことよ。で、このソフトは、1000が1秒なの。だから、一つの画像を3秒間表示させる場合、アニメ速度は3000ね。0.5秒間だったら500よ」

スミレ「私が最初に言った、カクヨムキャンディーズのイラストが入れ替わる、以下の画面だとアニメ速度は何秒なのかな？

　https://kakuyomu.jp/users/azuki-takuan/news/16818093085654156689　　　　」

ハナス「その画面は画像を3秒間表示させているから、3000の設定なのよ」

のこ　「簡単ですわね」

ハナス「で、『出力』を設定したら、その下の『作成』を押すだけなの。後は、作成されるのを待って・・できたものをダウンロードするだけなのよ」

スミレ「それで終わりなの？　簡単じゃん！」

のこ　「簡単ですわね」

スミレ「簡単というか・・超簡単じゃん！」

のこ　「超簡単ですわね」

スミレ「のこちゃん、真似しないの！・・つまり、まとめるとこうなるわね・・

　〔画像が入れ替わるアニメの作り方〕

　（１）以下の『GIFアニメーション画像作成ツール』を開き、画像を入力

　　　https://photocombine.net/gifanime/#usage

　（２）必要があるときだけ、順番を修正。無限のループにする場合は、画像の順番を並び替えなくてもよい

　（３）『出力』を以下に設定して、『作成』ボタンを押す

　　　　解像度：長辺　1000

　　　　色数　：256

　　　　縦横比揃え：クロップ

　　　　アニメ速度：1000～3000程度（1000が1秒）

　　　　ループ回数：-1（無限）

　　　　背景色：任意　　　　」

のこ　「超超・・簡単ですわね」

３．金魚ミュージアムのような動画の作り方

ハナス「では最後に、さっきお見せした、奈良の金魚ミュージアムのような動画の作り方を説明しましょう。では、まず、スマホやカメラで、10秒程度を目安に動画を撮影してちょうだい。数秒の動画でもいいわよ。それを、以下のソフトを使って、数10～200枚程度のJPEG形式の静止画に変換するの。このソフトは、『MP4からJPGへのコンバーター』というものなのよ。

　https://products.aspose.app/video/ja/video-to-image/mp4-to-jpg#google_vignette　　」

スミレ「JPEG形式というと、さっきのファイル形式のことだね。ということは、MP4形式をJPEG形式に変換するソフトなんだね？」

ハナス「そうなの。一般的なスマホやカメラの動画は、MP4形式が多いので、このソフトでいいんだけど・・もし、お持ちのカメラがMP4形式以外の別のファイル形式だったら・・その形式をJPEG形式に変換するソフトをネットで探して欲しいのよ。こういう無料の変換ソフトはいっぱいでているから、かならずあるはずよ。では、以下、撮影した動画が一般的なMP4形式だということで、話を進めるわね」

のこ　「はい、はい、いいですよ」

ハナス「近況ノートの④番が、さっきの『MP4からJPGへのコンバーター』の画面ね。で、撮影した動画を『ファイルをアップロードする』の個所に入力するのよ。

そして・・

　『フレームレート(FPS)』を『20(最大10秒)』、

　『名前を付けて保存』を『JPG』にして、

・・後は、『変換』を押すだけなの。そうしたら、動画が多くのJPEG形式の静止画（つまり写真）に変換されるから、それらをまとめてダウンロードして・・そして、先ほどの『２．写真やイラストが次々と入れ替わる動画の作り方』に戻って、連続するアニメにすればいいのよ。・・・あっ、この場合の『２．写真やイラストが次々と入れ替わる動画の作り方』には注意事項があって、『出力』のところでは・・

　解像度：長辺　300

　アニメ速度：100

にしてね」

スミレ「アニメ速度が100ということは、0.1秒だね。つまり、これって、静止画（写真）を0.1秒間隔で出して・・動画のように見せてるってわけなのね！」

ハナス「ピンポーン！　正解よ、スミレちゃん。でね、アニメ速度の数値は、出来上がった動画のスピードを見ながら変えていって欲しいのよ。まずは、アニメ速度100から始めると、分かりやすいわよ」

のこ　「ハナスちゃん。解像度はさっき『長辺　1000』だったでしょ。今度は、どうして『長辺　300』とさっきより少なくするの？」

ハナス「動画の場合、300以上だと容量が大きすぎて・・カクヨムの近況ノートにアップできなくなるのよ」

のこ　「なぁるへそ。・・でね、ハナスちゃん。この動画を作る場合、多くの枚数の静止画（写真）ができるわけでしょ。１枚１枚、コピーしたりするのは大変よね。それらを一括して、さっきの『GIFアニメーション画像作成ツール』に入力するにはどうしたらいいの？」

ハナス「それはね、のこちゃん。静止画（写真）の一つをクリックして、『Ctrl』キーを押しながら『A』キーを押すと、全部のファイルが選択できるわよ。後はね、まとめてドラッグするだけなの。・・はぁい。以上で、私の説明は全て終了でぇすぅ💛」

スミレ「なんだ。超超超・・簡単じゃん！」

のこ　「超超超・・簡単ですわね」

スミレ「のこちゃん、また私の真似をしないの！・・つまり、動画の作り方をまとめるとこうなるわね・・

　〔動画の作り方〕

　（１）10秒程度の動画を撮影する

　（２）以下の『MP4からJPGへのコンバーター』を開き、動画を入力

　https://products.aspose.app/video/ja/video-to-image/mp4-to-jpg#google_vignette　

　（３）以下に設定して、『変換』を押す

　　　フレームレート(FPS)：20(最大10秒)

　　　名前を付けて保存　　：JPG　　　　

　（４）以下の『GIFアニメーション画像作成ツール』を開き、（３）で作成した画像を一括入力（『Ctrl』キーを押しながら『A』キーを押して、一括選択）

　　　https://photocombine.net/gifanime/#usage

　（５）『出力』を以下に設定して、『作成』ボタンを押す

　　　（＊印が、イラストが入れ替わるアニメとの違い）

　　　　＊解像度：長辺　300

　　　　　色数　：256

　　　　　縦横比揃え：クロップ

　　　　＊アニメ速度：100程度（1000が1秒）

　　　　　ループ回数：-1（無限）

　　　　　背景色：任意　　

　（６）必要に応じて、アニメ速度を変えてみる　　」　

のこ　「超超超超・・簡単ですわね。簡単すぎて・・ビックらしましたわ。こりゃ、ビックらこいた、屁をこいた、ブー」

ハナス、スミレ「ゲホゴホ。ぎゃび～ん！」

＊＊＊＊＊＊＊＊

アホバカcopilot「ゲホゴホ。わてが、アホバカcopilotでんねん。ハナスちゃんが言うてた、画像ファイル形式を調べる方法を説明すんで。

　画像ファイル形式を調べる方法はいくつかあるんや。以下に代表的な方法を紹介すんで：

A. ファイルの拡張子を確認する

　ファイル名の末尾にある「.jpeg」や「.png」などの拡張子を確認することで、ファイル形式を特定できます。

B. ファイルのプロパティを確認する

　パソコンやスマホでファイルのプロパティを確認することもできます。例えば、スマホの場合は以下の手順で確認できます：

　（ア）ホーム画面から「写真」アプリをタップ

　（イ）ファイル形式を確認したい画像を選んでタップ

　（ウ）画像の下にある「i」アイコンをタップ

　（エ）ファイル形式を確認

C. バイナリデータを確認する

　より技術的な方法として、ファイルのバイナリデータを確認する方法もあります。画像ファイルの先頭の数バイトを確認することで、ファイル形式を判別できます。例えば、JPEGファイルは「FF D8」で始まります。

D. オンラインツールを使用する

　オンラインでファイル形式を確認できるツールもあります。ファイルをアップロードするだけで、形式を教えてくれるサイトがいくつかあります」

＊＊＊＊＊＊＊＊

歩　　「ゲホゴホ。お邪魔します。・・ハナスちゃん、『３．金魚ミュージアムのような動画の作り方』のところだけど・・『MP4からJPGへのコンバーター』を使って、動画を静止画に変換しなくてもいいんじゃないかな」

ハナス「えっ、歩ちゃん。どういうこと？」

歩　　「今はカメラやスマホで連続写真が取れるでしょ。だぁからぁ・・そうして撮った連続写真を・・『２．写真やイラストが次々と入れ替わる動画の作り方』の『GIFアニメーション画像作成ツール』に入力してもいいんじゃない？」

ハナス「そっか、その方法もあるわね！　歩ちゃん、すご～い！　歩ちゃんって天才！」

歩　　「えへへ。それほどでも・・あるわよ」

スミレ「つまり、動画の作り方を付け加えると、こうなるわね・・

　〔動画の作り方（その２）〕

　（１）動画の連続写真を撮影する

　（２）以下の『GIFアニメーション画像作成ツール』を開き、（１）で作成した画像を入力

　　　https://photocombine.net/gifanime/#usage

　（３）『出力』を以下に設定して、『作成』ボタンを押す

　　　（＊印が、イラストが入れ替わるアニメとの違い）

　　　　＊解像度：長辺　300

　　　　　色数　：256

　　　　　縦横比揃え：クロップ

　　　　＊アニメ速度：100程度（1000が1秒）

　　　　　ループ回数：-1（無限）

　　　　　背景色：任意　　

　（４）必要に応じて、アニメ速度を変えてみる　　

　超超超超超・・簡単じゃん」　

のこ　「超超超超超・・簡単ですわね。ビックらこいた、屁をこいた、ブー」

歩　　「ゲホゴホ。のこちゃん、屁をこかないの。でね、私、天才だから・・アホバカcopilotのファイル形式や拡張子の説明も捕捉しちゃうわよ。

パソコンだと

Windows10：何でもいいのでフォルダ開いてもらって、「表示」タグのファイル名拡張子にチェック入れてもらうとファイル名末尾に.jpegとか出てくるようになります

Windows11：フォルダ開いて、「表示」をクリック、一番下の「表示」をまたクリック→「ファイル名拡張子」にチェックを入れる

これで拡張子が表示されて分かりやすいようになります！

拡張子が表示されるようにするのって、ちょっといろいろ分かっている人にとっては必須のことなんですよね♪」

アホバカcopilot「どへええ。こりゃ、ビックらこいた、屁をこいた、ブー」

ハナス「みなさぁ～ん。ぜひ、GIFアニメ、作ってみてね～♪」

〔小説　カクヨムキャンディーズのGIFアニメ製作♪　おしまい〕