この記事をご覧になっている皆さんは、以下のような魅力的なローディングアニメーションを目にした事はございませんか？
ここまでプロレベルのローディングアニメーションは対応できなくとも…ワードプレスのプラグインを使えば専門知識なしで簡単に実装できます。
プラグインを使ったローディングアニメーションの例
上記に載せたローディングアニメーションはすべてワードプレスの無料プラグインで実装したものです。
この記事では、現役のWebクリエイターが徹底厳選した３つのプラグインを、比較解説していきます。
ローディング画面にアニメーションを実装する最大のメリットは、ホームページを見てくれているユーザーが感じる、待ち時間のストレスを抑えらること。
皆さんも、この記事を参考に魅力的なローディングアニメーションを実装し、少しでもユーザーが閲覧しやすいホームページにしましょう！
現役のWebエンジニア/株式会社J.B.Goodeで活躍中
20歳の頃に独学で全て勉強し、お世話になっていた社長の紹介で今の会社へ。
JavaScriptを使った動的な実装から制作環境の準備まで。
1. ローディングアニメーションが実装できるWordPress無料プラグイン３選
1-1. 【Page Loading Effects】初心者でも楽々カスタマイズできるおすすめプラグイン
Page Loading Effectsの魅力
② シンプルなアニメーションで、デザイン性が良い
③ カラーや最大のローディング時間など必要最低限の設定が可能
④ 自分でプログラムを組むことで独自のアニメーションの実装が可能
Page Loading Effectsは、下記画像のように設定項目が少なくて非常にシンプル。
アニメーションの種類は合計4種類で、「背景とオブジェクトのカラー設定」と「最大ローディング時間」の必要最低限の設定ができます。
【4種類のアニメーション】
どれも画面中央に表示されるシンプルなアニメーションとなっており、デザイン性に優れています。
Page Loading Effectsの使い方
プラグインの「新規追加」をクリック
①検索窓に「Page Loading Effects」と入力
②「今すぐインストール」をクリック
③「有効化」をクリック
④「インストール済みプラグイン」をクリックする
⑤インストールしたプラグイン一覧に「Page Loading Effects」があることを確認
⑥ワードプレスメニュー画面の左下に「Page Loading Effects」が追加されていることを確認
⑥メニュー画面左下の「Page Loading Effects」をクリック
⑦Page Loading EffectsのSetting画面が開かれる
ここからは「Page Loading Effects」の各設定項目の解説をします。
Page Loading Effectsの使い方
① ローディングアニメーションの選択
【合計４種類】Default, Effect１, Effect２, Effect３ ＋Custom
※Customでは、自分でプログラムを打ち込むことで、独自のアニメーションを実装することができます。
「Custom」を選択した後に表示される「Custom Setting」の、下記画像の赤枠部分にHTMLとCSSのプログラムを組むことで実装可能。
② ローディングアニメーションを何日後に適応させるか
こちらの設定は基本的に「-1」のままにしておきましょう。
数値を「1」以上に設定すると、入力した数字分の日数が経過してから、ローディングアニメーションが適応されるようになります。
③ 最大のローディング待ち時間を設定
○ ローディング画面を長い時間表示させたくない場合に設定
○ ミリ秒単位で設定（例）3秒の場合は「3000」と入力
○ おすすめの最大待ち時間は「3秒」
待ち時間が5秒以上になると、38%のユーザーがホームページから退室するというデータがあります。
4秒を超えても退室する割合が増え、理想は2秒…平均は 3.21秒 とされています。
④ チェックを入れるとローディングアニメーションが適応されなくなる
一時的にローディング画面のアニメーションを解除したい場合などに利用しましょう。
⑤,⑥ カラーの設定
⑤は背景の色を、⑥は各アニメーションのオブジェクト部分の色を設定します。ご自分のホームページのカラーに似合ったカラーに設定しましょう。
⑦ 「Save Change」をクリックすると設定が更新されます
1-2. 【 Loading Page with Loading Screen 】パーセント表示などの詳細設定ができる拘りプラグイン
Loading Page with Loading Screen の魅力
② 様々なアニメーション設定ができるため、ヴァリエーションに富んだ表現が可能
③ デモサイトを利用することで、ローディングアニメーションを事前に確認できる
Loading Page with Loading Screenは、Page Loading Effectsと違って下記の画像にある通り、詳細な設定ができます。
さらに、パーセント表示ができる設定もあり、その詳細な設定から生まれるアニメーションのヴァリエーションは圧倒的に豊富。
【ローディングアニメーション３つの具体例】
さらに、ローディング中のアニメーション画像の種類も初期から9種類用意されており、幅広い表現が可能となります。
以上のようにLoading Page with Loading Screenでは、詳細設定からヴァリエーション豊かな表現をすることができます。
時間を使ってユーザーを引きつけるローディングアニメーションを導入したい方にはおすすめ…！
実際に利用してみたい方は、以下の導入方法から使い方をご覧になってみて下さい。
Loading Page with Loading Screen の導入方法
①検索窓に「Loading Page with Loading Screen」と入力
②「今すぐインストール」をクリック
③「有効化」をクリック
④「設定」に”Loading Page”という項目が追加されていたら導入完了です。”Loading Page”から詳細設定を行うことができます。
Loading Page with Loading Screen の使い方
② 基本設定
③ アニメーション設定
① Demo Siteの使い方
①専用のDemo Siteのダッシュボード（編集画面）に移動するリンク
②Demo Siteのプレビュー画面を表示
③開発者に具体的な質問をしたい場合にクリック
①をクリックすると、まずはDemo用のワードプレス・ログイン画面に移動します。
最初からユーザーIDとパスワードが入力されているので、「Log In」をクリックします。
ログインした後に表示される上記の画面でローディングアニメーションの設定から、左側メニューの「Posts」から実際に記事を投稿してテストすることもできます。
ご自身のwordpressダッシュボードに戻って…②をクリックすると下記画像のDemo Site専用のプレビュー画面に移動します。
下記画像のプレビュー画面に移動でき、Demo Siteのダッシュボードで編集した設定を確認することができます。
Demo Siteの編集画面で設定したローディングアニメーションを試験してみたい時に、こちらのプレビュー機能を利用しましょう。
② 基本設定
上記の赤枠の項目は３つともに初期設定のままで問題ありません。
※一部Webサイトの専門的な知識が関わるため
上記の赤枠の項目は、画面の横幅によってローディングアニメーションを適応するかどうか変更できるものです。
例えば、スマホではローディングアニメーションを適応させたくない場合は、下記のようにします。
上記のように入力すると「415px以上の画面サイズの場合にローディングアニメーションを適用する」という意味になります。
スマホで一番に画面の横幅が広いのは「iPhone XS Max・ iPhone 11 Pro Max 」の414ピクセル（＝px）なので…
それより＋1pxした数値に設定することで、スマホ以外のPCやタブレットの画面サイズでのみローディングアニメーションが適用される設定となります。
続けて上記の赤枠の項目は２つとも初期設定のままでも問題ありません。
しかし「Display loading screen in」の項目を「homepage only」に設定すると、ホームページを開いた時にはじめに表示されるページだけ、ローディングアニメーションを適用することができます。
上記３つの設定項目は赤枠部分のみ編集します。
この項目は特定のページを除外することができる設定。
ローディングアニメーションを除外したい「検索ページ」や「お問い合わせページ」等のURLをコピーペーストしましょう。
※URL一番最後の「/」スラッシュの後に「*」記号を挿入すると特定のページ一式を除外できます
【具体例】
「お問い合わせページ」に関係するページ一式にローディングアニメーションを適用させたくない場合は下記のように入力。
https://tsukasa-tomioka-portfolio.com/contact/*
こうすることで下記のようなURLはすべて除外されます。
https://tsukasa-tomioka-portfolio.com/contact/
https://tsukasa-tomioka-portfolio.com/contact/result
https://tsukasa-tomioka-portfolio.com/contact/question
③ アニメーション設定
これらの設定項目でローディングアニメーションの詳細設定が可能。上から順番にご説明していきます。
| ①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」の設定であれば、下記画像のように設定項目をグレードアップができ…
「 ⑧ Apply the effect on page ※ 」の設定であれば、下記画像のようにローディング終了後のエフェクト設定が豊富となります。
また、９つの設定項目の中には色を指定できるものがありましたが、「#ffffff」という色彩コードはいじらずに下記動画のようにクリックで簡単に設定ができます。
Loading Page with Loading Screen のまとめ
以上で「 Loading Page with Loading Screen の使い方」は終了です。
Loading Page with Loading Screen は、私が厳選した中でもかなり詳細に設定ができます。
ご自身で魅力的なローディングアニメーションを綿密に設計したい方にはおすすめのプラグインです…！
最後に、上記の設定は高度な内容なので、初期設定のままにしておくことをおすすめします。
1-3. 【Preloader】ワードプレス経験者に人気のプラグイン
② 他の記事でも紹介されており、日本人からの人気が高い
最初にデメリットとして、これまでのプラグインと異なり、ワードプレスのプログラムを編集する必要があります。
そのためもし不具合が生じた際の対応がご自身では難しくなる可能性もございます。
…とは言っても、魅力も盛りだくさん。
まず最初にPreloaderでは、公式サイトにアクセスすることで多彩なローディングアニメーションの画像データをダウンロードすることができます。
【Preloader公式サイト – アニメーション画像データ】
上記画像のようなローディングアニメーション画像をダウンロードできるだけでなく、その他にも多くの画像データが入手可能です。
さらにローディングアニメーション画像の他にも様々なアニメーションデータをダウンロードすることができます。
検索窓の下をホバーすると上記の画像にあるように、合計18のカテゴリーを見ることができます。
【Animated.text（custom）】
【Weather conditions】
ローディングアニメーション以外の場面でも利用できそうな画像データが多く取り揃えていますので、一度ご覧になってみてはいかがでしょうか？
Preloaderの導入方法
Preloaderをダウンロードし、有効化が完了したら、
①「プラグイン」に「Preloader」という項目が追加されるのでクリックします。
次に、Preloaderを利用するためにはプログラムを編集する必要があります。
②「外観」から「テーマエディター」をクリック
③右端の「テーマファイル」の「テーマヘッダー（header.php）」をクリック
次に「選択したファイルの内容」の下にプログラムが表示されるので、以下のプログラムを探します。
<body <?php body_class(); ?>>※ワードプレステーマによっては表示が異なります。 その場合は </header>のすぐ下にある<body>をお探し下さい。探すのが難しいときは、以下の手順で探してみて下さい。
１．
プログラムが書かれてある箇所を一回クリックした後、検索のショートカットキー（Ctrl + F / Command + F）を入力。
２．
”body”と入力してEnter。
３．
Enterを押す度に”body”の文字列が順に検索されるので、<body>を探す。
次に、探しあてたコードの真下に以下のコードをコピーペーストします。
<!-- プラグイン：preloader -->
<div id=”wptime-plugin-preloader”></div>
最後に、⑤「ファイルを更新」をクリックしてPreloaderの準備完了です。
Preloaderの使い方
上から順に設定項目を解説していきます。
| ① 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」は設定は難しいが、公式サイトからヴァラエティー豊富なアニメーションデータをダウンロードし、実装することができます。
ローディングアニメーションを導入すると、ユーザーが感じるホームページの待ち時間のストレスを抑える事ができます。
さらに魅力的なアニメーションを実装すれば、他のホームページとは異なるユニークによって、少しでもユーザーの愛着を増やすことができるでしょう。
私の厳選したプラグインを利用して、皆さんのホームページの機能とデザイン性がアップすれば幸いです。
3. WordPress運用の悩み解決ができるUdemyのおすすめ学習動画３選
最後に、世界で人気を誇っているオンライン動画学習ができるプラットフォーム「Udemy」のおすすめ動画をご紹介します。
簡単にUdemyの魅力をまとめると下記の通りです。
② 買い切り購入なので、ダウンロードすればいつでもどこでも好きな時に学習ができる
③ 無料コンテンツから3,000円〜20,000円強まで選べる価格プラン
④ 30日いないなら返金保証が付いている
⑤ 今後も知識を持った人が増えるたびに、学習動画が更新されてゆくので、期待性が高い
Udemyでは、全国のプロフェッショナルがその知識を動画にまとめてティーチングしてくれます。
その学習動画は、初心者向けから、ホームページやブログを本格的に運営するために必要なノウハウを、「オンラインスクールを運営しているプロ」が教えてくれる動画まであります。
僕も自身のスキルアップのためにいくつか購入しており、買い切りでいつでも好きなタイミングで学習を進められるので、とても魅力を感じています。
WordPressでの悩みを少しでも解決できればと思い、おすすめの動画を３つ厳選した記事を用意しているので、一度ご覧になってみてください。
【Udemy】これでWordPressの悩み解決！初心者にもおすすめの動画３選
WordPressに関連するリンク集
【ZEBLINE】あなたの読者を惹きつけるラインマーカープラグイン
Pick Up News
CodeCampはどんなプログラミングスクール？評判や口コミなどを解説！
テックアカデミー良い/悪い評判を徹底解説！料金や転職サポートは？
