[Webサービス] 各種ローディング用アニメーションのおすすめ画像ジェネレーター

2013 年 4 月 7 日 Categories: ウェブ, デザイン | Tags:

ロード中であることを示す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がおすすめだが、どのサービスでも十分使えると思う。

ただ、全般的に背景を透過すると、特に曲線の多い画像の場合、ジャギー(輪郭のギザギザ)などが目立ってしまい、あまり実用に耐えない。矩形の画像なら問題ないのだが。