Web サイトやアプリでのローディング アニメーションの使用: 使用する例とスニペット

Web サイトでのローディング アニメーションの用途は何ですか?

すべての Web 開発者が留意しなければならない問題の 1 つは、ページの読み込み時間です。 確かに、最近のインターネットの高速化により、ほとんどのページやアプリはすぐに開きます。 ただし、常に改善の余地があります。

場合によっては、すべてのデータとページがロードされるまで、ユーザーを少しの間待たせることは避けられません。 そのような瞬間に、ユーザーの注意を引き、すべてのコンテンツが読み込まれるのに十分な時間、サイトに留まる何かが必要です。

これを行う 1 つの方法は、目を引く読み込みアニメーションまたは読み込み gif をサイトに追加して、サイトの残りの部分が読み込まれるのを待っている間、ユーザーを楽しませ続けることです。

たとえば、私たちのウェブサイトでも、非常にシンプルなローディング アニメーションを使用して、現在何かが起こっていることをユーザーに知らせています。

これらの興味深い読み込み gif アニメーションを見てみましょう。

• アニメーションのインスピレーションを読み込んでいます
• アニメーション化されたローダーを作成するための無料の CSS と JavaScript スニペット

アニメーションのインスピレーションを読み込んでいます

最高のローディング アニメーションとローディング gif のいくつかを見つけました。

オーブアニメーション制作中

これは、残りのコンテンツをロードするのに十分な時間、注意を引くロード画面の gif の好例です。 一瞬見ずにはいられない不思議な煙に囲まれた回転する円を描いています。 そして、本当に必要なのは一瞬です…

マイクロアニメーションの読み込み

このローディング アニメーションの背後にある Web サイトは醸造所であるため、このローダ gif は世界的に理にかなっています。 ページが読み込まれるのを待たなければならないユーザーのフラストレーションを軽減するだけでなく、実際に創造的な方法でユーザーの興味を刺激する、醸造所製品の製造プロセスを示しています。

Avanti e indietro ローダー

この単純な読み込みアニメーション gif は、グラフィックの位置を適切な順序で転送することにより、ユーザーの注意を引くのに最適です。 この読み込みアイコンの美しさは、そのシンプルさにあります。 それは直感的であり、ユーザーがイライラしてページを離れるのではなく、ユーザーを夢中にさせます.

ローディング画面のアニメーション – 砂時計

このローダーのアニメーション GIF が優れている理由は 2 つあります。 「ご迷惑をおかけしました」というメモは、ユーザーとのコミュニケーションを確立し、一定レベルの理解を得るのに役立ちます。 一方、砂時計のプリローダーは、ユーザーの注意を引き、待ち時間をより快適にします。

「弾む」 – B&W ローディング アニメーション 9

多くの場合、最良のものは最も単純なものであり、同じルールが CSS 読み込みアニメーションに適用されます。 これは退屈に思える人もいるかもしれませんが、実際にはそのシンプルさは完璧です. そして、それについての最もよいことは、あなたがそれを見るのをやめられないということです.

溶解ローダー

このローディング アニメーション gif は、ユーザーの注意を引き、待機時間をより快適にするという点で、2 つの非常に効果的な要素を組み合わせています。

溶けるような流体効果を使用し、すぐにユーザーの注意を引くと同時に、目に見える光るラインなどの癒しの要素を追加します。

物事のローダー

入れ子パターンは、アニメーション GIF の読み込みに関しては常に適切な選択です。 3D 効果をミックスに追加すると、作成する価値のある完璧な読み込みアニメーションが完成します!

プリローダーのアニメーション

ローディング アニメーションをデザインするときは、常にターゲット オーディエンスと、彼らが何を見たいかを考えてください。 この Web サイトは、クリスマスに関連するいくつかのものを組み合わせて、子供向けのオンライン コースに最適なプリローダー gif を作成することで、その点で素晴​​らしい仕事をしました。 正しい方法を知っていれば、ユーザーに感情的な反応を引き起こすことは常に良い考えです。

ローダーのアニメーション

この待機中のアニメーション gif をデザインした人は誰でも、さまざまなレベルでユーザーの注意を引くようにしたいと考えていました。 そのため、単純なローディング アニメーションを作成するのではなく、目を引くマルチスクリーン表示パターンを選択し、しばらくの間ユーザーの注意を引くようにしました。 回転効果とグラデーション カラーをミックスに追加すると、素敵な読み込み画面が作成されます。

アプリの読み込み画面ビジュアル

このローディング バー gif は、その目的を果たすだけでなく、本当にクールでファッショナブルです。 Android/iOS モバイル アプリ/ウェブ用に設計されており、回転する球体と色のコントラストを組み合わせて、興味深い SF の視覚効果を生み出しています。

アニメーションを読み込んでいます

ローディング画像 gif を作成する最悪の方法は、意味がなく、ストーリーをまったく伝えないものを作成することです。 ユーザーはそれを見たくありません。 彼らは感情的なつながりを生み出す何かを望んでいます。

ここに表示されているプリローダーの画像は、そのために理想的です。 急速に変化する数字と急速に回転するカラーバーを備えたこの読み込みアニメーションにより、ユーザーは、サイトが可能な限り高速に読み込まれていること、および問題がその場でバックグラウンドで処理されていることを知ることができます.

アニメーション化されたローダーを作成するための無料の CSS と JavaScript スニペット

過去に非常に興味深い静的読み込みページを見る機会がありましたが、ユーザーの注意を引きたい場合は、動的要素をミックスに追加することをお勧めします。

このローディング gif ジェネレーター コレクションを見てみましょう。これは、ローディング アニメーションを思い通りに作成するのに役立ちます。

カウンター付ローディングバー

CodePen の Nicolas Slatiner (@slatiner) による Pen Loader を参照してください。

この美しいローディング バーは Nicolas Slatiner によってデザインされたもので、ローディング パーセンテージを表示する直感的なローディング アニメーションです。 デザインはすっきりとしていて、その美しさはそのシンプルさにあります。 これは、どの Web サイトにも適合する優れたプログレス バー gif です。

ライトローダー

CodePen の Just a random person (@mathdotrandom) による Pen Pure Css Loader を参照してください。

スピナーの形をしたこの軽いローダーは、少しひねったシンプルなデザインが好きな人に最適なローディング アニメーションです。 純粋な CSS3 アニメーションと組み合わされたスターバースト形状を使用して、ユーザーの注意をすぐに奪う gif 読み込み効果を作成します。

マルチアニメーションローダー

Glen Cheney によって作成されたこのローディング サークルの gif は、美しく複雑な機能です。

表示/非表示機能を追加するには、この機能がなくても機能させることができますが、数行の JavaScript が必要です。 つまり、さまざまな色、サイズ、速度などの多くのオプションを使用して、純粋な CSS3 で実行できるということです。

キャンバス フラクタル ローダー

CodePen の Jack Rugile (@jackrugile) による Pen Canvas Simple Circle Loader を参照してください。

古い学校の Windows スクリーンセーバーを覚えていますか? この縞模様のフラクタル キャンバスの読み込みアイコン gif は、少し似ています。 JavaScript を多用しており、canvas 要素と呼んでいますが、実際にはページ上で canvas 要素を使用していません。

実際、それが呼ばれる理由は、自然なキャンバス ライブラリである Sketch.js を利用しているという事実にあります。 したがって、サイトで JavaScript を少しいじるのに問題がない場合は、この読み込みアニメーションが最適な選択肢の 1 つです。

ウロボロCSSローダー

CodePen の Geoffrey Crofte (@CreativeJuiz) によるペン CSS ローダーを参照してください。

Geoffrey Crofte によって作成された OuroboroCSS ローダーは、純粋な CSS を使用しており、アニメーション サイクルの繰り返しで動作し、形の中に消えているような錯覚を与えます。

ただし、このデザインは内部ローダーには最適ですが、ページ全体で単独で使用できるほど強力ではないため、ページ全体の読み込みアニメーションとして使用するのは最善の方法ではない可能性があります。

温度計ローダー

このカスタム サーモメーター スタイルのローダーを設計する際、作成者の Hugo Giraudel は CSS の限界を実際に押し広げ、このロード アニメーションを下から上にさまざまな色で移動させました。 アニメーションは純粋な CSS であり、相互にネストされた HTML 要素は 3 つだけです。

Three.js ローダー

CodePen の Lennart Hase (@motorlatitude) による Pen Three.js ローダーを参照してください。

Lennart Hase による Three.js ローダーは非常にクールなロード gif であるため、リストに追加する必要がありました。 無料の Three.js 3D ライブラリを使用して、見ずにはいられない小さな表面に回転する立方体を作成します。

アニメーションは、JavaScript と WebGL レンダリングによって制御されます。 3D デザインは Web デザインの最もクールな新しいトレンドの 1 つであるため、ローディング アニメーションに 3D 要素を追加することは常に良い考えです。

オーガニックサークル

CodePen の Jack Rugile (@jackrugile) による Pen Organic Circle Canvas Loader を参照してください。

この印象的なキャンバス サークル ローダーは、ctx および JavaScript 呼び出しを使用して HTML キャンバス要素上に完全に構​​築され、この驚くべき人目を引く効果をゼロから作成します。 これは、どの Web サイトにも簡単に組み込むことができるローダー サークルではありませんが、一見の価値があることは認めざるを得ません。

シンプルサークルローテーター

CodePen の MRU (@ruffiem) による Pen Canvas 無限ローダーを参照してください。

シンプルで見栄えがよく、しかも非常に効果的なキャンバス ローダーが必要な場合は、これが最適です。 アニメーションを制御するいくつかの基本的な JavaScript を使用して、canvas 要素の内側の円を無限に回転させます。 このようなシンプルでエレガントなデザインの最も優れた点の 1 つは、混乱したり圧倒されたりすることなく、どのサイトにも簡単に組み込むことができるという事実です。

純粋な CSS ローダー ドット

CodePen の Dave DeSandro (@desandro) によるペン ローダー ドットを参照してください。

純粋な CSS ローダーを探しているなら、このクールで楽しいローディング アニメーション CSS は検討する価値があります。 セットアップが簡単で、人目を引き、見ていて楽しいです。 もう1つの大きな利点は、どのWebサイトにも簡単に組み込むことができ、優れたローディングアニメーションの目的を果たすことができることです. ドットの形状とアニメーションは CSS を介して実行され、JavaScript は必要ありません。

スライディング スクエア LoaderView

このスライディング スクエア ローダーは、目を四角形に沿って動かし続けるので、待ち時間が少しイライラしなくなります。 電子機器やゲームをオンラインで販売する企業にとって、訪問者をウェブサイトに引き付け続けるための優れたソリューションです。

DotsLoaderView

どこからともなく現れたり消えたりする弾む黒いボールは、面白い要素として機能し、見栄えがよく、少し遊び心を加えたいWebサイトに使用できます.

かすみギアローダー

CodePen の Joni Trythall (@jonitrythall) による Pen Blurred Gear Loader を参照してください。

回転する 3 つの歯車を備えたぼやけた歯車ローダーは、動きと複雑さを体現しており、機械や機械部品を販売するビジネスに適している可能性があります。

CSS階段ローダー

CodePen の Irko Palenius (@ispal) による Pen CSS Stairs Loader を参照してください。

白いボールが上にジャンプする昇降階段ローダーは、ミニマルなデザインですが、非常に簡単です。 真面目で信頼できる存在であることをアピールしたい企業にとっては、理にかなっているかもしれません。

ペンのロード

CodePen の Dave McCarthy (@AsLittleDesign) によるペン ZbVVwa を参照してください。

シンプルなタッチで、キャタピラーのようなカラフルな円が左右に移動し、両側に 1 つずつ表示されるため、訪問者は荷物を積み込むのに飽きることがありません。 ローダーは、その普遍的なアニメーションにより、ほぼすべての種類のビジネスに適しており、訪問者がホームページに着陸するのを待っている間も楽しませてくれるはずです.

CSS ローダー

CodePen の Mathieu Richard (@MathieuRichard) による Pen Loader css3 を参照してください。

前進すると大きくなり、戻ると元の形状に戻る、この転がる立方体のような単純な「注目を集める」ローダーは、訪問者にスマートで洗練されたように見せたいビジネス向けの予約済みソリューションです.

鮮やかな CSS3 スピナー

CodePen の Kevin Jannis (@kevinjannis) による Pen Vivid CSS3 Spinner を参照してください。

幾何学的な花のような形に転がる回転する虹を備えた鮮やかなスピナーローダーは、訪問者を元気づけ、楽しくてエキサイティングな何かの準備をするのに役立ちます. このようなローダーは、製品やサービスを子供に販売する企業に使用できます。 子供の教育現場ではうまくいくはずです

プリズムロード画面

CodePen の Ken Chen (@kenchen) による Pen Prism Loading Screen を参照してください。

プリズムの読み込み画面は、LinkedIn の写真の背景の 1 つを思い出させるはずです。 ローダーは遠くから見ると、宇宙を移動している星座のように見え、中央に主要な要素があり、企業のロゴが表示される可能性があります. ローダーは、B2B セクターなど、国際的なクライアントと連携する企業に使用できます。

ローダ

CodePen の Alex Rutherford (@Ruddy) による Pen Loader を参照してください。

バラエティとか？ これは訪問者を楽しませ続けるローダーで、さまざまな画像のアニメーションの変化を伴うカウントダウンを表示できます。 このローダーでは画像を回転させることができるため、あらゆるビジネスのニーズに対応できます。

ローダーのリダイレクト

CodePen の Mr Alien (@mr_alien) による Pen Redirecting Loader を参照してください。

これは、ジェットパックを背負って全速力で飛んでいる男性のシルエットです。 ユーザーを次のページにリダイレクトするこのようなローダーは、ほとんどすべてのビジネス、特にサービスのスピード要素を強調したいビジネスで使用できます。

Codepen ローディングドット

ミニマルで簡潔なデザインのこのドット プリローダーは、芸術家やデザイナーがオンライン ポートフォリオなどに使用できます。

プリローダーのアニメーション

CodePen の Jason Miller (@imjasonmiller) による Pen Preloader SVG アニメーションを参照してください。

このプリローダーはスネーク ゲームの 1 つを思い出させるべきではありませんか? このプラグ付きのエネルギー アイコン アニメーションは、企業とクライアントのコラボレーションを支援するインターネット プロバイダーやその他の機関にとって意味があります。

SVG∞ローダー

CodePen の Ana Tudor (@thebabydino) による Pen SVG ∞ ローダー (JS なし、クロスブラウザー、最小限のコード) を参照してください。

JS なし、クロスブラウザー、最小限のコード。 20 行の CSS と 4 行の生成された SVG。

CSS 変数を使用したトマトローダー

CodePen の Ana Tudor (@thebabydino) による CSS vars (Edge サポートなし) を使用した Pen tomato loader を参照してください。

アニメーション遅延値として calc() がサポートされていないため、Edge では機能しません。

アニメーション化されたフリッププリローダー

CodePen の Animated Creativity (@animatedcreativity) による Pen Animated FlipPreloader – SCSS を参照してください。

CSS で作成された素晴らしいフリップ プリローダー。 色はフリップで完全に論理的です。 任意の色を簡単に設定できます。

スピンキット

CSS でアニメーション化されたシンプルな読み込みスピナー。 デモを参照してください。 SpinKit は、ハードウェア アクセラレーション (変換および不透明度) の CSS アニメーションを使用して、スムーズで簡単にカスタマイズ可能なアニメーションを作成します。

CSSスピナー

Web サイトの読み込みアニメーション用の 12 個の小さくてエレガントな純粋な CSS スピナーのコレクション。

アニメーションのロードに関するよくある質問

1. ローディング アニメーションとは何ですか? また、その目的は何ですか?

ユーザーがマテリアルのロードを待っているとき、ロード アニメーションが舞台裏で何が起こっているかを示します。 その機能は、システムが要求を処理していることをユーザーに視覚的に確認し、システムの動作がすぐにはわからない場合でもシステムの動作を理解するのに役立ちます。 マテリアルが最終的に読み込まれるというアイデアを作成することで、アニメーションの読み込みはユーザーの煩わしさを軽減するのにも役立ちます。

2. アニメーションの読み込みは、Web サイトやアプリでのユーザー エクスペリエンスの向上にどのように役立ちますか?

コンテンツの読み込みを待っている間にユーザーが経験する不快感のレベルを軽減することで、アニメーションの読み込みはユーザー エクスペリエンスの向上に貢献できます。 また、システムが動作してリクエストを処理していることをユーザーに視覚的に示すこともできます。 アニメーションの読み込みは、バックグラウンドで何が起こっているかを知らせ続けることで、待っている情報へのユーザーの関心を維持するのに役立ちます。

3. ローディング アニメーションのさまざまな種類の例をいくつか教えてください。

プログレス バー、スピナー、パルス アニメーション、およびスケルトン スクリーンは、さまざまな種類の読み込みアニメーションの例です。 Web アプリケーションでは、リクエストがシステムによって処理されていることを示すために、プログレス バーとスピナーを頻繁に使用します。 モバイル アプリでは、バックグラウンドで何かが行われていることをユーザーに知らせるために、パルス アニメーションをよく使用します。 スケルトン画面は、ロード時に表示されるコンテンツのプレビューをユーザーに提供するために採用されています。

4. 視覚的に魅力的で機能的なローディング アニメーションをデザインするにはどうすればよいですか?

ローディング アニメーションを作成するときは、アニメーションの目的とユーザーの期待の両方を考慮する必要があります。 ローディング アニメーションの視覚的な魅力によって、ローディング中のコンテンツが損なわれてはなりません。 また、手順がどのように進んでいるかについてユーザーに明確なフィードバックを提供することも有用である必要があります。 アニメーションの読み込みが遅いと、ユーザーがいらいらしたりイライラしたりする可能性があるため、アニメーションのパフォーマンスも調整する必要があります。

5. コンテンツがロードされる前にロード アニメーションを表示する時間はどれくらいですか?

複雑なコンテンツが読み込まれ、ユーザーのインターネット接続の速度によって、読み込みアニメーションが表示される時間が決まります。 経験則として、アニメーションを画面に表示する時間は 5 秒以内にすることをお勧めします。 ただし、これと、ポジティブなユーザー エクスペリエンスを提供するのに十分なほどマテリアルが完全にロードされていることを確認することとのバランスを取ることが重要です。

6. ローディング アニメーションに障害のあるユーザーがアクセスできるようにするにはどうすればよいですか?

画像の代替言語を提供したり、アニメーションがてんかんのあるユーザーに発作を起こさないようにしたりするなどのアクセシビリティ規則に従うことは、障害のある人が読み込み中のアニメーションにアクセスできるようにするのに役立ちます。 また、ユーザーがいつでもアニメーションを一時停止または停止できるようにすることも重要です。

7. Web サイトまたはアプリでローディング アニメーションを使用するためのベスト プラクティスは何ですか?

ウェブサイトやアプリでローディング アニメーションを使用する場合は、アニメーションを単純明快に保ち、控えめに使用し、プロセスの進行状況についてユーザーにフィードバックを提供することが重要です。 また、アニメーションがユーザーがアクセス可能であり、パフォーマンスが最適化されていることを確認することも重要です。

8. ウェブサイトやアプリのブランディングに合わせてローディング アニメーションをカスタマイズできますか?

もちろん、ローディング アニメーションは Web サイトやアプリのアイデンティティに合わせて変更できます。 これにより、ブランドのアイデンティティがサポートされ、ユーザーが一貫した視覚体験を得るのに役立ちます。 ただし、ブランディングと使いやすさのバランスを取ることが重要であり、アニメーションがプロセスのステータスに関する明確なフィードバックを提供し、読み込まれている素材から注意をそらさないようにする必要があります。

9. ユーザー エクスペリエンスの向上という観点から、ローディング アニメーションの効果を測定するにはどうすればよいですか?

ローディング アニメーションがユーザー エクスペリエンスをどの程度向上させるかを判断するには、アンケートやユーザー テストなどを通じてユーザーからの意見を得ることが重要です。 ユーザーのフィードバックを使用して、アニメーションがプロセスのステータスをどの程度うまく伝えているか、長い読み込み時間中にユーザーの煩わしさを軽減しているかどうかを評価できます。 ローディング アニメーションがユーザー エンゲージメントにどのように影響するかを判断するには、直帰率やセッションの長さなどのデータを監視することも重要です。

10. ローディング アニメーションをデザインする際に避けるべき一般的な間違いは何ですか?

ローディング アニメーションを作成する際に避けるべき一般的な落とし穴には、気が散るアニメーションを使用する、プロセスの進行状況に関するフィードバックを提供しない、過度に長いアニメーションを使用するなどがあります。 また、アニメーションのパフォーマンスが最適化され、すべてのユーザーがアクセスできることを確認することも重要です。 アニメーションがすべてのユーザーに対して機能することを保証するには、さまざまなデバイスとインターネット接続でテストすることも重要です.

Web サイトでのローディング アニメーションの使用に関する考えのまとめ

ウェブサイトをデザインするときは、あらゆる細部を考慮する必要があります。 素晴らしいウェブサイトを持っていても、読み込み時間が長すぎて、サイトを見る前に半分のユーザーが諦めてしまったら意味がありません。

これを回避するには、興味深いアニメーションを Web サイトに組み込み、残りのコンテンツが読み込まれるまで、必要なだけユーザーの注意を引く必要があります。 創造力を働かせて、すべてのユーザーが喜んで見られる面白い待機 GIF をデザインしてください。

Amelia のチームによって作成されたこの記事を楽しんでいただければ幸いです。これは、おそらく WordPress の最高の予定スケジューリング プラグインです。

ウェブサイトのレイアウトでこれをチェックしてください。

また、最新の Web デザイン、レイアウト デザイン、悪い Web サイト、ボタンのデザイン、ビジュアル デザイン、史上最高の 404 ページ、Web デザインのトレンド、暗い背景など、いくつかの関連テーマについても書きました。