コピペで簡単！ローディングアニメーションの参考になるサイトまとめ

本ページには広告が含まれます。

読み込みに時間がかかってしまうページはローディングアニメーションを取り入れることによってユーザーの離脱率を抑えることができます。アニメーションとなると作るのに手間がかかってしまいそうなイメージがありますが、実はCSSだけで簡単に実装することが可能です。

今回は、ローディングアニメーションを紹介しているWebサイトをご紹介していきます！

INDEX

ローディングアニメーションの基本
- ユーザビリティの向上
- 読み込み時間をチェックする
ローディングアニメーションの参考になるサイト
まとめ

ローディングアニメーションの基本

ローディングアニメーションを使用しているサイトと使用していないサイトがありますが、ローディングアニメーションを表示することによってどのような効果があるのか、またどういったWebサイトにローディングアニメーションが必要なのかをご紹介したいと思います。

ユーザビリティの向上

ページの読み込み時間は離脱率に最も大きく影響する要素の一つです。読み込みに時間がかかってしまうと、多くのユーザーが離脱してしまいますが、ローディングアニメーションを用いることで離脱率を抑えることができます。

また、ユーザーが離脱してしまう大きな理由が「いつローディングが終わるのか分からない」ということです。これを防ぐためには、ゲージ型でページ読み込みの進捗具合が分かるようなものを表示することで、ユーザーも安心してローディングを待つことができるようになると言われています。

読み込み時間をチェックする

自分のWebサイトは読み込み速度が速いから大丈夫！と思っている方も、もしかするとインターネット環境によっては読み込みに時間がかかっている可能性があります。Googleが提供する「Google Test My Site」は、複数のインターネット環境を用いてWebサイトを表示するのにかかっている時間を計測することができるツールです。気になる方は一度チェックしてみてください。

ローディングアニメーションの参考になるサイト

では、優れたローディングアニメーションが紹介されているWebサイトをご紹介していきます。多くのものがファイルの読み込みやコピペで実装できるようになっているので、初心者の方でも簡単にローディングアニメーションを実装することができます。

Loaders.css

シンプルで軽量なCSSのローディングアニメーションが紹介されています。

Single Element CSS Spinners

ドットやサークルを使った軽量のCSSローディングアニメーションが紹介されています。

SpinKit

シンプルなものも多いですが、その中でもいくつか個性的なものが紹介されています。個性的なローディングアニメーションは、ユーザーを楽しませ、離脱率の低下につながりやすいです。

CSS Loader

ボールやスマートフォンをモチーフにしたローディングアニメーションや、画面全体を使ったものまで紹介されています。

PACE

PACEはJavaScriptとCSSのファイルをそれぞれ読み込むだけでWebページにローディングアニメーションを追加することができるライブラリです。ローディングアニメーションは呼び出しのタイミングや消すタイミングを間違うと、ユーザビリティの低下につながるだけでなく、ページ自体が表示されなくなってしまう可能性もあるため、埋め込むだけというのは助かりますね。

SVG Loaders

こちらはSVGで作られたローディングアニメーションが紹介されています。SVGを用いることで、無駄なファイルを読み込む必要がなくなるため、少しでもページの読み込み速度を早くしたい場合にオススメです。

Loading.css

個性的なローディングアニメーションが多く紹介されています。使うときはCSSを読み込み、クラス名に指定するだけでアニメーションを設定することが可能です。

71 CSS LOADERS – FREE FRONTED

71の優れたCSSローディングアニメーションが紹介されている記事です。良質なアニメーションが数多く紹介されており、とても参考になります。

30 CSS Loading Animations for your Website

こちらもCSSのローディングアニメーションが紹介されている記事です。それぞれ異なるクリエイターが作ったアニメーションなので、個性的なものが多く、見ていて楽しいですね。

まとめ

読み込みに時間がかかってしまうページにローディングアニメーションを用いることはとても重要ですが、本来はページの読み込みに時間がかからないことが理想です。まずはページの読み込み速度を速くすることができないか検討してみましょう。

また、読み込み速度が速いページにローディングアニメーションを適用してしまうと、いちいち画面が切り替わったりするためかえってユーザビリティが低下してしまう可能性があります。見た目やかっこよさだけを考えてローディングアニメーションを表示するのではなく、しっかりとユーザビリティを考えたサイト作りを行うよう、心がけてください。