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

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

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

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

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

GIF画像完成系

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

GIFサンプル

GIF画像の作り方

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

1. 素材を用意する

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

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

GIFサンプルの素材画像

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

2. 無料のGIF画像作成ツールを開く

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

GIF作成 – GIF画像(GIFアニメ)を無料で作成できるサイト!

3. GIF作成の全体設定を調整する

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

GIF生成の全体設定

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

GIFの点滅感覚の設定

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

4. 素材画像をアップロードする

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

素材画像をアップロードする

5. GIFアニメを生成する

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

[GIFアニメを作る]をクリック

6. 生成したGIFを保存

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

生成したGIFのアニメーションを保存