ローディングGIF画像作り方&ダウンロードサイト全力まとめ

ローディングGIF画像作り方&商用ダウンロード&jQuery実装記事まとめ

執筆:Daily GIF89a編集部

ローディングGIF画像作り方&ダウンロードサイト全力まとめ
UXにおいて非常に重要なローディングGIF。ユーザーを待たせたくないものである。本記事はローディングGIF画像がダウンロードしたい方、ローディングGIFアニメを実装したい方、ローディングGIF画像を自作したい方のための記事である。本記事では以下の順にご説明する。筆者自身が実際に触ってみた感想も合わせて記載する。

 

  1. ローディングGIF画像生成サイト5選
  2. ローディングGIF画像の作り方紹介記事
  3. ローディングGIF画像の実装説明サイト
  4. ローディングGIF画像サンプルカタログ

 

1.ローディングGIF画像生成サイト5選

Loader Generator

http://loadergenerator.com/
自分で形、サイズ、速度、色、背景色などを変更しローディングGIFを生成できる。UIも非常にシンプルで、画像生成でもよいのであれば最も使いやすい。商用利用も可能。

ローディングGIF画像作り方&ダウンロードサイト全力まとめ

 

みんなの知識

http://www.benricho.org/loading_images/
スピード・サイズ・人気度から一覧表示されたローディングGIFをダウンロードできる。自作しないならば、商用利用も可能。

ローディングGIF画像作り方&ダウンロードサイト全力まとめ

 

Ajaxload

http://ajaxload.info/
一番目にご紹介したLoader Generatorに比べ自由度は無いが、ワンクリックでローディングGIFを生成できるので非常に簡単。商用利用も可能。

ローディングGIF画像作り方&ダウンロードサイト全力まとめ

 

Load Info

http://www.loadinfo.net/
非常に小さいGIF画像を生成できる。余分なエフェクト等いらない方はこちらを利用してみてはいかがだろうか?。商用利用も可能。

ローディングGIF画像作り方&ダウンロードサイト全力まとめ

 

Preloaders.net

http://preloaders.net/
用意されているGIFが非常にユニークなサイト。変わったローディング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編集部

 

かわいい&おもしろ猫GIF画像がお好きな方はこちらも合わせてご覧ください。

バカ猫

【ねこGIF特集】かわいい&おもしろ猫GIF画像ベスト40第一弾

【ねこGIF特集】かわいい&おもしろ猫GIF画像ベスト40第二弾

【ねこGIF特集】かわいい&おもしろ猫GIF画像ベスト20第三弾

【ねこGIF特集】かわいい&おもしろ猫GIF画像ベスト20第四弾

【GIFまとめ】笑えるおもしろGIF画像ベスト20第1弾!!

GIFMAGAZINE