完全なWebアニメーションデザインガイド

信じられないかもしれませんが、サイトの訪問者を説得する時間はあまりありません。 あなたのウィンドウは実際にはあなたが想定するよりもずっと短いです。

本質的には、 0.05秒 訪問者が意見を形成するためにページが読み込まれた後。 具体的には、50ミリ秒に変換されます。 意外と短いですよね?

はい、そのうちのいくつかは去ります。 しかし、他の人はとどまることを選ぶかもしれません。

次に印象段階が来ます。基本的には わずか10秒間続く。 サイトが安定したサイトを管理できない場合、変換プロセスを開始する前にトラフィックの大部分が失われます。 戻るボタンまたは閉じるボタンを押すだけです。

そして、あなたがそれらを回復する希望を持っていたなら、ここに難しい真実があります。 それらの88% 悪い経験の後、ウェブサイトに戻る可能性は低いです。

しかし、ちょっと待ってください。 サイトにアクセスしたWebトラフィックを維持するのは誰の仕事ですか?

もちろん、サイトのコンテンツマネージャのせいにするのは当然のことです。 そして、あなたは正しいかもしれません。 しかし、一部だけです。

すべてがWebデザイナーから始まることがわかりました。 実際のところ、幅広い消費者のフィードバックを広範囲に調査した研究では、 ネガティブなものの94% デザイン関連でした。

これはどういう意味ですか?

手始めに、これを逃れることはありません。 主な責任はあなたにあります。 これまでの記事で取り上げたすべての設計のベストプラクティスを実装することに加えて、PRの帽子をかぶって、トラフィックと効果的に接続する要素を検討する必要があります。

私はウェブアニメーションのようなものについて話している。

そして、なぜそれを具体的に提案しているのですか?

まあ、それはすぐに明らかにするつもりです。 このガイドでは、Webアニメーションのすべての重要な側面について説明します。 しかし、最初に基本を調べましょう…

Webアニメーションの基本

画面を散歩するお気に入りの漫画のキャラクターを想像してください。 または、デバイスを再起動すると、携帯電話のロゴが画面上で踊ります。 彼らの共通点は何がありますか?

どちらもアニメーションの基本的な例です。

アニメーションは基本的に、静止要素が「生きている」ときに発生します。 その後、何らかの動きを示し始めます。

この練習がいつ始まったのか正確にはわかりません。 しかし、私たちは 最初のアニメーション映画 歴史の中でXNUMX世紀以上前に作られました。 それ以降、この傾向は、技術の進歩的な進歩のおかげで、かなり広範囲に発展しました。

ただし、アニメーションの原則という一定のものがXNUMXつあります。 実際、ディズニーのOllieジョンストンとフランクトーマスは、後に彼らの本でそれらについて書いています。人生の幻想:ディズニーアニメーション"。 ここに完全なリストがあります:

  • アピール
  • 立体描画
  • 過言
  • タイミング
  • 二次アクション
  • アーク
  • スローインとスローアウト
  • フォロースルーおよび重複アクション
  • まっすぐ進むアクションとポーズをとる
  • 上演
  • 見越し
  • スカッシュとストレッチ

XNUMXは現在も、動画、WebGL、SVG、CSS、およびGIFとしてWeb上で公開されているものを含む、アニメーションのデザインのためのフレームワークを提供しています。

これで、ウェブアニメーションは、手紙の上にカーソルを置くと表示されるハイライトと同じくらいシンプルになり、複雑な多層の一連のフルスクリーンビデオになります。 言い換えれば、あなたは微妙なアプローチを取るか、注目を集めるために叫ぶ支配的なアニメーションですべてを選ぶことができます。 それはすべて状況に依存します。

そして、それは疑問を投げかけます-あなたはいつでもアニメーションを使うことになっていますか?

いつWebアニメーションを使用する必要がありますか?

もちろんかわいいです。 そして、それらは確かにあなたのサイトのレイアウトに興味深い追加になるでしょう。

しかし、あなたは何を知っていますか? それらのその後の有効性レベルは、まったく別のものです。 言うまでもなく、アニメーションはすべてのWebサイトプロジェクトに適しているわけではありません。 そして最も重要なことに、それらを無計画に採用することは悪い考えです。

たまたまそうなる オンライン消費者の46% 全体的な視覚的魅力と美学に基づいてサイトの信頼性を判断します。 不十分に設計されたアニメーションフレームワークでそれを構成する余裕はありません。 同時に、アニメーションをうまく利用できず、絶え間ない黄金の転換の機会を逃してしまうのは残念なことです。

それで、いつそれらを活用すべきですか?

さて、ここにあります。 Webアニメーションは、主にナビゲーションプロセスで注意を引いたりユーザーを支援したりすることで使いやすさを向上させる必要がある場合に主に理想的です。

方法は?

一般的に、 2.6秒 訪問者の目が主に第一印象に影響を与えるウェブサイトのセクションに到達するため。 ただし、アニメーションを上手に使用すると、サイトの最も重要な領域にすぐに注意を向けることで、スピードを上げることができます。

アニメーションは、ユーザーをコンバージョンファンネルに誘導する場合にも役立ちます。 たとえば、アニメーション化されたフォームポップアップは、メーリングリストを作成するための思慮深い戦略になります。 次に、購入プロセスに関しては、動画を埋め込むことを検討します。 彼らは納得させることが証明されています バイヤーの73% 続行して製品またはサービスを購入します。

最後に、純粋に美的目的でWebアニメーションを使用できます。 滑らかでシームレスな装飾的なアニメーションは、全体的な視覚的な魅力を大幅に向上させ、その結果、ユーザーとインターフェイスの間に感情的なつながりを確立できます。 これが、ユーザーエンゲージメントのレベルを段階的に向上させる方法です。

Webアニメーションツール

Webアニメーションの作成を開始する準備はできましたか? パーフェクト! しかし、どこから始めればよいでしょうか。

さて、あなたのアイデアを実際のアニメーションに変換するための堅牢なツールを探してみませんか? ありがたいことに、Webにはさまざまなきちんとしたオプションがあり、さまざまなユーザーやさまざまな種類のアニメーション向けに最適化されています。 プロジェクトに何を選択するかは、スキル、主な目的、予算、および作業しているサイトの種類によって異なります。

とは言え、ここにいくつかの顕著な例があり、それぞれに独自の使用例があります。

  • js
  • Three.jsによる3Dラインアニメーション
  • js
  • フラバー
  • カラーアニメーション
  • jqClouds
  • Scrollissimo
  • セルアニメ
  • js
  • js
  • CSS3アニメーション
  • 変換時
  • js
  • レラックス
  • AOS
  • js
  • ScrollTrigger
  • Scrollanim
  • js
  • js
  • js
  • js
  • Foxholder
  • アニマテロ
  • CSS
  • アニミスタ
  • js
  • CAAT
  • AnimateMate
  • js
  • スタイリー
  • GFX
  • js
  • js
  • js
  • jQuery DrawSVG
  • ラムジェット
  • ウォープップ
  • 混ぜあわせる
  • CSS
  • CSS
  • js
  • シーザー
  • CSSynth
  • サフラン
  • CSシェイク
  • CSS
  • js
  • ロケット
  • トランジット
  • CSS
  • js
  • ポップモーション
  • GreenSockによるGSAP
  • js
  • js
  • CSSアニメーション
  • 火曜日です
  • ずるそうな
  • js
  • js
  • js
  • js
  • js
  • 待つ! アニメート
  • モーションUI
  • js
  • レイジーライン画家
  • js
  • js
  • js
  • AnijS
  • js
  • マジックアニメーション
  • CSS

Webアニメーションの設計

ホバー効果

ホバーアニメーションは、間違いなくウェブ上で最もシンプルなもののXNUMXつです。 ポインタがそれらの上に移動すると、それらは生き生きとして選択された要素を強調表示します。 アニメーション自体は、サイズの変化や色の変化など、さまざまな形で発生します。

ここでの秘訣は、効果を慎重に採用することです。 それ以外の場合は、あまりにも多くの要素を強調表示して、後でユーザーを混乱させるおそれがあります。

また、サイト全体で何らかの方法を一貫して維持することをお勧めします。 たとえば、ホームページのボタンが緑から赤に変わった場合、同じフレームワークを使用して、他のWebページの追加のハイライトを表示します。

背景アニメーション

バックグラウンドアニメーションを埋め込むことは、必ずしも主な強調事項を妨げることなく、Webページに興奮と活力を加える効果的な戦略です。 ビデオからシーケンシャルにシフトする微妙なイメージまで何でも使用できます。

ここでの最良のアプローチは、物事を構造化し、シンプルに保つことです。 ビデオの統合を選択した場合は、それに応じて短くし、サイトに関連するループを維持します。 次に、ユーザーを圧倒せずに注意を引くのに十分な微妙な動きであることを確認します。

GIFスタイルのアニメーション

設定が非常に簡単なアニメーションに特に興味がある場合は、GIFを検討する価値があります。 典型的なものは、コンテンツのレイアウト内に埋め込まれたテキストのシフトや笑顔のピエロのようなものかもしれません。

必要なのは、しっかりしたアイデアを思い付き、関連するビデオまたは画像を取得して、適切な編集ソフトウェアを使用して完璧なGIFに変換することだけです。 結果の作品をGIF形式でアップロードすると、小さな画像と同じ速さで読み込まれるビデオのようなアニメーションが生成されます。

移行アニメーション

ユーザーがサイトのあるセクションから別のセクションに移動するときに、遷移アニメーションを使用して活気をもたらします。 これらは、スライド間を移動するときに表示されるスライドショーアニメーションに似ています。

画像のクレジット: シャッターストック

完璧な結果を得るには、サイト全体でアニメーションがスムーズで一貫していることを確認してください。 また、実際の移行プロセスを遅らせないように十分に短くする必要があります。

アニメーションの読み込み

事実は オンライン消費者の47% Webページが少なくとも2秒でロードされることを期待してください。 これを達成できない場合、7秒追加するごとにコンバージョンがXNUMX%減少します。

で行く 現在の平均読み込み時間22秒、2秒の期待に応えることがかなり難しいことは明らかです。 ただし、他のサイト要素の読み込みが続く間、アニメーションでビジー状態を維持することにより、トラフィックのかなりの部分を救うことができます。

トラフィックがサイトにリダイレクトされるとすぐにロードできるほど軽量なシンプルなものを作成することに重点を置きます。 それらは訪問者をブランドと全体的なウェブサイトのテーマに体系的に紹介するように設計されるべきです。

スクロールトリガーアニメーション

アイトラッキング調査は、ウェブサイトのユーザーが約費やすことを確立しました スクロールせずに見える時間の57%。 しかし、あなたが好ましい設計構造とメカニズムを提供する限り、それらの多くは下にスクロールしても構わないと思います。

そして、まさにスクロールトリガーアニメーションの出番です。ユーザーがスクロールを始めるとすぐに動き始め、スムーズで終わりのないページのような錯覚を作り出します。 これは、他の方法ではスクロールを妨げる遷移を排除するための慎重な方法です。

ナビゲーションとメニューのアニメーション

正直に言いましょう。 メニューオプションは、特に複数レベルの選択がある全体的に動的なサイトでは、かなり大きな画面スペースを必要とします。 幸い、アニメーションを利用してオプションを非表示にしてから、ユーザーが対応するボタンをクリックまたはホバーしたときにのみオプションを表示できます。

このタイプのアニメーションは、構造全体を視覚的に接続されたメニューオプションに圧縮することにより、ナビゲーションプロセスを合理化および簡素化します。 フレームワークは、ユーザーがオーバーレイメニューオプションをクリックするかポイントするたびに体系的にポップアップするサブメニューセグメントで設計する必要があります。

ギャラリーとスライドショー

おそらく、当然のことながら、 人間の平均注意持続時間 マイクロソフトが実施した最近の調査によると、8秒です。 金魚でさえ、典型的な個人よりも長く注意を払うことができます。 したがって、サイトの訪問者のほとんどが、すべてのギャラリーアイテムをクリックするだけの持続性がないことに賭けることができます。

しかし、何だと思いますか? ギャラリーとスライドショーのアニメーションを巧みに活用して、必ずしもユーザーに強制的にナビゲートさせることなく、多数の画像を自動的に表示できます。

ここで最も重要なことは、画像の表示時間です。 トランジションの速い短いディスプレイは急いでいるように感じられますが、トランジションの遅い長いディスプレイは退屈で遅くなります。 そのことを念頭に置いて、次の画像にすばやく移行する前に、約5〜8秒間各画像を表示するように全体的なレイアウトを設計します。

結論

全体として、アニメーションがその後どの程度ユーザーエクスペリエンスを向上させるかに基づいて、アニメーションを分析する必要があります。 優れたユーザーは、ユーザーからの感情的なつながりを引き起こすか、ナビゲーションプロセスを容易にする必要があります。 一方、完璧なものは、快適に両方を同時に達成できるはずです。

それを実現するには、アニメーションを設計してサイトに埋め込むときに、関連するすべてのパラメーターを批判的に評価する時間をとります。 覚えておいてください。シンプルで、軽量で、ブランドに合わせてください。

ヘッダー画像提供 アルフリーダビラ| Vaneltia

ボグダン・ランセア

ボグダンはインスパイアードマグの創設メンバーであり、この期間でほぼ6年の経験を積んでいます。 余暇には、クラシック音楽を学び、視覚芸術を探索するのが好きです。 彼はフィクシーにもかなり夢中です。 彼はすでに5を所有しています。