Webサイトの離脱率が上がる要因の一つとしてWebページへの読み込み速度は度々問題に挙げられますが、読み込みまでの時間をアニメーション演出で工夫するだけでもある程度ユーザーの離脱率を抑えることが出来ます。

とは言ってもアニメーション演出をサイトに反映させるためには、コーディングの知識はもちろん、作るの自体にも手間がかかってしまいますよね。

そんな時に利用したいのが今回ご紹介するWordPressプラグイン「Page Loading Effects」です。このプラグインはアニメーション演出をコーディングの知識なしでサイト上に導入します。

ページ読み込みまでの待ち時間をワクワクさせるプラグイン「Page Loading Effects」

「Page Loading Effects」のインストール

Page Loading Effects」は、Webページへアクセスする間の待ち時間、ローディングアニメーションが流れるようにするWordPressプラグインです。これを使うことで、サイトに訪れた訪問者がページ読み込みまでの時間を待つ間、飽きさせない演出を施し、初めてサイトを訪れた読者にこだわりのあるサイトと覚えてもらいやすくなる工夫を凝らすことが出来ます。

さらに従来では、アニメーション演出をサイトに導入するとなるとコーディングの知識や技量を求められるものの、このプラグインではそれらの知識なしで誰でも簡単に扱えるようになっているため、WordPress初心者の方でもハイクオリティなサイト制作が可能です。

「Page Loading Effects」の使い方

それでは早速使い方についても見ていきましょう。まずはWordPressの管理画面から「プラグイン」>「新規追加」で「Page Loading Effects」と検索してプラグインをインストールして有効化します。

「Page Loading Effects」の有効化

もしWordPress上の検索結果に「Page Loading Effects」が表示されない場合は、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールすることでも利用可能です。

Page Loading Effects

「Page Loading Effects」の設定

プラグインを導入できたら、早速設定をしていきましょう。設定するにはWordPress管理画面より「Page Loading Effects」をクリック。

アニメーションを選ぶ

すると設定画面が開くので、「General Settings」欄の「Choose your Animation Effects」よりアニメーション形式を選択。アニメーション形式はすぐ下にプレビュー画面が表示されているので、自分のサイトカラーに合った演出をプレビュー画面と見比べながら決めます。

プレビュー画面には適用されない

次にアニメーション演出の背景色やローディングの色を「Color Settings」で調整しましょう。ちなみにここで色を調整してもプレビュー画面では、その色が反映されることはありません。なので色が反映されたかどうかの確認については設定を保存してから実際のサイトで確認してみてください。

設定を保存

ここまで調整出来たら、「Save Changes」をクリック。後は実際にサイトの画面を確認してみましょう。きちんとアニメーションが動いて選んだ色が反映されていれば実装完了です。

まとめ

今回は、ページの読み込み時間をアニメーションで演出するプラグイン「Page Loading Effects」の機能とその使い方をご紹介しました。ページの離脱率を下げるためにページの表示速度を工夫するのは大事ですが、変わり映えのしないサイトは読者にも飽きられてしまいがちです。

そのためサイトを大規模でリニューアルする際や独自な効果演出を醸し出したい時などに使ってみると良いでしょう。