執筆:Daily GIF89a編集部
UXにおいて非常に重要なローディングGIF。ユーザーを待たせたくないものである。本記事はローディングGIF画像がダウンロードしたい方、ローディングGIFアニメを実装したい方、ローディングGIF画像を自作したい方のための記事である。本記事では以下の順にご説明する。筆者自身が実際に触ってみた感想も合わせて記載する。
- ローディングGIF画像生成サイト5選
- ローディングGIF画像の作り方紹介記事
- ローディングGIF画像の実装説明サイト
- ローディングGIF画像サンプルカタログ
1.ローディングGIF画像生成サイト5選
Loader Generator
http://loadergenerator.com/
自分で形、サイズ、速度、色、背景色などを変更しローディングGIFを生成できる。UIも非常にシンプルで、画像生成でもよいのであれば最も使いやすい。商用利用も可能。
みんなの知識
http://www.benricho.org/loading_images/
スピード・サイズ・人気度から一覧表示されたローディングGIFをダウンロードできる。自作しないならば、商用利用も可能。
Ajaxload
http://ajaxload.info/
一番目にご紹介したLoader Generatorに比べ自由度は無いが、ワンクリックでローディングGIFを生成できるので非常に簡単。商用利用も可能。
Load Info
http://www.loadinfo.net/
非常に小さいGIF画像を生成できる。余分なエフェクト等いらない方はこちらを利用してみてはいかがだろうか?。商用利用も可能。
Preloaders.net
http://preloaders.net/
用意されているGIFが非常にユニークなサイト。変わったローディングGIFを使いたいのであればこちらのサイトがよいだろう。商用利用も可能。
2.ローディングGIF画像の作り方紹介記事
Photoshopで5分、ローディングGIFを自作する簡単な方法【GIFアニメ作り方】
http://gif89a.net/loading-gif/
当メディアでPhotoshopでローディングGIF画像を制作している。作業時間は5分ほど、オリジナルのローディングGIF画像を作成したいのなら一読いただくと良いだろう。
3.ローディングGIF画像の実装説明サイト
画面読込中のグルグルまわるローディング画像を出す。jQuery・javascript
http://blog.livedoor.jp/tacshock-code14/archives/6760786.html
jqueryでローディングGIFを実装している。
画像の読込完了まで、ローディング画像を表示する方法
http://allabout.co.jp/gm/gc/431053/2/
html,cssで画像領域の背景にローディングGIFを表示する形で実装をしている。
4.ローディングGIFサンプル:どんなローディングGIF画像がいいか発想を広げよう。
1
via GIFMAGAZINE
2
via GIFMAGAZINE
3
via GIFMAGAZINE
4
via GIFMAGAZINE
5
via GIFMAGAZINE
6
via GIFMAGAZINE
7
via GIFMAGAZINE
8
via GIFMAGAZINE
9
via GIFMAGAZINE
10
via GIFMAGAZINE
11
via GIFMAGAZINE
12
via GIFMAGAZINE
13
via GIFMAGAZINE
14
via GIFMAGAZINE
15
via GIFMAGAZINE
16
via GIFMAGAZINE
17
via GIFMAGAZINE
18
via GIFMAGAZINE
執筆:Daily GIF89a編集部