ページの離脱率に最も大きく影響する要素の一つに「ページの読み込み時間」が挙げられます。
ユーザーはブラウザの読み込み速度があまりにも遅いと不安や不信感を覚え、ページを閉じてしまうことがあります。
そんな時、ローディングアニメーションを使って、ブラウザを読み込むまでのわずかな間にアニメーションを表示させてユーザーの注意をひくようにすることで離脱率を抑えることができます。
アニメーションというと作成に時間と手間がかかるイメージがありますが、実はCSSだけで簡単に実装することができるのはご存知でしょうか。
今回は気軽に取り入れられる、ローディングアニメーションを紹介しているWebサイトをご紹介します。もくじ
◆ローディングアニメーションのメリット
ページの読み込み時間が3秒を超えてしまった場合、直帰率（Webページで何もせずに離脱してしまうユーザーの割合）が急激に上がるとされています。（pingdom調査による）そのブラウザを読み込むまでの間の時間、代わりにローディングアニメーションを使ってユーザーの注意をひくようにすることで、ページが開くまでの間の待機時間にちょっとしたワクワク感を与えることができます。
またユーザーは、ページが正しく動作していることを理解することもでき、直帰率を抑えることができます。ページの離脱率や直帰率を下げることは、Googleのサイト評価を上げ、その結果、検索順位が上がります。
◆読み込み時間のチェック
ご自身のWebサイトの読み込み速度を簡単に確認するには、Googleが提供する「Google Test My Site」が大変便利です。
インターネット環境によっては予想以上に読み込みに時間がかかっている場合もありますので、自分のWebサイトの読み込み速度を計測してみましょう。
・Google Test My Site
https://testmysite.withgoogle.com/intl/ja-jp
◆ローディングアニメーションの参考サイト
・Loaders.css
https://connoratherton.com/loaders
シンプルで軽量なCSSのローディングアニメーションです。
・Single Element CSS Spinners
https://projects.lukehaas.me/css-loaders/
ドットやサークルが特徴的な軽量のCSSローディングアニメーションです。
・CSS Loader
http://www.raphaelfabeni.com.br/css-loader/
ボールなどをモチーフにしたローディングアニメーションから、画面全体を使ったものまで幅広く紹介されています。
・PACE
https://github.hubspot.com/pace/docs/welcome/
JavaScriptとCSSファイルをそれぞれ読み込むだけで簡単にWebページにローディングアニメーションを追加することができます。
・Loading.css
https://loading.io/animation/
50種類以上の個性的なオリジナルのローディングアニメーションが揃っています。
◆まとめ
今回ご紹介した以外にも様々な種類のローディングアニメーションがあります。
もしもページの読み込みに時間がかかっているのであれば、ローディングアニメーションを用いてみてはいかがでしょうか。
しかし、もともと読み込み速度が速いページにローディングアニメーションを適用してしまうと、かえってユーザビリティが低下してしまう可能性もありますので、まずはページの読み込み速度を計測してみることが重要です。
長い時間ユーザーをとどめていられるようなWebサイト作りを心がけてみましょう。 フォーザウィンはIT業界で働く仲間を募集しています！ 経験、未経験は問いません。是非当社の採用情報をご覧ください。 採用情報を見る ＞