ページ遷移のストレス対策に　ローディングアニメーション

ローディングアニメーションで
読み込み時間のストレス軽減

ページ遷移の待ち時間がユーザーにとってストレスであることはご承知の通りです。
読み込みが遅いサイトはユーザーをイライラさせ、ページの離脱にもつながってしまいます。

ページの軽量化を図っているけどなかなかうまくいかない…
そんな時、待ち時間のストレスを軽くさせるためのローディングアニメーションが有効です。

ローディングアニメーションのメリット

• 読み込み中であることがわかり安心する
• ユーザーのストレスを軽減、離脱を抑える
• アニメーションによってはサイトの世界観を表現できる
• ページがすべて表示されるまでの状態を隠すことができる

「故障？」「ボタンを間違えた?」等の不安をユーザーに感じさせません。待っていれば大丈夫だとひとまず安心していただけます。 ローディングアニメーションはユーザーとサイトのやりとりをスムーズにするマイクロインタラクションのひとつです。細かなところでの配慮を重ねることがユーザーにとっての快適さを作っていくことになります。

また、サイトの世界観に合ったアニメーションなら、ファンの満足度向上が期待できますね。

様々なローディングアニメーション

ローディングアニメーションは、表示までの時間をカウントできるJavaScriptを使用したものや、cssアニメーション、gifアニメ、SVGアニメ等、いろいろな種類があります。ここでは一部をご紹介しています。

progressbar.js

待ち時間がパーセンテージで示されるのが分かりやすいです。
リロードするともう一度アニメーションを見ることができます。

Loaders.css

外部ファイルを用いて導入する、実装しやすいcssアニメーションです。

FLAT PRELOADERS

gifアニメです。FLAT PRELOADERSではフラットで可愛らしい素材がダウンロードできます。

SVGアニメ

SVGアニメです。こちらはフリーのイラストを使用しアニメーションをつけました。SVGは軽量で拡大しても画質が変わらないのが特長です。
会社のマスコットキャラクターを動かすのも面白いですね。

テキストのアニメーション

codepenを参考に作成したテキストのアニメーションです。