そのまますぐ使える！ローディングGIF画像と便利な作成ツール21選

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画像です。下向きの矢印をデザインに取り入れており、分かりやすい見た目です。

ローディングGIF画像の便利ツール

16.Loader Generator

http://loadergenerator.com/
シンプル設計で、誰にでも分かりやすく使いやすいツールです。ベースのデザイン、サイズ、速度、色といった項目を設定するだけで初心者でも簡単にローディングGIF画像が作れます。設定画面すぐ横にプレビューがあるため、完成イメージがチェックできるのも便利です。

基本の形として円、矢印、四角を含む8種類を揃えています。いずれも定番のデザインですので、サクッと手軽に画像を手に入れたい方、あまり凝った画像は必要無いという方にはぴったりです。作った画像はGIF形式でダウンロードできます。

17.Ajaxload

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

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

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

18.preloaders.net

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

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

19.Load Info

http://www.loadinfo.net/
特徴的な形が多数揃うツールです。全部で132種類のベースデザインがあり、花、飛行機、砂時計といったデザインが揃っています。画像色、背景色ほか基本的なカスタマイズができ、16x16、24x24、48x48の3サイズから選択してダウンロードできます。

20.Chimply

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

21.loading.io

http://loading.io/
全体的に充実した機能のツールです。生成ツールの多くは標準だと無地、一色のデザインが多い傾向がありますがloading.ioではカラフルなデザインの画像が作れます。標準色以外の色にすることもできますので、自由度が高い印象です。

形状もリング、スクエア、トライアングル、キューブと様々なものが揃っており、全38種類から好みのものが選択できます。設定項目も充実していて、他サービスで可能なカスタマイズは基本的にできます。ダウンロード時のデータ形式はGIF、SVG、CSSから選ぶことが可能です。見た目にこだわりのある方には特にオススメしたいツールの一つです。

まとめ

以上、ローディングGIF画像、便利ツールをまとめてご紹介しました。

いかがでしたでしょうか。

よく見る定番のデザインから少し風変わりなデザインのものまでピックアップしました。どの画像もクオリティが高いものばかりですのでそのまま使用するのもオススメです。デザインのカスタマイズしたいとお考えの方はツールをぜひ使用してみてください。いずれのツールも簡単なステップで画像が生成できるため、自由にカスタマイズしてもすぐに画像が完成します。

なお、画像などをご利用の際には配布元で利用条件等を必ずご確認の上、ルールを厳守してご利用ください。

画像編集ツールを見てみる

【無料】Photoshopの代用に使える画像編集・加工ツールまとめ

画像編集ソフトとして代表的なものはPhotoshopです。しかし、無料でもPhotoshopに近いことができるツールやアプリケーションは増えています。この記事では、使いやすい画像編集ソフトを11個ピックアップして紹介します。

無料版なのに高機能！「もう手放せない」画像加工・編集できるフリーソフト40選

今回は、最新の画像加工フリーソフトをご紹介します。 無料でも高機能なソフトがたくさんありますので、プロ向けソフトの購入が難しい方、手軽に使えるソフトを探している方はぜひチェックしてみてください。