目次

• プリローダー・アニメーションが重要な理由
• プリローダー・スタイル
• ステップバイステップElementorでのカスタムプリローダーの追加
  • ステップ1：プリローダー・プラグインのインストール
  • ステップ2：Preloader Plusのインストール
  • ステップ3：プリローダーの設定
  • ステップ4：プリローダーアニメーションの選択
  • ステップ5：デザインとタイミングの調整
• Elementorとプリローダーを統合してより大きなコントロールを実現
• プリローダーのテストと最適化
• 最終的な感想あなたのElementorウェブサイトを際立たせるために

プリローダー・アニメーションが重要な理由

プリローダーは、Elementorウェブサイトの第一印象を印象深いものに変えることができます。真っ白なページや恐ろしいローディングスピナーの代わりに、よくデザインされたプリローダーが個性を加え、コンテンツが表示されるのを待つ間、訪問者の興味を惹きつけます。この記事では、Elementorでプリローダーアニメーションを作成・カスタマイズする手順を、誰でもできる簡単なステップに分けて説明します。

リンクをクリックしたのに、真っ白な画面を見つめているとします。イライラしますよね？プリローダーアニメーションは、ページがアクティブに読み込まれているという視覚的なフィードバックを提供することで、この問題を解決します。プリローダーはユーザーのエンゲージメントを高めるだけでなく、視覚的な創造性によってブランドの個性を伝えるのにも役立ちます。

プリローダー・スタイル

Elementorのウェブサイトにプリローダーを追加する方法の前に、使用できるさまざまなスタイルを調べてみましょう：

1. スピナーアニメーション:定番の選択。シンプルで効果的な回転スピナーは、ユーザーに何かが起こっていることを伝えます。
   • ユースケース:ミニマリストや技術志向のウェブサイトに適しています。このスタイルはストレートで邪魔にならないので、シンプルさが重要なウェブサイトに最適です。
   • カスタマイズのヒント:一貫性を保つため、スピナーにはブランドカラーを使用してください。
2. プログレスバー:ローディングのパーセンテージを正確に伝え、訪問者にどれくらい待つ必要があるのかを感覚的に伝えたい場合に最適です。
   • ユースケース:Eコマースや画像の多いブログなど、コンテンツの多いサイトに最適です。プログレスバーは、ユーザーに読み込みの進捗状況を明確に示し、フラストレーションを軽減します。
   • カスタマイズのヒント:プログレスバーの色をウェブサイトのメインカラーに合わせてカスタマイズし、「Loading... Please wait（読み込み中...しばらくお待ちください）」のようなラベルを追加して、より分かりやすくすることを検討してください。
3. ロゴアニメーション:ロゴをアニメーション化することで、クリエイティブなセンスを発揮しながら、ブランドを維持することができます。
   • ユースケース:代理店やファッションブランド、クリエイティブなポートフォリオなど、ブランドに特化したウェブサイトに最適です。このタイプのプリローダーはブランドのアイデンティティを強化します。
   • カスタマイズのヒント:のようなツールを使用します。 アフターエフェクツ または ロティファイル を使って、ロゴの軽量なSVGアニメーションを作成できます。アニメーションのループがスムーズで、数秒以上続かないようにしてください。
4. テキストのフェードイン/アウト:Loading... "のような文字が表示されたり消えたりするオプションは、シンプルでインパクトがあり、個人的なタッチを追加します。
   • ユースケース:個人ブログやコミュニティサイトに最適。温かく親しみやすい雰囲気を醸し出し、ユーザーにつながりを感じさせます。
   • カスタマイズのヒント:あなたのブランドの声に合わせてテキストをカスタマイズしてください。"Hold tight, amazing content is on the way!"のようなユニークなものを使って、個性を加えてください。

目標は、ブランドと調和し、ウェブサイトのスタイルにマッチし、コンテンツが読み込まれる間、ユーザーを引きつけるプリローダーを選ぶことです。

ステップバイステップElementorでのカスタムプリローダーの追加

それでは、Elementorウェブサイトにカスタムプリローダーアニメーションを追加する方法を詳しく説明します。コーディングの専門家でなくても心配する必要はありません。

ステップ1：プリローダー・プラグインのインストール

Elementorでプリローダーアニメーションを追加する最も簡単な方法は、プラグインを使用することです。最も人気のあるオプションには次のようなものがあります：

• ロフトローダー:Elementorとうまく統合できるカスタマイズ性の高いプラグインです。
• プリローダー・プラス:アニメーションを追加したり、設定を調整するための優れた柔軟性を提供します。
• ページローダ:デザインと表示を自由にコントロールできるプレミアムオプション。

このチュートリアルでは プリローダー・プラス プラグインはユーザーフレンドリーで、コードに触れることなく多くのカスタマイズが可能です。

ステップ2：Preloader Plusのインストール

1. WordPressのダッシュボードに移動します。.
   • WordPressの管理画面にログインします。
   • ダッシュボードからプラグインのインストールや設定のカスタマイズができます。
2. プラグイン > 新規追加.
   • をクリックしてください。 プラグイン をクリックします。 新規追加.
3. 検索バーで「Preloader Plus」を検索してください。
   • 検索バーに「Preloader Plus」と入力し、Enterキーを押してください。
4. クリック 今すぐインストール そして 起動.
   • プラグインを見つけたら 今すぐインストール.
   • インストールが完了したら 起動 をクリックしてプラグインを有効にしてください。

有効化すると、WordPressのダッシュボードにPreloader Plusの設定が表示されます。

ステップ3：プリローダーの設定

1. プリローダー・プラスの設定を開く ダッシュボードから
   • こちらへ 設定 > プリローダー・プラス をクリックして設定オプションにアクセスします。
2. に移動します。 一般設定 タブ
   • ここでは、プリローダーを有効または無効にしたり、基本的な動作を設定したりできます。
3. プリローダーの有効化 トグルをオンにします。
   • これにより、選択した設定に基づき、ウェブサイト全体でプリローダーが有効になります。

次に、いつ、どこでプリローダーをアクティブにするかを決めましょう。トップページだけに使うこともできますし、サイト全体に使うこともできます。

• 表示するページ:プリローダーを表示させたいページを選択します（例：ホームページ、すべてのページなど）。
  • チップ:より良いユーザーエクスペリエンスのために、読み込みに時間がかかる重いコンテンツを含むページでのみプリローダーを有効にすることを検討してください。
• 表示周波数:に表示するかどうかを選択します。 最初のページロードのみ または、訪問者が新しいページに移動するたびに表示されます。
  • チップ:最初のページロードにのみ使用することで、繰り返しのロードアニメーションを減らし、全体的なブラウジング体験を向上させることができます。

ステップ4：プリローダーアニメーションの選択

1. をご覧ください。 スタイル設定 タブ
   • このタブでは、プリローダーの外観を設定できます。
   • 例:訪問することができます https://example.com ロゴアニメーションのプリローダーが、クリエイティブなポートフォリオのブランディングをどのように強化するかをご覧ください。
2. プリローダー・タイプの選択:スピナー、プログレスバー、カスタムアニメーションのいずれかを選択します。
   • ブランドのスタイルに応じて、ニーズに最適なプリローダーをお選びください。
   • 例:のようなeコマースサイトの場合 https://shopdemo.comプログレスバーは、ユーザーに情報を提供するのに有効です。
3. について カスタムプリローダーブランドアニメーションが必要な場合は、ロゴのGIFまたはSVGをアップロードしてください。
   • をクリックしてください。 アップロード をクリックして、カスタムプリローダーアニメーションを追加します。

ブランドロゴのカスタムGIFは、訪問者に印象を残すのに最適な方法です。以下のようなツールを使うことができます。 カンヴァ または フィグマ で簡単なロゴアニメーションを作成できます。

• チップ:カスタム・アニメーションは、読み込みが遅くならないように軽量にしましょう。アニメーションのファイルサイズは 200KB 最適なパフォーマンスのために。

ステップ5：デザインとタイミングの調整

• 背景色:背景色はブランドのパレットに合わせて設定してください。ロゴと対照的な色を使って目立たせることができます。
  • 使用方法:のカラーピッカーをクリックします。 背景色 セクションで、あなたのウェブサイトのテーマを補完する色を選択してください。
• アニメーション上映時間:アニメーションの再生時間を設定します。通常は 3秒 は、イライラせずにユーザーの注意を引きつけるのに最も効果的です。
  • チップ:プリローダーが速すぎたり遅すぎたりしないスイートスポットを見つけるために、さまざまな時間をテストしてください。
• ページフェードイン/アウト:フェードイン/フェードアウトエフェクトを使用することで、プリローダーと実際のコンテンツの間をよりスムーズに遷移させることができます。
  • チップ:わずかなフェードイン効果で、切り替えがより洗練され、唐突でなくなります。

Elementorとプリローダーを統合してより大きなコントロールを実現

プリローダーを表示する場所とタイミングをより細かく制御したい場合は、Preloader PlusをElementorに統合することができます。 ElementorのカスタムCSS 特集です。

• Elementorで、 ページを編集 にプリローダーを追加します。
  • 編集したいページに移動し Elementorで編集.
• を開きます。 アドバンス タブで カスタムCSS.
  • をクリックしてください。 アドバンス タブをクリックし、下にスクロールして カスタムCSS フィールド。
• CSSコードを追加して、ページの特定のセクションにプリローダー・アニメーションを作成します。例えば

/* プリローダー用カスタムCSS */
.preloader-section {
  animation: fadeIn 2s ease-in-out；
}

キーフレーム fadeIn {
  0% { opacity: 0; }.
  100% { opacity: 1; }.
}

• チップ:この機能を使用すると、画像ギャラリーや動画の埋め込みなど、読み込みに時間がかかる重要なセクションにのみプリローダーを追加できます。これにより、ページの残りの部分を高速かつレスポンシブに保つことができます。

プリローダーのテストと最適化

プリローダーを設定したら、テストすることが重要です。ここではいくつかのヒントを紹介します：

• 異なるデバイスでのチェック:のようなツールを使用します。 ブラウザスタック をクリックして、プリローダーがモバイル、タブレット、デスクトップの各ビューでどのように見えるかを確認してください。すべてのデバイスで一貫したエクスペリエンスを提供できるようにしましょう。
  • 使用方法:BrowserStackを開き、テストしたいデバイスを選択し、ウェブサイトに移動します。
• モニターの読み込み速度:プリローダーは、ページの速度を著しく低下させることなく、体験を向上させるものでなければならないことを忘れないでください。以下のようなツールを使いましょう。 ジーティーメトリックス または Googleページスピードインサイト サイトの読み込み速度が最適化されていることを確認します。
  • チップ:プリローダーがロード時間に悪影響を及ぼしている場合は、アニメーションのファイルサイズを最適化するか、プリローダーの使用を特定のページに限定することを検討してください。
• 使いすぎに注意:プリローダー・アニメーションは効果的ですが、すべてのページで使いすぎると訪問者をイライラさせてしまいます。プリローダーは戦略的に使いましょう。
  • チップ:次のようなツールを使用して、特定のページでプリローダーを使用した場合と使用しない場合のユーザー動作をテストします。 ホットジャー プリローダーがユーザーエクスペリエンスを向上させているのか、それとも妨げているのかを確認するためです。

最終的な感想あなたのElementorウェブサイトを際立たせるために

優れたデザインのプリローダーは、単なるローディング画面ではありません。Elementorのウェブサイトを次のレベルに引き上げるには、プリローダーを追加するだけで終わらせないでください。サイトのパフォーマンスを継続的に最適化し、プリローダーからページアニメーションまで、各インタラクションがブランドストーリーにどのように付加されるかを検討しましょう。

これらのステップとヒントにより、訪問者を惹きつけるだけでなく、ブランドアイデンティティを強化するカスタムプリローダーを作成するために必要なものがすべて揃いました。