スポンサーリンク

ワードプレスでローディングアニメーションを設定するプラグインを3種類試した結果 おまけ実験付き

スポンサーリンク
ワードプレスでローディングアニメーションを設定するプラグインを3種類試した結果おまけ実験付き
スポンサーリンク

サイトを表示するときに画像のデータ読み込みなどに時間がかかり、なかなかサイトが表示されない事があります。

 

ワードプレスサイトの場合は

ページ表示速度を早くする為にキャッシュ系のプラグインを入れたり、

画像のファイルサイズを小さくしたり、

様々な対策をするのが一般的な対処法ではありますが、

 

しかし!

どうしても表示速度を上げられないとき、

ローディングアニメーションをサイトに追加する事で

閲覧者の離脱率を減らす事も出来るんですよ♪

 

今回はそんなローディングアニメーションに関する情報です。

スポンサーリンク

ページ表示をローディングするときに表示されるアニメーション

今回紹介するのは、

色々なサイトを見ていると、
ページが表示されるまでの一瞬の間に画面の中央などにグルグルと回転している画像が表示される事がありますよね。

あれです。

TVゲームやスマホゲームなんかでは、次のステージに移行するときなどの合間にキャラクターアニメーションが表示される事がありますよね。

あれです。

 

あれの正式な名称はよくわかりませんが、
preloader(プリローダー)とかローディングアニメーションと言われています。

 

ワードプレスはプラグインで簡単にプリローダーを設置できる

WordPress(ワードプレス)ならプラグインで簡単にローディングアニメーションを設置する事ができます。

今回は3つのローディングアニメーションを試してみました。

 

試したプラグインは
「ZD Pre Loader」
ZDPreLoaderをインストール

 

「DWL Preloader」
DWLPreloaderをインストール

スポンサーリンク

 

「WP Smart Preloader」
WPSmartPreloaderをインストール

 

どれも名称が「Preloader」になっていますね。

ローディングアニメーションとは書かれていません(´ε`;)

 

細かい設定ができるものもや、インストール&有効化するのみで利用できるものがあります。

 

ZD Pre Loaderをインストールして設定してみた

まずは「ZD Pre Loader」をインストールして有効化してみました。

 

ZDPreLoaderをインストール

 

ワードプレスのプラグイン画面の検索窓に「ZD Pre Loader」と入力すると一覧に表示されるので、“インストール”して“有効化”しましょう。

 

Preloaderの色を設定できる

 

このプラグインはアニメーションの色を設定する事ができます。

preloaderが動く緑丸

デフォルトのままだと緑色の丸が動き、シンプルでいい感じのアニメーションです。

欠点は、
GoogleAdSenseを設定していると、AdSense広告の方が先に表示されてしまうことでしょうか(;´Д`)

 

DWL Preloaderをインストールして設定してみた

次に「DWL Preloader」をインストールして有効化してみました。

 

DWLPreloaderをインストール

 

「DWL Preloader」は有効化するだけで、なんの設定もする必要はありません。

カラフルアニメーションがグルグル動く

3色のカーブラインがグルグルと回転しています。

 

この「DWL Preloader」は「ZD Pre Loader」と違い、
AdSense広告よりも後に表示されるという事はないようなので、見づらい感じにはなりませんね。

 

WP Smart Preloaderをインストールして設定してみた

そして「WP Smart Preloader」をインストールして有効化してみました。

 

WPSmartPreloaderをインストール

 

このプラグインは上記した2つと違い、アニメーションの種類や時間差などをいくつか設定出来るようになっています。

四角いアニメーション

  • アニメーションは6種類
  • トップページにのみ表示させることも出来る
  • CSSなどでカスタムアニメーションを設定できる
  • 表示させる時間を設定できる

などの利点がありますが、

 

欠点としては「ZD Pre Loader」と同様、AdSense広告の方が先に表示されてしまうことです。

ページの上部にアドセンス広告を設定していなければかなりオシャレなんですが・・・

 

おまけ:3つのプラグインを同時に有効化してみた

いい機会なので上記のプラグインを3つ同時に有効化してみました。

さて、同じジャンルのプラグインを同時有効化してしまったこの場合、どういう結果になるでしょうか?

 

1・一つも起動しない
2・最初に設定したプラグインだけ有効になる
3・最後に設定したプラグインだけ有効になる
4・一度に全部同時に表示される
5・順番に表示される

 

 

 

答えは・・・

 

 

 

5・順番に表示れるでした。

 

もちろんAdSense広告が表示されるより前に表示される「DWL Preloader」が1番。
次に「WP Smart Preloader」、
最後に「ZD Pre Loader」

の順番でローディングアニメーションが表示される結果になりました。

 

もちろん、「DWL Preloader」と「WP Smart Preloader」の間にアドセンス広告が表示されましたけどね。

 

ローディングアニメーションのプラグインを設定する際の注意点

ローディングアニメーションはとても便利です。

実体験でもありますが、サイト閲覧者の離脱率を減らすのは間違いないでしょうし、
なにより、ちょっとだけ高級感(というか信頼感?)が増します。

 

「このサイトは永遠に開かないんじゃないだろうか!?」
っていう不安感は完全になくなりますからね。

 

ただし、注意も必要です。

今回何度も触れたように、広告の後に表示されてしまうと“わざとらしさ”が際立ちます。

アドセンス広告を設定しているサイトで利用するのなら「DWL Preloader」のように何よりも優先して表示されるローディングアニメーションでなければなりません。

 

そのような心配がない宣伝サイト・情報サイトであれば、とくに優先順位を気にせずローディングアニメーションを設定する事ができます。

 

しばらく私はローディングアニメーションを使わない

私は今回で紹介したローディングアニメーションをしばらく使わないなぁ。

という結論に達しました。

 

画像ごとにアニメーションを表示出来るなら使用してもいいのですが、

ページ毎にローディングアニメーションに遮られると鬱陶しい印象を受けたからです。

 

PCやスマホのスペックが上等な人達からみたらさほど鬱陶しくもないのでしょうが、

私のようなあまり高スペックではないデバイスを愛用している者にとってはかなり鬱陶しいのです。

 

感じ方は人それぞれなので、今後ローディングアニメーションを利用してみたいと考えている場合は今回の情報を参考にしてもらえれば何よりです。

スポンサーリンク
スポンサーリンク

コメントを残す

スポンサーリンク