WordPressにプリローダーアニメーションを追加する方法（ステップバイステップ）

ウェブサイトの読み込み中に表示される回転アイコンやアニメーションに気づいたことはありますか？それがプリローダーアニメーションであり、WordPressプロジェクト全体で使用できる便利なツールです。

プリローダーは実際の目的を果たします。コンテンツが多いサイトでは、訪問者が重要な読み込み秒数の間にエンゲージメントを維持し、バウンス率を減らすことができます。

ビジネスサイトの場合、ブランドのプリローダーはプロフェッショナルなタッチを加えることさえできます。

これが複雑に聞こえると思っても心配しないでください。あらゆるスキルレベルのユーザーに適した、WordPressのプリローダーアニメーションを追加する2つの方法を考案しました。

WordPressにプリローダーアニメーションを追加する理由

プリローダーとは、ページの読み込みを待っている間に表示されるアニメーションのことです。ウェブサイトが機能していることをユーザーに伝え、辛抱強く待つように促します。

コンテンツの準備ができると、プリローダーが消え、訪問者は通常どおりサイトを閲覧できるようになります。このWordPressデザイン要素の例を次に示します。

ページに大きな画像や動画の埋め込みが含まれている場合は、ローディングアニメーションを追加したい場合があります。これらは読み込みに時間がかかるため、プリローダーはユーザーを惹きつけ、早期に離脱しないようにします。

ただし、パフォーマンスの悪さを隠すためだけにプリローダーを使用すべきではありません。

それでは、WordPressウェブサイトにページ読み込みアニメーションを簡単に追加する方法を見ていきましょう。以下のクイックリンクを使用して、使用したい方法に直接ジャンプしてください。

WP Smart Preloaderでシンプルなローディングアニメーションを追加する方法

WordPressにプリロードアニメーションを追加する簡単な方法の1つは、WP Smart Preloaderを使用することです。

設定が多すぎて迷いたくない場合に、迅速かつ簡単なソリューションを求めるなら、このプラグインは素晴らしい選択肢です。

これは、6つの組み込みWordPressプリローダーアニメーションを使用でき、アニメーションを有効にするために多くの設定を構成する必要がないためです。

まず、WP Smart Preloaderプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドを参照してください。

アクティベートしたら、設定 » WP Smart Preloader に移動し、「Smart Preloader」ドロップダウンを開きます。これにより、使用できるさまざまなアニメーションが表示されます。

プラグインは選択したアニメーションのプレビューを表示するため、さまざまなプリローダーを選択して、どれが一番気に入るかを確認できます。

デフォルトでは、アニメーションはWordPressウェブサイト全体に表示されますが、必要に応じてホームページにのみ表示することもできます。「ホームページにのみ表示」ボックスをチェックするだけです。

独自のCSSアニメーションを作成したい場合は、「カスタムCSS」ボックスにコードを入力するだけです。

もう1つのオプションは、「カスタムアニメーション」ボックスにコードを追加して、カスタムHTML5アニメーションを作成することです。

アニメーションを選択したら、「ローダーを表示する期間」セクションまでスクロールします。ここで、プリローダーが再生される長さを変更できます。 

デフォルトオプションは1500ミリ秒、つまり1.5秒です。これはほとんどのサイトでうまく機能するはずですが、必要に応じて別の数値を入力することもできます。

デフォルトでは、アニメーションは完全にフェードアウトするのに2500ミリ秒、つまり2.5秒かかります。これを変更するには、「ローダーのフェードアウト」フィールドに大きいまたは小さい数値を入力するだけです。

プリローダーの設定が完了したら、「変更を保存」ボタンをクリックして設定を保存してください。

これで、WordPressブログまたはウェブサイトにアクセスして、プリローダーが動作していることを確認できます。

Safelayout Cute Preloaderでカスタマイズ可能なローディングアニメーションを追加する方法

最初のプラグインは、WordPressにローディングアニメーションを簡単に追加できます。ただし、ブランドに合わせてデザインをより細かく制御したい場合は、Safelayout Cute Preloaderをチェックできます。

開始するには、WordPress管理エリアでプラグインをインストールして有効化してください。詳細については、WordPressプラグインのインストール方法のガイドを参照してください。

プラグインが有効になったら、設定 » Safelayout Preloader に移動してセットアップを開始してください。

ステップ1：プリローダーを有効にしてプリセットを選択する

まず、プリローダーをオンにし、サイトのどこに表示するかを決定する必要があります。

「プリセット」タブから始めて、既製のデザインを選択できます。気に入ったものがあれば、テンプレートの下にある「このプリローダーに設定を変更」ボタンをクリックするだけです。

次に、「表示設定」タブに切り替えます。

ここで、「Safelayout Cute Preloaderを有効にする」ボックスをチェックして、プラグインが機能していることを確認する必要があります。

次に、「表示」ドロップダウンを使用して、プリローダーをどこに表示するかを選択します。このチュートリアルでは、「ウェブサイト全体」を選択します。

この画面では、アニメーションの期間を設定することもできます。

• 最小表示時間：プリローダーが表示される最短時間を設定します。ページが即座に読み込まれたとしても、ブランドのアニメーションが少なくとも一瞬は表示されるようにしたい場合に便利です。
• 最大ロード時間: これは、プリローダーが表示される最も長い時間です。これはセーフティネットとして機能し、ページの読み込みエラーが発生した場合にユーザーがプリローダーを見続けるのを防ぐために、プリローダーを自動的に非表示にします。

数秒経過した後に「閉じる」ボタンを表示することもできます。変更を加え終えたら、「変更を保存」をクリックするだけです。

ステップ2：コアアニメーションをカスタマイズする

これで、アニメーション自体の外観をデザインできます。これには、背景、メインアイコン、およびオプションのプログレスバーが含まれます。

まず、「背景」タブに移動します。

ここでアニメーション効果を選択し、背景色を変更し、不透明度を調整できます。

特別な背景効果が不要な場合は、「背景なし」を選択するだけです。

次に、「プログレスバー」タブをクリックします。

プログレスバーは、ページが読み込まれていることを訪問者に示すのに最適な方法です。

図形を選択し、その色、位置、サイズをカスタマイズできます。

不要な場合は、「プログレスバーなし」を選択してください。

その後、「アイコン」タブに移動します。

これは、回転する円のような、メインのアニメーショングラフィックです。

アイコンを選択し、そのサイズ、色、アニメーションスタイルを変更できます。アイコンが他の設定と合わないと感じる場合は、「アイコンなし」を選択できます。

各タブのカスタマイズが完了したら、「変更を保存」ボタンをクリックすることを忘れないでください。

ステップ3：ブランディングとテキストの追加

最後に、ロゴとカスタムテキストを追加して、プリローダーをブランドに完全に一致させることができます。

「ブランドイメージ」タブに移動し、「ブランドを表示」ボックスをチェックしてロゴを追加します。

次に、「メディアライブラリ」ボタンをクリックして、ロゴ画像をアップロードします。

その後、ロゴの位置や余白を調整して、他の要素とうまく調和させることができます。

次に、「カウンター」タブを見てみましょう。

この設定は、読み込みの進行状況を示すために0%から100%までのパーセンテージを表示します。これを有効にして、位置、色、フォントサイズをカスタマイズできます。

最後に、「テキスト」タブに移動します。デフォルトでは、プリローダーは「Loading…」と表示されますが、これをよりクリエイティブなものに変更できます。

「テキストを表示」ボックスをチェックし、独自のメッセージを書き込み、フォント、色、位置をカスタマイズするだけです。

完了したら、「変更を保存」ボタンをクリックします。

これで完了です！設定に基づいてプリローダーアニメーションが表示されるはずです。モバイル、デスクトップ、タブレットでサイトを表示して、動作を確認できます。

私たちのサイトは以下のようになっています：

WordPressプリローダーに関するよくある質問

長年にわたり、多くの読者からプリローダーの使用について質問を受けてきました。ここでは、最も一般的な質問に対する回答を紹介します。

プリローダーはウェブサイトの速度に影響しますか？

いいえ、プリローダーはウェブサイトの読み込みを速くしません。それは単に、ブラウザがコンテンツをダウンロードしている間に訪問者を楽しませるための視覚的なツールです。

サイトの速度を実際に向上させるには、キャッシュ、画像の最適化、および高速なホスティングプロバイダーの使用に焦点を当てる必要があります。

プリローダーはSEOに悪いですか？

正しく実装されていれば問題ありません。ただし、GoogleのCore Web Vitals、特にLargest Contentful Paint（LCP）には注意が必要です。

プリローダーが画面に表示され続ける時間が長すぎると、Googleはメインコンテンツがまだ読み込まれていないと判断する可能性があります。これはランキングに悪影響を与える可能性があります。アニメーションの持続時間は1.5秒から2秒未満にすることをお勧めします。

プリローダーが回転し続けます。どうすれば修正できますか？

プリローダーがスタックする場合、多くはキャッシュプラグインの競合が原因です。WP Rocketのようなプラグインには、「JavaScript実行の遅延」機能がよくあります。

この機能はプリローダーのコードの実行を停止するため、ページが読み込み完了したという信号を受け取ることができません。これを修正するには、キャッシュプラグインのJavaScript遅延設定からプリローダープラグインのファイルを除外する必要があります。

特定のページでのみプリローダーを使用できますか？

はい、もちろんです。ほとんどのプリローダープラグインでは、アニメーションが表示される場所を選択できます。

サイト全体、ホームページのみ、または読み込み時間が長くなると予想される特定の投稿やページで有効にすることができます。

プリローダーとスプラッシュページの違いは何ですか？

プリローダーはコンテンツの読み込み中に表示され、自動的に消えます。

スプラッシュページは、ユーザーがリンクまたはボタンをクリックしてメインのウェブサイトに入る必要がある、独立した紹介画面です。

スプラッシュページの使用は、訪問者にとって余分なステップとなり、直帰率やSEOに悪影響を与える可能性があるため、一般的に推奨していません。

ウェブサイト訪問者を引きつけるための、さらに多くのWordPressのヒント

プリローダーアニメーションを追加することは、WordPressサイトを強化するための多くの方法の1つにすぎません。視聴者を魅了するためのより創造的なアイデアを探しているなら、私たちはあなたをカバーしています：

• WordPressテーマにパララックス効果を追加する方法 – このスクロールイリュージョンテクニックで、奥行きと視覚的な興味を作成します。
• WordPressブログに雪の結晶を簡単に降らせる方法 – この冬の魔法のタッチで訪問者を喜ばせましょう。
• WordPressウェブサイトにダークモードを簡単に追加する方法 – この人気の機能で、より快適なブラウジング体験を提供します。
• WordPressサイトにハロウィンの効果をもたらす方法 – これらの楽しくてお祝いのハロウィントリックであなたのサイトを怖がらせましょう。
• WordPressでアニメーション背景を追加する方法 – 印象的な動きのある背景で大胆なステートメントを作成します。
• WordPressでYouTube動画を全画面背景として追加する方法 – ダイナミックなビデオ背景で強力な第一印象を作成します。
• WordPressサイトに無限スクロールを追加する方法（ステップバイステップガイド） – スクロールするにつれてコンテンツがシームレスに読み込まれるようにして、訪問者を惹きつけましょう。

この記事が、WordPressサイトにプリローダーアニメーションを簡単に追加する方法を学ぶのに役立ったことを願っています。また、WordPressの最高のドラッグアンドドロップページビルダーの専門家によるピックや、WordPressウェブサイトの編集方法に関する完全なガイドもチェックしてください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。