ローディングGIF画像と便利な作成ツール18選

Webサービスを利用するユーザーに対して、読み込み中と分かりやすく伝えるローディングGIF画像は重要な存在です。コンテンツが読み込み中であることを伝えなければ、なんらかの不具合であると勘違い、あるいは気付かずに離脱してしまう可能性があるからです。

今回は、そのまま使えるローディングGIF画像、簡単に画像生成ができる便利ツールをまとめてご紹介します。今すぐ画像を使いたい方はもちろん、自作で画像を用意して使ってみたいと思っている方もぜひ参考にしてください。

※素材数などの情報は2016年4月8日時点のものです。今後変更となる可能性がありますのでご了承ください。

フリーのローディングGIF画像

1.フリーデザイン素材「 ローディングのくるくるアニメーションGIFがいっぱい -｜PIXEL LAB

http://www.pixelimage.jp/blog/2012/04/loading_icon.html
くるくると回る、ローディングアニメーションGIF画像です。6種類のデザインを複数サイズで用意しています。シャープに見えるよう考慮しているため、どのサイズも綺麗に表示が可能です。

2.Flat Preloaders

http://pixelbuddha.net/freebie/flat-preloaders
シンプルな形状、お洒落なトレンドカラーが目を引くローディングGIF画像のセットです。フラットデザインとの相性が良い見た目となっています。

3.ローディングアニメーションGIF集

http://sozai.7gates.net/docs/loading-animated-gif/
定番デザインのローディングGIFを様々な色で公開しています。全100個をダウンロード可能ですので、お手持ちのホームページデザインに合う色が見つかります。

4.GIF Preloaders (Free Download)

https://www.behance.net/gallery/13765711/GIF-Preloaders-(Free-Download)
くるくる回る地球モチーフのローディングGIF画像です。

5.FREE Minimal Loop Preloaders

http://marinad.com.ar/free-minimal-loop-preloaders/
アウトラインだけで表現した、ミニマルなスタイルのローディングGIF画像セットです。全部で8つの異なるスタイルを収録しています。シンプルなホームページにオススメです。

6.Bold Preloader (GIF)

https://dribbble.com/shots/1151378-Bold-Preloader-GIF
太線が円を描く動きのローディングGIF画像です。丸みのあるデザインが柔らかな印象を与えます。

7.Preloader iOS 7 Style (GIF)

https://dribbble.com/shots/1137678-Preloader-iOS-7-Style-GIF
iOS 7 StyleをイメージしたローディングGIF画像です。細い線を美しいグラデーションカラーで塗りつぶす動作が素敵です。スタイリッシュなデザインにぴったりな素材となっています。

8.Infinite Preloader (GIF)

https://dribbble.com/shots/1309731-Infinite-Preloader-GIF
無限マークをモチーフにしたローディングGIF画像です。シンプルながらあまり見かけないデザインですので、ユニークな素材をお探しの方にはぴったりです。

9.Little Gears Preloader (GIF)

https://dribbble.com/shots/1136439-Little-Gears-Preloader-GIF
小さな歯車3つを組み合わせた、なんとも可愛いローディングGIF画像です。サイズの異なる歯車がぐるぐると回ります。

10.Loading Gif Pack #1

http://blog.rriegger.com/loading-gif-pack/
四角を組み合わせてデザインしたローディングGIF画像のパックです。動き、見た目が異なる5種類を収録しています。かっこいい雰囲気によく合う素材です。

11.Egg Preloader (GIF)

https://dribbble.com/shots/1152920-Egg-Preloader-GIF
割れた卵をモチーフにした、個性的なローディングGIF画像です。2つの黄身が動くユニークなアニメーションが魅力的です。他の人とは被らないデザイン、変わったものがお好きな方にオススメです。

12.みんなの知識 ちょっと便利帳

http://www.benricho.org/loading_images/
画像にあるものを含め、多種多様なローディングGIF画像がダウンロードできるページです。スピード、サイズといったカテゴリから検索ができるため、探している画像がいち早く見つかります。

13.Wave

https://dribbble.com/shots/1070566--Freebie-Wave-Loader-Animation
円の中で波が揺れ、図形全体を埋めるような動きを再現したローディングGIF画像です。

14.Morph Shape Preloader (GIF)

https://dribbble.com/shots/1379948-Morph-Shape-Preloader-GIF
2つの円がくっついたデザインのローディングGIF画像です。標準の青色も素敵ですが、色を編集することで印象を手軽に変えることができます。

15.Download Cloud Preloader (GIF)

https://dribbble.com/shots/1328810-Download-Cloud-Preloader-GIF
雲をモチーフにした、ダウンロードローディングGIF画像です。下向きの矢印をデザインに取り入れており、分かりやすい見た目です。

16.Ajaxload

http://ajaxload.info/
わずかな設定だけで即座にローディングGIF画像が生成できるツールです。先にご紹介したLoader Generatorと比較するとカスタマイズ性は低いものの、手間をかけずにサッと作れる点は便利です。

設定する項目は基本の形、背景色、前景色の3項目と背景透過のみとなっています。細かな設定はできないものの基本の形はLoader Generatorよりも多く、全39種類が揃っています。デザイン数と手軽さを重視するならオススメのツールです。

設定が終わったあと「Generate it！」ボタンをクリックすると、プレビューが現れダウンロードが出来るようになります。

17.preloaders.net

http://preloaders.net/
充実した機能、デザインが魅力的なツールです。シンプルな円形以外に個性的な形のものを豊富に揃えていて、全部で700種類以上を収集しています。フルーツ、テキスト、人物といった他にはないモチーフが多い印象です。

好きなデザインを選択すると、色、速度、サイズといった基本的な部分を調整することができるほか、反転させたり縦横比を変更することも可能です。テキストアニメーションでは文字の内容も変更ができるため、オリジナルの文章を使ったローディングGIFが作れます。

18.Chimply

http://www.chimply.com/Generator#classic-spinner,animatedCircle
円形、バーのローディングGIF画像ほか、ボタン、バッジが生成できるツールです。デザイン色、背景色、サイズを指定するとすぐに画像が出来上がります。デザインはどれも一見定番のものですが、2色使いだったりあまり見ない動きだったりと、凝ったものが多くあります。評価、コメント制度があるのも特徴的で、選ぶ際の参考になります。