Webマーケティングに
強くなるメディア

  • ログイン
  • 会員になる
  • ログイン
  • 会員になる

  • 総合

    • 新着
    • Webマーケティング講座
    • 資料ダウンロード

    トレンドを知る

    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • おすすめツールソリューション情報
      - by マケスト -

    体系的に学ぶ

    • 基礎〜応用を学ぶ
      - Webマーケティング講座 -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • 資料ダウンロード
    • マーケティング用語辞典

    Info

    • 運営会社
    • 著者一覧
    • お問い合わせ
    • 広告掲載について
    • 広告掲載に関する規約
    • 利用規約
    • プライバシーポリシー
    • 特定商取引法に基づく表示

  • 新着
  • Webマーケティング講座
  • 資料ダウンロード
  • トレンドを知る
    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • おすすめツールソリューション情報
      - by マケスト -
  • 体系的に学ぶ
    • 基礎〜応用を学ぶ
      - Webマーケティング講座 -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • 資料ダウンロード
    • マーケティング用語辞典
  1. Webマーケティングメディア ferret
  2. ニュース
  3. そのまますぐ使える!ローディングGIF画像と便利な作成ツール21選
  1. action
  2. URLをコピーしました

そのまますぐ使える!ローディングGIF画像と便利な作成ツール21選

  • 2016年5月9日
  • ニュース

Webサービスを利用する ユーザー に対して、読み込み中と分かりやすく伝えるローディングGIF画像は重要な存在です。
コンテンツ が読み込み中であることを伝えなければ、なんらかの不具合であると勘違い、あるいは気付かずに離脱してしまう可能性があるからです。

今回は、そのまま使えるローディングGIF画像、簡単に画像生成ができる便利 ツール をまとめてご紹介します。
今すぐ画像を使いたい方はもちろん、自作で画像を用意して使ってみたいと思っている方もぜひ参考にしてください。

※素材数などの情報は2016年4月8日時点のものです。今後変更となる可能性がありますのでご了承ください。

フリーのローディングGIF画像

1.フリーデザイン素材「 ローディングのくるくるアニメーションGIFがいっぱい -|PIXEL LAB

フリーデザイン素材「 ローディングのくるくるアニメーションGIFがいっぱい -|PIXEL LAB http://www.pixelimage.jp/blog/2012/04/loading_icon.html
くるくると回る、ローディングアニメーションGIF画像です。6種類のデザインを複数サイズで用意しています。シャープに見えるよう考慮しているため、どのサイズも綺麗に表示が可能です。

2.Flat Preloaders

Flat Preloaders http://pixelbuddha.net/freebie/flat-preloaders
シンプルな形状、お洒落なトレンドカラーが目を引くローディングGIF画像のセットです。フラットデザインとの相性が良い見た目となっています。

3.ローディングアニメーションGIF集

ローディングアニメーションgif集 http://sozai.7gates.net/docs/loading-animated-gif/
定番デザインのローディングGIFを様々な色で公開しています。全100個をダウンロード可能ですので、お手持ちのホーム ページ デザインに合う色が見つかります。

4.GIF Preloaders (Free Download)

GIF Preloaders (Free Download) https://www.behance.net/gallery/13765711/GIF-Preloaders-(Free-Download)
くるくる回る地球モチーフのローディングGIF画像です。

5.FREE Minimal Loop Preloaders

FREE Minimal Loop Preloaders http://marinad.com.ar/free-minimal-loop-preloaders/
アウトラインだけで表現した、ミニマルなスタイルのローディングGIF画像セットです。全部で8つの異なるスタイルを収録しています。シンプルなホームページにオススメです。

6.Bold Preloader (GIF)

Bold Preloader (GIF) https://dribbble.com/shots/1151378-Bold-Preloader-GIF
太線が円を描く動きのローディングGIF画像です。丸みのあるデザインが柔らかな印象を与えます。

7.Preloader iOS 7 Style (GIF)

Preloader iOS 7 Style (GIF) https://dribbble.com/shots/1137678-Preloader-iOS-7-Style-GIF
iOS 7 StyleをイメージしたローディングGIF画像です。細い線を美しいグラデーションカラーで塗りつぶす動作が素敵です。スタイリッシュなデザインにぴったりな素材となっています。

8.Infinite Preloader (GIF)

Infinite Preloader (GIF) https://dribbble.com/shots/1309731-Infinite-Preloader-GIF
無限マークをモチーフにしたローディングGIF画像です。シンプルながらあまり見かけないデザインですので、ユニークな素材をお探しの方にはぴったりです。

9.Little Gears Preloader (GIF)

Little Gears Preloader (GIF) https://dribbble.com/shots/1136439-Little-Gears-Preloader-GIF
小さな歯車3つを組み合わせた、なんとも可愛いローディングGIF画像です。サイズの異なる歯車がぐるぐると回ります。

10.Loading Gif Pack #1

Loading Gif Pack #1 http://blog.rriegger.com/loading-gif-pack/
四角を組み合わせてデザインしたローディングGIF画像のパックです。動き、見た目が異なる5種類を収録しています。かっこいい雰囲気によく合う素材です。

11.Egg Preloader (GIF)

Egg Preloader (GIF) https://dribbble.com/shots/1152920-Egg-Preloader-GIF
割れた卵をモチーフにした、個性的なローディングGIF画像です。2つの黄身が動くユニークなアニメーションが魅力的です。他の人とは被らないデザイン、変わったものがお好きな方にオススメです。

12.みんなの知識 ちょっと便利帳

ローディング画像 各種 http://www.benricho.org/loading_images/
画像にあるものを含め、多種多様なローディングGIF画像がダウンロードできるページです。スピード、サイズといったカテゴリから検索ができるため、探している画像がいち早く見つかります。

13.Wave

gif13.png https://dribbble.com/shots/1070566--Freebie-Wave-Loader-Animation
円の中で波が揺れ、図形全体を埋めるような動きを再現したローディングGIF画像です。

14.Morph Shape Preloader (GIF)

Morph Shape Preloader (GIF) https://dribbble.com/shots/1379948-Morph-Shape-Preloader-GIF
2つの円がくっついたデザインのローディングGIF画像です。標準の青色も素敵ですが、色を編集することで印象を手軽に変えることができます。

15.Download Cloud Preloader (GIF)

Download Cloud Preloader (GIF) https://dribbble.com/shots/1328810-Download-Cloud-Preloader-GIF
雲をモチーフにした、ダウンロードローディングGIF画像です。下向きの矢印をデザインに取り入れており、分かりやすい見た目です。

ローディングGIF画像の便利 ツール

16.Loader Generator

Loader Generator http://loadergenerator.com/
シンプル設計で、誰にでも分かりやすく使いやすい ツール です。ベースのデザイン、サイズ、速度、色といった項目を設定するだけで初心者でも簡単にローディングGIF画像が作れます。設定画面すぐ横にプレビューがあるため、完成イメージがチェックできるのも便利です。

基本の形として円、矢印、四角を含む8種類を揃えています。いずれも定番のデザインですので、サクッと手軽に画像を手に入れたい方、あまり凝った画像は必要無いという方にはぴったりです。作った画像はGIF形式でダウンロードできます。

17.Ajaxload

Ajaxload http://ajaxload.info/
わずかな設定だけで即座にローディングGIF画像が生成できるツールです。先にご紹介したLoader Generatorと比較するとカスタマイズ性は低いものの、手間をかけずにサッと作れる点は便利です。

設定する項目は基本の形、背景色、前景色の3項目と背景透過のみとなっています。細かな設定はできないものの基本の形はLoader Generatorよりも多く、全39種類が揃っています。デザイン数と手軽さを重視するならオススメのツールです。

設定が終わったあと「Generate it!」ボタンをクリックすると、プレビューが現れダウンロードが出来るようになります。

18.preloaders.net

preloaders.net http://preloaders.net/
充実した機能、デザインが魅力的な ツール です。シンプルな円形以外に個性的な形のものを豊富に揃えていて、全部で700種類以上を収集しています。フルーツ、 テキスト 、人物といった他にはないモチーフが多い印象です。

好きなデザインを選択すると、色、速度、サイズといった基本的な部分を調整することができるほか、反転させたり縦横比を変更することも可能です。 テキスト アニメーションでは文字の内容も変更ができるため、オリジナルの文章を使ったローディングGIFが作れます。

19.Load Info

Load Info http://www.loadinfo.net/
特徴的な形が多数揃う ツール です。全部で132種類のベースデザインがあり、花、飛行機、砂時計といったデザインが揃っています。画像色、背景色ほか基本的なカスタマイズができ、16x16、24x24、48x48の3サイズから選択してダウンロードできます。

20.Chimply

Chimply http://www.chimply.com/Generator#classic-spinner,animatedCircle
円形、バーのローディングGIF画像ほか、ボタン、バッジが生成できるツールです。デザイン色、背景色、サイズを指定するとすぐに画像が出来上がります。デザインはどれも一見定番のものですが、2色使いだったりあまり見ない動きだったりと、凝ったものが多くあります。評価、コメント制度があるのも特徴的で、選ぶ際の参考になります。

21.loading.io

loading.io http://loading.io/
全体的に充実した機能のツールです。生成 ツール の多くは標準だと無地、一色のデザインが多い傾向がありますがloading.ioではカラフルなデザインの画像が作れます。標準色以外の色にすることもできますので、自由度が高い印象です。

形状もリング、スクエア、トライアングル、キューブと様々なものが揃っており、全38種類から好みのものが選択できます。設定項目も充実していて、他サービスで可能なカスタマイズは基本的にできます。ダウンロード時のデータ形式はGIF、SVG、 CSS から選ぶことが可能です。見た目にこだわりのある方には特にオススメしたい ツール の一つです。

まとめ

以上、ローディングGIF画像、便利 ツール をまとめてご紹介しました。

いかがでしたでしょうか。

よく見る定番のデザインから少し風変わりなデザインのものまでピックアップしました。どの画像もクオリティが高いものばかりですのでそのまま使用するのもオススメです。デザインのカスタマイズしたいとお考えの方はツールをぜひ使用してみてください。いずれのツールも簡単なステップで画像が生成できるため、自由にカスタマイズしてもすぐに画像が完成します。

なお、画像などをご利用の際には配布元で利用条件等を必ずご確認の上、ルールを厳守してご利用ください。

このニュースを読んだあなたにおすすめ

意外と面倒なtableがコピペで簡単に実装できるサンプルコード19選
いくらでも持っておきたい無料のパターン素材60選
Photoshop初心者必見!Photoshopを使いこなすために知っておくべき情報まとめ

このニュースに関連するカリキュラム

LPOに関するカリキュラム
LPOに関するカリキュラム
URL:https://ferret-plus.com/curriculums/lpo
LPO に関して、カリキュラム形式で学びましょう

関連記事

  • オシャレなアイコン使いに重宝する無料ピクトグラム40選
  • 【11月編】デザイン不要の高品質無料ベクター素材60選
  • デザイン業務をもっと効率的に!無料ベクター素材84選
  • クオリティが高いのに無料で使える!高品質ベクター素材60選
  • デザインいらず!誰でも簡単にオシャレなHTMLメルマガを配信できるテンプレート25選

関連記事

  • オシャレなアイコン使いに重宝する無料ピクトグラム40選
  • 【11月編】デザイン不要の高品質無料ベクター素材60選
  • デザイン業務をもっと効率的に!無料ベクター素材84選
  • クオリティが高いのに無料で使える!高品質ベクター素材60選

この記事を読んだ方にお勧め、ferretの無料「Webマーケティング講座」

ferretでは、ニュース記事を毎日読むだけでは身につきにくいWebマーケティングの『体系的な知識』を学ぶことができる「Webマーケティング講座」コンテンツも用意しています。

解説を読むだけでなく、記入式のワークを埋めていくことで自社サービスを客観的に理解し、今行うべき施策を考える準備ができるように構成されたコンテンツです。Webマーケティングは何から始めたら良いか分からないという方、無料ですのでぜひのぞいてみてください。

この記事を書いた人

ferret編集部

ferret編集メンバーが不定期で更新します。
Webマーケティング界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介します!
  
>> 著者詳細はこちら

Webマーケティングのノウハウ集をプレゼント!

【ferret】5つのマーケティングメソッド(無料)

創業より10年以上、Webマーケティングの最前線で弊社が得てきた効果をあげるためのノウハウを1つの資料にまとめました。(全79ページ)

限定版の資料をダウンロードする(全79ページ)抜粋版のサンプルを読む(全3ページ)

  • 昨日
  • 週間
  • 月間

検索流入に影響あり?Google検索の新機能「アクティビティカード」とは

世界でシェアを誇る有名CMSを比較!それぞれのメリット・デメリット

登録しておくとビジネスに役立つかも!?チェックしたいメルマガ13選

【機能・料金比較】SFAの失敗しない選び方

【CMS】WordPressとは?特徴・機能・導入方法・プラグインをまとめて解説

検索流入に影響あり?Google検索の新機能「アクティビティカード」とは

営業ナシでも選ばれるのはなぜ?ヌーラボのビジネスモデルを徹底取材

急成長するInstagramの動画と動画広告

RPA(ロボティック・プロセス・オートメーション)とは? 基礎知識やメリット・デメリットを解説

経営判断を加速化!ERPの基本とメリット・デメリット

無料ホームページ作成ツールはどれを選ぶべき?おすすめサービス15選

「センスと根性で売る営業はもう終わり」ベルフェイスの目指すこれからの営業

作りたいサイトによって選び方が違う!CMSの種類と特徴

検索流入に影響あり?Google検索の新機能「アクティビティカード」とは

Googleの「しごと検索」が日本でもリリース!求人検索に大きな影響が

現会員425,072人

ログインはこちら

おすすめ記事

オシャレなアイコン使いに重宝する無料ピクトグラム40選

【11月編】デザイン不要の高品質無料ベクター素材60選

デザイン業務をもっと効率的に!無料ベクター素材84選

クオリティが高いのに無料で使える!高品質ベクター素材60選

デザインいらず!誰でも簡単にオシャレなHTMLメルマガを配信できるテンプレート25選

エントリー

  • 新着
  • Webマーケティング講座
  • 資料ダウンロード

トレンドを知る

  • ノウハウ&トレンド ニュース
  • リリース ニュース
    - ferret×PR TIMES -
  • マーケター特集
    - マーケティングジャーニー -
  • おすすめツールソリューション情報
    - by マケスト -

体系的に学ぶ

  • 基礎〜応用を学ぶ
    - Webマーケティング講座 -
  • コンテンツマーケティングを学ぶ
  • Googleアナリティクスガイド
  • 事例
  • 資料ダウンロード
  • マーケティング用語辞典
  • 運営会社
  • 著者一覧
  • お問い合わせ
  • 広告掲載について
  • 広告掲載に関する規約
  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表示
Webマーケティングに
強くなるメディア
© basic Incorporated.

過去10年間で弊社が得てきたWebマーケティングのノウハウを

1冊の資料にまとめました。(全83ページ)

feedlyへの登録はこちら
その他のrssはこちら