そのまますぐ使える！ローディング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画像、便利 ツール をまとめてご紹介しました。

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

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

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

このニュースを読んだあなたにおすすめ

意外と面倒なtableがコピペで簡単に実装できるサンプルコード19選
いくらでも持っておきたい無料のパターン素材60選
Photoshop初心者必見！Photoshopを使いこなすために知っておくべき情報まとめ

このニュースに関連するカリキュラム