記事のアイキャッチ画像
2020-09-21

ローディング画面をもっとおしゃれに改変!WordPressプラグイン3選

この記事をご覧になっている皆さんは、以下のような魅力的なローディングアニメーションを目にした事はございませんか?



ここまでプロレベルのローディングアニメーションは対応できなくとも…ワードプレスのプラグインを使えば専門知識なしで簡単に実装できます。

プラグインを使ったローディングアニメーションの例

上記に載せたローディングアニメーションはすべてワードプレスの無料プラグインで実装したものです。

この記事では、現役のWebクリエイターが徹底厳選した3つのプラグインを、比較解説していきます。

ローディング画面にアニメーションを実装する最大のメリットは、ホームページを見てくれているユーザーが感じる、待ち時間のストレスを抑えらること。

皆さんも、この記事を参考に魅力的なローディングアニメーションを実装し、少しでもユーザーが閲覧しやすいホームページにしましょう!

1. ローディングアニメーションが実装できるWordPress無料プラグイン3選

1-1. 【Page Loading Effects】初心者でも楽々カスタマイズできるおすすめプラグイン

DesignInnovatorsが紹介するローディングアニメーションのおすすめプラグイン|Page Loading Effects

Page Loading Effectsの魅力

4つの魅力
① 設定が非常に簡単で初心者でも扱いやすい
② シンプルなアニメーションで、デザイン性が良い
③ カラーや最大のローディング時間など必要最低限の設定が可能
④ 自分でプログラムを組むことで独自のアニメーションの実装が可能

Page Loading Effectsは、下記画像のように設定項目が少なくて非常にシンプル。

DesignInnovatorsが紹介するローディングアニメーションのおすすめプラグイン|Page Loading Effects|実際の設定画面

アニメーションの種類は合計4種類で、「背景とオブジェクトのカラー設定」と「最大ローディング時間」の必要最低限の設定ができます。

【4種類のアニメーション】

どれも画面中央に表示されるシンプルなアニメーションとなっており、デザイン性に優れています。

Page Loading Effectsの使い方

DesignInnovatorsが紹介するローディングアニメーションのおすすめプラグイン|Page Loading Effects|実装方法1

プラグインの「新規追加」をクリック
①検索窓に「Page Loading Effects」と入力
②「今すぐインストール」をクリック

DesignInnovatorsが紹介するローディングアニメーションのおすすめプラグイン|Page Loading Effects|実装方法2

③「有効化」をクリック

DesignInnovatorsが紹介するローディングアニメーションのおすすめプラグイン|Page Loading Effects|実装方法3

④「インストール済みプラグイン」をクリックする
⑤インストールしたプラグイン一覧に「Page Loading Effects」があることを確認
⑥ワードプレスメニュー画面の左下に「Page Loading Effects」が追加されていることを確認

DesignInnovatorsが紹介するローディングアニメーションのおすすめプラグイン|Page Loading Effects|実装方法4

⑥メニュー画面左下の「Page Loading Effects」をクリック
⑦Page Loading EffectsのSetting画面が開かれる

ここからは「Page Loading Effects」の各設定項目の解説をします。

Page Loading Effectsの使い方

DesignInnovatorsが紹介するローディングアニメーションのおすすめプラグイン|Page Loading Effectsの使い方

① ローディングアニメーションの選択

【合計4種類】Default, Effect1, Effect2, Effect3 +Custom

※Customでは、自分でプログラムを打ち込むことで、独自のアニメーションを実装することができます。

「Custom」を選択した後に表示される「Custom Setting」の、下記画像の赤枠部分にHTMLとCSSのプログラムを組むことで実装可能。

DesignInnovatorsが紹介するローディングアニメーションのおすすめプラグイン|Page Loading Effects|Custom設定

② ローディングアニメーションを何日後に適応させるか

こちらの設定は基本的に「-1」のままにしておきましょう。

数値を「1」以上に設定すると、入力した数字分の日数が経過してから、ローディングアニメーションが適応されるようになります。


③ 最大のローディング待ち時間を設定

○ ローディング画面を長い時間表示させたくない場合に設定

○ ミリ秒単位で設定(例)3秒の場合は「3000」と入力

○ おすすめの最大待ち時間は「3秒」

待ち時間が5秒以上になると、38%のユーザーがホームページから退室するというデータがあります。

4秒を超えても退室する割合が増え、理想は2秒…平均は 3.21秒 とされています。

Webページの読み込み時間、3秒が限界か – 5秒になると直帰率激増マイナビニュース様より

④ チェックを入れるとローディングアニメーションが適応されなくなる

一時的にローディング画面のアニメーションを解除したい場合などに利用しましょう。

DesignInnovatorsが紹介するローディングアニメーションのおすすめプラグイン|Page Loading Effectsの使い方

⑤,⑥ カラーの設定

⑤は背景の色を、⑥は各アニメーションのオブジェクト部分の色を設定します。ご自分のホームページのカラーに似合ったカラーに設定しましょう。


⑦ 「Save Change」をクリックすると設定が更新されます

1-2. 【 Loading Page with Loading Screen 】パーセント表示などの詳細設定ができる拘りプラグイン

DesignInnovatorsが紹介するローディングアニメーションのおすすめプラグイン|Loading Page with Loading Screen

Loading Page with Loading Screen の魅力

3つの魅力
① ローディング画面の適応範囲を設定できるなど詳細な設定ができる
② 様々なアニメーション設定ができるため、ヴァリエーションに富んだ表現が可能
③ デモサイトを利用することで、ローディングアニメーションを事前に確認できる

Loading Page with Loading Screenは、Page Loading Effectsと違って下記の画像にある通り、詳細な設定ができます。

DesignInnovatorsが紹介するローディングアニメーションのおすすめプラグイン|Loading Page with Loading Screen|設定項目の全体像

さらに、パーセント表示ができる設定もあり、その詳細な設定から生まれるアニメーションのヴァリエーションは圧倒的に豊富。

【ローディングアニメーション3つの具体例】



さらに、ローディング中のアニメーション画像の種類も初期から9種類用意されており、幅広い表現が可能となります。

以上のようにLoading Page with Loading Screenでは、詳細設定からヴァリエーション豊かな表現をすることができます。

時間を使ってユーザーを引きつけるローディングアニメーションを導入したい方にはおすすめ…!

実際に利用してみたい方は、以下の導入方法から使い方をご覧になってみて下さい。

Loading Page with Loading Screen の導入方法

DesignInnovatorsが紹介するローディングアニメーションのおすすめプラグイン|Page Loading Effects|実装方法1

①検索窓に「Loading Page with Loading Screen」と入力
②「今すぐインストール」をクリック

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 2

③「有効化」をクリック

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 3

④「設定」に”Loading Page”という項目が追加されていたら導入完了です。”Loading Page”から詳細設定を行うことができます。

Loading Page with Loading Screen の使い方

3点に分けてご説明します
① Demo Siteの使い方
② 基本設定
③ アニメーション設定

① Demo Siteの使い方


Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 4

①専用のDemo Siteのダッシュボード(編集画面)に移動するリンク
②Demo Siteのプレビュー画面を表示
③開発者に具体的な質問をしたい場合にクリック

①をクリックすると、まずはDemo用のワードプレス・ログイン画面に移動します。

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 5

最初からユーザーIDとパスワードが入力されているので、「Log In」をクリックします。

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 6

ログインした後に表示される上記の画面でローディングアニメーションの設定から、左側メニューの「Posts」から実際に記事を投稿してテストすることもできます。

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 4

ご自身のwordpressダッシュボードに戻って…②をクリックすると下記画像のDemo Site専用のプレビュー画面に移動します。

下記画像のプレビュー画面に移動でき、Demo Siteのダッシュボードで編集した設定を確認することができます。

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 7

Demo Siteの編集画面で設定したローディングアニメーションを試験してみたい時に、こちらのプレビュー機能を利用しましょう。

② 基本設定


Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 8

上記の赤枠の項目は3つともに初期設定のままで問題ありません。
※一部Webサイトの専門的な知識が関わるため

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 9

上記の赤枠の項目は、画面の横幅によってローディングアニメーションを適応するかどうか変更できるものです。

例えば、スマホではローディングアニメーションを適応させたくない場合は、下記のようにします。

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 10

上記のように入力すると「415px以上の画面サイズの場合にローディングアニメーションを適用する」という意味になります。

スマホで一番に画面の横幅が広いのは「iPhone XS Max・ iPhone 11 Pro Max 」の414ピクセル(=px)なので…

それより+1pxした数値に設定することで、スマホ以外のPCやタブレットの画面サイズでのみローディングアニメーションが適用される設定となります。

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 11

続けて上記の赤枠の項目は2つとも初期設定のままでも問題ありません。

しかし「Display loading screen in」の項目を「homepage only」に設定すると、ホームページを開いた時にはじめに表示されるページだけ、ローディングアニメーションを適用することができます。

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 12

上記3つの設定項目は赤枠部分のみ編集します。

この項目は特定のページを除外することができる設定。

ローディングアニメーションを除外したい「検索ページ」や「お問い合わせページ」等のURLをコピーペーストしましょう。

※URL一番最後の「/」スラッシュの後に「*」記号を挿入すると特定のページ一式を除外できます

【具体例】

「お問い合わせページ」に関係するページ一式にローディングアニメーションを適用させたくない場合は下記のように入力。

http://tsukasa-tomioka-portfolio.com/contact/*

こうすることで下記のようなURLはすべて除外されます。

http://tsukasa-tomioka-portfolio.com/contact/

http://tsukasa-tomioka-portfolio.com/contact/result

http://tsukasa-tomioka-portfolio.com/contact/question

③ アニメーション設定


Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 13

これらの設定項目でローディングアニメーションの詳細設定が可能。上から順番にご説明していきます。

①Select the loading screen ※” Bar Screen ”は画面中央に左端から右端へ線が伸びてローディングされる。
”Logo Screen”はGIF画像でローディングされる。
② Select background colorローディング中の背景色を選択。
”Apply transparency”を有効にすると、透明な背景色となります。
③ Select image as background ローディング中の背景が適用した背景画像になります。
④ Display image in fullscreen ③で設定した背景画像を画面いっぱいに表示させられるように画像サイズが変形します。
⑤ Select foreground color 以下の配色を設定します。
・①で ” Bar Screen ” に設定していた場合、線の色が指定される
・⑨パーセンテージを表示可にしている場合、数字の色が指定される
⑥ Additional seconds ローディングが終了した後、指定した秒数待機してからページが表示される。
⑦ Include an ad, or your
own block of code
CSSというプログラミングを利用することで、適用したアニメーションを独自に編集することができます。
⑧ Apply the effect on page ※ ローディングが終了した後の、ページを表示させるエフェクトを設定。
⑨ Display loading percent チェックを入れると、パーセンテージを
表示させられます。

※マークが入っている設定項目は有料版にグレードアップすることで、アニメーション設定項目が格段にアップします。

「 ①Select the loading screen」の設定であれば、下記画像のように設定項目をグレードアップができ…

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 15

「 ⑧ Apply the effect on page ※ 」の設定であれば、下記画像のようにローディング終了後のエフェクト設定が豊富となります。

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 18

また、9つの設定項目の中には色を指定できるものがありましたが、「#ffffff」という色彩コードはいじらずに下記動画のようにクリックで簡単に設定ができます。

Loading Page with Loading Screen のまとめ

以上で「 Loading Page with Loading Screen の使い方」は終了です。

Loading Page with Loading Screen は、私が厳選した中でもかなり詳細に設定ができます。

ご自身で魅力的なローディングアニメーションを綿密に設計したい方にはおすすめのプラグインです…!

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 16
Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|LoadingPageWithLoadingScreenの使い方 - 17

最後に、上記の設定は高度な内容なので、初期設定のままにしておくことをおすすめします。

1-3. 【Preloader】ワードプレス経験者に人気のプラグイン

DesignInnovatorsが紹介するローディングアニメーションのおすすめプラグイン|Preloader
Preloaderのメリット
① 公式サイトのフリー素材を使って、多くのアニメーション画像がダウンロードできる
② 他の記事でも紹介されており、日本人からの人気が高い
Preloaderのデメリット
① コード入力が必要なため初心者には難しい

最初にデメリットとして、これまでのプラグインと異なり、ワードプレスのプログラムを編集する必要があります。

そのためもし不具合が生じた際の対応がご自身では難しくなる可能性もございます。

…とは言っても、魅力も盛りだくさん。

まず最初にPreloaderでは、公式サイトにアクセスすることで多彩なローディングアニメーションの画像データをダウンロードすることができます。

【Preloader公式サイト – アニメーション画像データ】

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|Preloaderの使い方 - 6

上記画像のようなローディングアニメーション画像をダウンロードできるだけでなく、その他にも多くの画像データが入手可能です。

さらにローディングアニメーション画像の他にも様々なアニメーションデータをダウンロードすることができます。

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|Preloaderの使い方 - 7

検索窓の下をホバーすると上記の画像にあるように、合計18のカテゴリーを見ることができます。

【Animated.text(custom)】

【Weather conditions】

ローディングアニメーション以外の場面でも利用できそうな画像データが多く取り揃えていますので、一度ご覧になってみてはいかがでしょうか?

Preloader公式サイト

Preloaderの導入方法

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|Preloaderの使い方 - 1

Preloaderをダウンロードし、有効化が完了したら、
①「プラグイン」に「Preloader」という項目が追加されるのでクリックします。

次に、Preloaderを利用するためにはプログラムを編集する必要があります。

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|Preloaderの使い方 - 2

②「外観」から「テーマエディター」をクリック

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|Preloaderの使い方 - 3

③右端の「テーマファイル」の「テーマヘッダー(header.php)」をクリック

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|Preloaderの使い方 - 4

次に「選択したファイルの内容」の下にプログラムが表示されるので、以下のプログラムを探します。

<body <?php body_class(); ?>>

※ワードプレステーマによっては表示が異なります。 その場合は </header>のすぐ下にある<body>をお探し下さい。探すのが難しいときは、以下の手順で探してみて下さい。

1.
プログラムが書かれてある箇所を一回クリックした後、検索のショートカットキー(Ctrl + F / Command + F)を入力。

2.
”body”と入力してEnter。

3.
Enterを押す度に”body”の文字列が順に検索されるので、<body>を探す。

次に、探しあてたコードの真下に以下のコードをコピーペーストします。

<!-- プラグイン:preloader -->
<div id=”wptime-plugin-preloader”></div>
Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|Preloaderの使い方 - 5

最後に、⑤「ファイルを更新」をクリックしてPreloaderの準備完了です。

Preloaderの使い方

Design Innovators - 冨岡司が紹介する参考ローディングアニメーション|Preloaderの使い方 - 10

上から順に設定項目を解説していきます。

① Background Color ローディング中の背景色を設定します。
初期設定の「#FFFFFF」のままにしておく事をおすすめします。
② Preloader Image ご自身のサイトURLが表示されます。
URL一番最後の「the-preloader/images/」の後にダウンロードしたアニメーション画像のファイル名を入力します。
③ Preloader Image Width有料版を購入すると、こちらの設定から画像の横幅を変更することができます。
④ Preloader Image Height ③と同様に有料版を購入すると、画像の縦幅を変更できます。
⑤ Display Preloader ローディングアニメーションを表示させるページを指定することができます。
※「In The Entire Website」はすべてのページに適用という意味となります。

最後に「Save Changes」をクリックして設定を保存することができます。

2. まとめ

「Page Loading Effects」は初心者でも簡単に魅力的でシンプルなアニメーションが導入できます。

一方「Loading Page with Loading Screen」では詳細な設定からヴァリエーション豊かなアニメーションに。

「Preloader」は設定は難しいが、公式サイトからヴァラエティー豊富なアニメーションデータをダウンロードし、実装することができます。


ローディングアニメーションを導入すると、ユーザーが感じるホームページの待ち時間のストレスを抑える事ができます。

さらに魅力的なアニメーションを実装すれば、他のホームページとは異なるユニークによって、少しでもユーザーの愛着を増やすことができるでしょう。

私の厳選したプラグインを利用して、皆さんのホームページの機能とデザイン性がアップすれば幸いです。

Pick Up News

【Udemy】Web制作のフロントエンドで実務的に役立つおすすめ動画6選


WordPressに関連するリンク集

【ZEBLINE】あなたの読者を惹きつけるラインマーカープラグイン

【BEAU】簡単な操作で個人ブランディングに必要なサイトができるWordPressテーマ

【Code Camp】WordPressを本格的に学ぶならプログラミングオンラインスクール

INDEX