[Webサービス] 各種ローディング用アニメーションのおすすめ画像ジェネレーター
ロード中であることを示すGIFのアニメ画像(Ajax loader、ローダー画像)を、ウェブ上で生成するジェネレーターを集めてみた。
Ajaxload
画像のパターン | 約40 |
サイズの変更 | なし |
アニメーション速度の変更 | なし |
生成のレスポンス | 速い |
一番オーソドックスでお手軽なジェネレーター。機能は限られているが、それゆえにわかりやすい。
Preloaders.net
画像のパターン | 無数 |
サイズの変更 | 可変(1px単位) |
アニメーション速度の変更 | 可変 |
生成のレスポンス | 速い |
おそらく、もっとも多機能でもっともパターンが多い。
画像はオーソドックスなものから3Dを利用したものまで多種多様。カテゴリー分けされているので、左サイドバーの「Categories」から選択する。
画像の縦と横やアニメーションを逆にしたり、アニメーションのフレーム数(コマ数)を指定できたりと、とにかく機能が豊富。
他にも、GIFだけでなくAPNG形式に対応していたり、JavaScriptやCanvasを用いたバージョンを生成できたりする。
とりあえずこのサイトを使っておけば間違いない、といえる。
Loader Generator
画像のパターン | 7 |
サイズの変更 | 可変(20×20~100×100まで5px刻み) |
アニメーション速度の変更 | 可変 |
生成のレスポンス | 普通 |
画像のパターンは少ないものの、各種設定を細かく指定でき、シンプルでわかりやすい。
背景を黒にした角丸の矩形で囲んだ画像を出力する機能もある。
Load Info
画像のパターン | 132 |
サイズの変更 | 16×16 24×24 48×48の3段階 |
アニメーション速度の変更 | なし |
生成のレスポンス | やや遅い |
Preloaders.netほどではないが、画像のパターンが多い。
シンプルなのだが、前景色・背景色を16進数の文字で指定しなければならないので、やや使い勝手が悪い。
また、背景を透過色にするとはっきりと残像が残ってしまうので、この点は大きな問題。
Ajax Loading Gif Generator
画像のパターン | 約40 |
サイズの変更 | なし |
アニメーション速度の変更 | 3段階 |
生成のレスポンス | やや遅い |
Ajaxloadとほとんど同じだが、こちらはアニメーションのスピードを3つのレベルから選択できる。
ただ、背景を透過した場合、きちんと透明にならずに背景色に指定した色が残像のように残ってしまう。結局、使うページの背景色に合わせるしかないので、事実上、透過画像としては使えない。
また、画像のパターンは多いのだが、テキストで選択するので何がどういった画像なのか非常にわかりづらい。
まとめ
シンプルさを求めるならAjaxload、多機能ならPreloaders.netがおすすめだが、どのサービスでも十分使えると思う。
ただ、全般的に背景を透過すると、特に曲線の多い画像の場合、ジャギー(輪郭のギザギザ)などが目立ってしまい、あまり実用に耐えない。矩形の画像なら問題ないのだが。