ロード時間が楽しくなる！ローディングアニメーション10選

Web制作に日頃から携わっていると、何かとブラウザの読み込み速度を気にかける場面も多いことでしょう。

近年Googleは、WebサイトのAMP化を呼びかけたり、スピードアップデートを実施したりしています。読者の悩みにいち早くこたえられる仕組みを確立するため、ページの読み込み速度を重視している動きがあるからです。

とはいえ、画像・動画コンテンツを多く含むサイトでは、ページスピードにこだわり続けるのにも限界があります。そんなときは、代わりに読者の離脱率を下げる仕組みを作ってみましょう。

そこで今回は、読者の離脱率を下げ、ブラウザ読み込みまでの待ち時間が楽しくなる「ローディングアニメーション」についてご紹介します。

ブラウザ読み込みまでの待ち時間が楽しくなる「ローディングアニメーション 」

ブラウザの読み込み速度は、Web制作で重視されているポイントのひとつです。なぜなら、読者はブラウザの読み込み速度があまりにも遅いと「有害なサイトへアクセスしてしまったのではないか？」「変なサイトにアクセスしてしまったせいで、パソコンが壊れてしまったのではないか？」と危険を察知してページを閉じてしまうことがあるからです。またpingdomの調査によると、ページ読み込み時間が3秒を超えると直帰率（Webページで何もせず離脱してしまうユーザーの割合）が急激に上がるとされています。

読者の離脱が増えると、Googleがそのサイトの評価を下げ、検索順位が下落してしまう可能性があります。とはいえ、動的コンテンツを多く含むWeb制作ではページスピードを速くするのにも限界があるでしょう。

そんなときは、代わりにローディングアニメーションを使い、ブラウザを読み込むまでの間にアニメーションによって読者の注意をひくようにしましょう。

ローディングアニメーションの存在により、読者にも正しくページが動作していることが伝わり、またページが開くまでの待機時間にちょっとしたワクワク感を与えられます。

見た目のインパクトだけじゃない！ローディングアニメーションの実装を勧めるただひとつの理由

ページを開くまでのわずかな時間とはいえ、アニメーションの動作をひとつ加えることで、少なからずローディング速度は遅くなっていまします。これはローディングアニメーションを追加する上では避けられない問題であり、アニメーションが派手であるほどSEOにも影響を与えると考えられるでしょう。

しかし、それでもローディングアニメーションの実装を促すのは、検索エンジンを経てページを訪れる読者は、ロボットではなく人間だからです。

SEOは元来、検索順位を上げるための施策として認知されているものです。しかし、読者の存在を無視して語られるものでもありません。事実、ページスピードを早くして、キーワードを詰め込んだだけでは、検索順位の上位を取ることは難しいです。

そこで、ローディングアニメーションを実装し、人間の感情に訴えるUXを作ることで、競合サイトとの差別化をはかれます。施策は無謀のようにも見えますが、Viget社による106名を対象に行なったUXの実験によれば、ローディングアニメーションの導入によって読者の離脱率は40%を切ることが分かりました。

またオリジナルのローディングアニメーションを設定できるならば、読者の離脱率を31%→18%へと低下させることも可能になるなど。サイト内を巡回してもらいやすくなるための施策として一役買っていることは確かです。

この問題は、Webサイトのユーザビリティ研究の第一人者であるヤコブ・ニールセンさんの記事でも言及されており、ローディングアニメーションの導入により10秒までならユーザーの注意を惹きつけられることを解説しています。

くわえてより現実的なことをいえば、ページに留める時間が長ければ長いほど滞在時間が伸びるため、SEO的にもローディングアニメーションの導入はページスピード以外の項目で評価をカバーできる要因にもなり得ます。

以上のことからローディングアニメーションの利用は、コンテンツのパフォーマンスを向上させる意味でも役立つことは明らかです。

コピペで使える！ローディングアニメーション10選

ローディングアニメーションの有用性を理解できたところで、あなたも実際に使ってみましょう！

ここでは、初心者でもコピー＆ペーストだけで使えるローディングアニメーションを10個ご紹介します。

1. CSS Loader

一度は見覚えがあるであろう、単調なボールバウンドによるメジャーなアニメーションから、画面全体を使ったオリジナリティ溢れるアニメーションまでを幅広く取り扱ったローディングアニメーションです。

CSS Loader

2. Loaders.css

シンプルかつ動作が軽量なローディングアニメーションです。導入も簡単な上、背景色のカスタマイズやローダーのサイズ変更も手軽におこなえます。

Loaders.css

3. Loading.css

50種類以上のオリジナルのローディングアニメーションを取り扱っています。単調な動きのものが多いローディングアニメーションですが、「Loading.css」では視覚に訴える個性豊かなものを多く取り揃えています。

Loading.css

4. SpinKit

全画面を使ったローディングアニメーションです。シンプルな動作ながら目を惹くアニメーションを多く取り揃えています。

SpinKit

5. CSS Spinners

21種類のローディングアニメーションが用意されています。アイコン一つひとつがオリジナリティ溢れるデザインと動作になっています。

CSS Spinners

6. SVG Loaders

SVG形式のローディングアニメーションです。アイコンはシンプルですが、動作が豊かで注目を集めやすい構成となっています。

SVG Loaders

7.PACE

JavascriptとCSSのファイルで構成されたローディングアニメーションです。プログレスバーや数字のカウントアップなど、従来のローディングアニメーションとは一線を画した遊び心をくすぐるアニメーションが用意されています。

PACE

8.Text Spinners

全30種類のアニメーションが用意されたローディングアニメーションです。絵文字を用いたアニメーションや、限られた枠内で動くドットアニメーションは必見です。

Text Spinners

9.CSS3 Loading Animation Loop

CSSで導入できる全3種類のローディングアニメーションです。バリエーションは少ないものの、近未来感溢れるアニメーションで目をひく構成となっています。

CSS3 Loading Animation Loop

10. Creative CSS Loading Animations

CSSで実装できる全5種類のローディングアニメーションです。オリジナリティ溢れるアニメーションが特徴です。

Creative CSS Loading Animations

おわりに

今回は、ローディングアニメーションの有用性と、コピペで使えるローディングアニメーションを10個ご紹介しました。

SEO視点からすると、ローディングアニメーションはページスピード的にあまり良くないのでは？と思われるかもしれません。しかし、SEOはページスピードが全てではなく、要素同士の総合評価でコンテンツ質は決定されます。

機能を保持しつつ集客したいなら、長い時間ユーザーをとどめられるWebサイト作りを心がけてみましょう。

あわせて読みたい！▼