読み込みに時間がかかってしまうページはローディングアニメーションを取り入れることによってユーザーの離脱率を抑えることができます。アニメーションとなると作るのに手間がかかってしまいそうなイメージがありますが、実は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のローディングアニメーションが紹介されている記事です。それぞれ異なるクリエイターが作ったアニメーションなので、個性的なものが多く、見ていて楽しいですね。
まとめ
読み込みに時間がかかってしまうページにローディングアニメーションを用いることはとても重要ですが、本来はページの読み込みに時間がかからないことが理想です。まずはページの読み込み速度を速くすることができないか検討してみましょう。
また、読み込み速度が速いページにローディングアニメーションを適用してしまうと、いちいち画面が切り替わったりするためかえってユーザビリティが低下してしまう可能性があります。見た目やかっこよさだけを考えてローディングアニメーションを表示するのではなく、しっかりとユーザビリティを考えたサイト作りを行うよう、心がけてください。
