WEBサイトを開いたときに、“クルクル回るアイコン”や“動くロゴ画像”が表示されるローディングアニメーション。
そんな演出を、自分のWordPressサイトにも取り入れてみたい…そう思ったことはありませんか？
無料のローディング系プラグインの中でも「LoftLoader」のように、定番のアニメーションを選択肢の中から選んで簡単に導入できるものもありますが、
「もっとこだわりたいし、せっかくだからカスタマイズしたい」
「他のサイトや同業他社と差をつけたい」
「ブランドイメージや自分らしさを表現し、オリジナル感を演出したい！」
と考えている方におすすめなのが、
"自作したGIFアニメーションを無料プラグイン「Loading Page」を使ってWordPressに表示させる方法"です。
この記事では、「Loading Page」プラグインの特徴や実際の使い方、注意点を紹介し、初心者でも簡単にGIFアニメーションを無料プラグインでWordPressに表示させられるように解説します！
※OPENをクリックすると目次が開きます
Loading Pageの特徴と使い方
このプラグインのポイント（GIF対応・簡単設定）
このプラグインの最大の魅力は、「実装時にぶつかるあらゆる壁を、ひとつで解決してくれる」という点です。
これまでに5〜6種類の無料ローディングアニメーション用プラグインを検証しましたが、
無料でGIFを使えるものは他にもあるものの、以下の機能をすべて兼ね備えているのはこのプラグインだけでした。
- GIFがアップロードで簡単に設定できる
- GIFとは別に、好みの背景画像をアップロードできる
- ローディング画面を“画面いっぱい”に表示できる
- 最小表示時間を設定でき、アニメーションの途中でページが切り替わるのを防げる
- GIFのサイズ指定が可能で、表示バランスの調整がしやすい
たとえば「背景付きのGIFを作ってアップロードしたのに画面全体に表示されなかった…」とか、
「読み込みが早すぎてアニメーションが途中で切れてしまった…」など、いざ実装してみると意外と細かい問題に直面しがちです。
他のプラグインでは有料版でしか使えないような機能も、このプラグインでは無料で提供されており、カスタマイズ性も非常に高いのが特徴です。
もちろん、よく見かける“クルクル回るアイコン”タイプのローディング表示も選んで簡単に設定可能です。
Loading PageでGIF実装のやり方
1.プラグインのインストールと有効化
まずはLoading Pageをインストールして有効化しましょう！
「Loading Page with Loading Screen」が正式名称ですが、Loading Pageと検索すれば出てきます。
下記の今すぐインストールをクリック後、「今すぐインストール」ボタンが「有効化」ボタンに変化しますので有効化してください。
2.Loading Page設定画面の開き方
有効化した自動的に設定画面に遷移しますが、下記画像のように設定＞Loading Pageからいつでも設定画面に行けます。
それではいよいよ、設定していきます！
3.Loading Page設定方法
上記の画像通りの手順ですが番号ごとに補足していきます。
①チェックを入れるとローディングアニメーションを表示されます。
まずはここをチェックしましょう。
②チェックを入れるとローディングアニメーションの右上に小さな「×」がでます。
ローディング画面を省略したいユーザーや、万が一もし何らかの不具合で画面が閉じなくなったときの対策にもなります。
個人的に「×」の大きさが目立たないように工夫されていて、良かったです◎
③「All Screens」のほかに「Greater Than」や「Lesser Than」を選ぶこともでき、幅（Width）の指定ができます。
いろいろと試してみましたが、設定による具体的な変化は確認できませんでした。
今回は「All Screens（すべての画面）」に設定して進めます。
④ローディングアニメーションを表示するタイミング（頻度）を選べます。alwaysの他には以下が設定できます。
・once per session（セッションごとに 1 回）
・once per page（ページごとに 1 回）
⑤ローディングアニメーション画面の表示対象ページが選べます。
トップページを開いたときのみか、全ページの読み込み時に設定したいかが選べます。
・homepage only（トップページのみ表示）
・all pages（すべてのページに表示）
all pagesのすぐ下の大きなテキストボックスの中にURLを指定すると、指定したページのみにローディングアニメーションを表示することも可能です。
⑥ローディングアニメーション画面の表示デバイスが選べます。
デスクトップ（PC）だけやモバイルだけ、または両方といったカスタムが出来ます。
……お疲れ様です！ここまでで設定はちょうど半分ほど設定できました！
以下で、いよいよ具体的にGIFの設定や背景の設定などをしていきましょう✨
⑦ローディングアニメーションの表示タイプが選べます。
GIF設定する場合は「LogoScreen」でOKです。その他の設定項目は下記です。
・BarScreen…読み込みバー(プログレスバー)を表示できます。「～100%」の数値を出したいときに◎
・TextScreen…テキストを表示できます。たとえば「読み込み中…」など、簡単なメッセージを入れたいときに便利です。
⑧「Browse」をクリックして「メディアライブラリ」からGIFをアップロード・設定できます。
Grayscale to color effectと Apply blink effectはエフェクトですが、GIFの場合は設定しなくてOKです。
⑨GIFの表示サイズが設定できます。サイズは自由に変えられますが、アスペクト比（縦横比）に注意してください。
比率が崩れると、ロゴが横長になったり縦につぶれたりします。今回は16:9で設定しています。
⑩ここで背景を画像をアップロードして設定できます。
単色だけでなく、画像を使えることでデザインの自由度が上がります◎
とはいえ、たとえば白背景にロゴGIFを乗せたいだけの場合は、ひとつ上にある「Select background color」から単色の背景色を指定するだけでもおしゃれに仕上がります。
⑪ローディングアニメーションの最小表示時間が設定できます。
最近のWebサイトは読み込みが速いので、せっかくのGIFが一瞬しか見えない…ということも。
この設定をしておけば、読み込み完了後も指定した秒数はアニメーションを表示し続けてくれます。
GIFの動きが途中で切れてしまうのを防ぐためにも、ここはぜひ設定しておきたい項目です！
設定は以上で完了です！サイトの表示画面を確認してみてください。思ったように設定できましたでしょうか？☺
GIFローディング画面を使う際の注意点
GIF容量サイズ
まず最初に確認しておきたいのが、アップロードするGIFのファイルサイズです。
WordPressの「メディアライブラリ」にアップできるサイズには上限があります。
あまりにも重いとアップロード自体ができなかったり、サイトの表示スピードに悪影響を及ぼす可能性があります。
目安として、700KB程度までなら問題なく設置できました。
できるだけ軽量に仕上げるためには、GIFを作る際に下記の工夫が効果的です。
・アニメーションのループを短くする
・色数を減らす
・解像度を控えめにする
ちなみに、Loading Pageではmp4ファイルは使えません。
私も当初、カスタマイズ性の高いローディング画面としてmp4形式の動画も視野に入れて検証していましたが、無料版プラグインではmp4を使えるものは見つかりませんでした。
本格的に凝ったローディング演出をしたい場合は、実はGIFよりmp4の方が軽量で高画質というメリットもあります。
ただし、現状、WordPress上で手軽にアップロードできる形式はGIFが主流のようです。
最小時間の設定について
せっかく作ったこだわりのGIFも、ページの読み込みが早すぎると一瞬で消えてしまうことがあります。
その対策として、「最小表示時間」を設定できるプラグインを選ぶことはとても重要です。
Loading Pageでは、読み込みが完了していても、設定した秒数だけローディング画面をキープしてくれます。
ただし注意点として、ローディング時間が長すぎると、ユーザーが離脱（ブラウザバック）する原因にもなりかねません。
そのため、表示させるページの選定や、ローディング映像の長さはユーザーを飽きさせないことを考えるのがおすすめです。
トップページだけや特定のページのみ表示するなど、限定的に使うことで希少価値や新鮮さを演出するのが良いかもしれません◎
他プラグインとの兼ね合い
WordPressではよくあることですが、プラグイン同士の相性が悪いと不具合が出ることもあります。
読み込みが進まなかったり、表示崩れが起きたりする場合は、他のプラグインと競合している可能性があります。
基本的に、同じ役割のプラグインは複数入れないようにするのがベストです。
たとえば「ページによってローディング画面を変えたい」と思って、複数のプラグインを使い分けようとするのは、かえってトラブルの元になるかもしれません。
もしどうしても、より細かい演出やページごとの切り替えをしたい場合は、有料プラグインの導入を検討されるのも良いと思います。
まとめ｜GIFローディング画面でサイトに遊び心と個性を
Webサイトの第一印象は、読み込み中の数秒で決まることもあります。
今回ご紹介した『Loading Page』を使えば、無料でありながらGIFや背景画像を組み合わせて、オリジナルのローディング画面をカスタマイズできます。
ロゴやキャラクターを使ったGIFを表示させることで、
「ただ読み込むだけの時間」が、サイトの世界観を伝える貴重な演出のひとつになります。
工夫次第で手軽に“ちょっと差がつく”サイトに仕上げることも可能です。
少しの工夫でサイトに遊び心とブランディングの個性をプラスできるこの方法、ぜひ気軽に試してみてくださいね！
投稿者プロフィール
-
元銀行員。退行後手に職をつけたい気持ちから元々興味があったWeb制作の道へ。
訓練校でHTMLやCSS、デザインについて半年間学び、その後デザイン会社で2年程度の実務経験を積む。
日々の業務を通して、お客様自身で更新・運用できる生きたサイトを作成できるWordPressの需要を感じ、2024年7月より株式会社ウェブロードに入社。
技術やデザイン、知識を磨きながらお客様視点での制作・運用を行っている。
最新の投稿
お問合せフォームはこちら
弊社サービスをご検討いただきありがとうございます。
こちらのカテゴリ内のご質問と回答で解決できない場合は、ぜひ下記フォームよりお問い合わせください。ご相談・お見積りのご依頼は無料です。
お申込前のお打ち合わせはメール/お電話/GoogleMeet等オンラインでもご対応可能です。全国からお問い合わせを受付けています。
翌営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。
