プロジェクションマッピング

エンターテインメントから工業利用まで、プロジェクションマッピングの活用・運用をお考えの方へ

more

インタラクティブ&サイネージ

情報表示用のデジタルサイネージから、センサーを利用したインタラクティブ要素などをお考えの方へ

more

VR/360MOVIE

VRHMD用コンテンツからプラットフォームを利用した360度ムービーを活用したPRをお考えの方へ

more
CONTACT 052-253-9866

ローディングgif画像を自動生成してくれるツールを3種紹介!

2014.08.20 水曜日 08:00:54

QAdTsSj8TOOWzlyLn3Rg_14248396556_aefcd9a926_o-(1)_01

Webサイトや、アプリ等で、コンテンツ読み込み中に
「読み込み中ですよ!」ということを伝えるために、
くるくる回っているgifアニメーションを使用することが
よくあると思います。

デザイナーにお願いすればきっと作ってくれるとは思うのですが、
ローディング画像だけ作って!とお願いするのもちょっと気が引けますよね…

そんなときは自動生成ツールを使えば、
プログラマーだけで完結することも可能です。

今回は、3種のローディング生成ツールをご紹介します。

Ajaxload

スクリーンショット 2014-08-20 7.23.55

普段、よく使っているのがこの「Ajaxload」です。
シンプルなデザイン、シンプルな機能が特徴ではないでしょうか。
ローディング画像の色と形、背景色、背景透過くらいしか選択出来ませんが、
逆にそのシンプルさが使いやすい!
パッと作ってパッと使えます。

デザイン選択時は下のような感じです。
デザインも実用性の高いものが揃っているため、
様々なテイストに合わせやすいのではないかと思います。

スクリーンショット 2014-08-20 7.09.52

Preloaders.net

スクリーンショット 2014-08-20 7.30.48

こちらの「Preloaders.net」は、細かい調整が効くところが特徴でしょうか。
画像の色、背景色はもちろん、サイズ、アニメーション反転、アニメーション速度など
かなり細かい部分も調整が可能です。

この細かい調整を使いやすくしているポイントとして、
画面右側に大きく表示されているプレビューが、設定を変更すると
リアルタイムで反映されることが挙げられます。

変更の度にリロードやダウンロードを行う必要がない為、
細かい調整を充分に活用出来るのではないでしょうか。

スクリーンショット 2014-08-20 7.38.59

使いどころが難しそうなデザインもあったりします。
どこかの国旗?やレコード等…
もちろんシンプルなデザインも揃っています!

スクリーンショット 2014-08-20 7.10.29

Load Info

スクリーンショット 2014-08-20 7.42.18

最後に紹介するのが「Load Info」。
こちらは個性的なデザインが多く選べるツールです。
飛行機、ハート柄、ヨット、星座など、かなり色々な形状のものが揃っているので
ちょっと変わったデザインを探しているという方に良いと思います。

もちろんカラー変更などの調整もちゃんと行えます。
アニメーションスピード、アニメーションの反転などが可能で
サイズは16×16、24×24、48×48から選択できるようになっています。

スクリーンショット 2014-08-20 7.06.28

まとめると…

今すぐ使いたい!という場合は「Ajaxload
細かく色々調整したいという場合は「Preloaders.net
ちょっと変わったデザインが良いんだよね、という場合は「Load Info
と、このように使い分けるのが良いのではないかと思います!

Category:Tools , Webサービス     Tag:
Authorブログの著者について
田中 義弘

田中 義弘

イベントプロダクション・グラフィックデザイナーを経て、2010年3月に株式会社アイデアクラウドを設立。近年、WEBから得た技術をベースに、プロジェクションマッピング事業をはじめとした先端事業をスタート。

Our Business
最近の記事
人気記事
Our Project

詳しく見る