GIFアニメーション画像の作り方

ローディングアイコン等に便利なGIF画像ですが、フリー素材で探すとありきたりなローディングGIF素材しかなかったりします。

こだわったWebサイトのローディング画面などを作りたいとき、オリジナルのGIFを作成したくなると思います。

本記事では、オリジナルで素材からGIF画像を作る方法を解説します。

GIF画像完成系

今回はこのようなGIF画像をつくります。

GIF画像の作り方のひとつの方法として、複数画像を用意し、それをパラパラ漫画のように切り替え・ループ再生させることで作成できます。

まずは、Figmaやイラレなどを使い、素材となる画像（パラパラ漫画でいう1枚のページ）を、必要なだけ用意します。

今回は5枚用意しました。

枚数は2枚でも10枚でも、何枚でも良いですが、多ければ多いほどなめらかなアニメーションになります。

今回は以下のツールを使います。無料で使えるGIF作成オンラインツールです。

まず、全体設定をします。「ループするかしないか」「点滅間隔」などを調整してください。

たとえば、早く点滅させる（パラパラ漫画のめくるスピードを早くする）には、点滅感覚を小さくします。

これらの設定は、実際にGIFを生成してみながら、都度調整していくのがおすすめです。

アニメーションにする画像をアップロードします。画像ごとに「点滅感覚」を設定することも可能です。

画像をすべてアップロードし終えたら、[GIFアニメを作る]をクリック。

生成したGIFのアニメーションを確認して、問題なければ[保存]をクリックします。