サイトにアニメーションを戦略的に追加する方法

Webデザインでのアニメーションの使用は、まったく新しいことではありません。

3D gifを回転させる昔の時代を覚えていますか？

フラッシュの生と死はどうですか？

AppleがすべてのモバイルベースのデバイスでのFlashの使用を禁止した後、デザイナーはアニメーションをゲームに戻す方法をすぐに見つけました。 Web開発者とデザイナーの創造性のおかげで、CSS3トランジション、SVGアニメーション、高品質GIF、そしてもちろん、AfterEffectsやBlenderなどのプログラムで作成されたアニメーションビデオの魔法を手に入れることができます。

最近、フラットサイトを設計する傾向があった数年がありました。 ありがたいことに、アニメーションは大きく後退し、2018年以降の最大のトレンドの1つになりました。

アニメーションは今や期待になっています。

アニメーションがUXとUIデザインに与えるプラスの影響は驚くべきことではありません。人間は視覚的な生き物であり、常に動きと動きに惹かれるからです。 アニメーションは、あらゆるプロセスに命を吹き込み、それを体験に変えることができます。 動きは、何かが起こっていることをユーザーに知らせます。

たとえば、フォームセル内のアニメーションは、ユーザーが間違いを犯したことや情報が不足していることをユーザーに通知できます。 または、パスワードを入力して間違っていると、アスタリスクが赤くなり、少し踊って消えてしまうことがあります。

キネティックUIからのアニメーション

または、この楽しいログインアニメーションはどうですか？ ウェブデザインにおけるアニメーションの可能性は日々高まっています。 戦略的なアニメーションもサイトに追加してみませんか？

DribbbleのDarinによるアニメーション

あなたのサイトをアニメーション化する

サイトにアニメーションを追加する方法のオプションはかなり豊富ですが、それはジャンプするアイコンや回転するボタンでいっぱいにする必要があるという意味ではありません。 デザインに含めるアニメーションの量とのバランスをとる必要があります。 どこを見ればよいかわからないほど動くページではなく、「ソフトモーション」に沿って考えてみてください。 アニメーションの使いすぎは、過度のミニマリズムと同じくらい苦痛です！

Adobe XDのようなプログラムを使用すると、さまざまなアニメーションを試してサイトに戦略的に配置するプロセスに役立ちます。 WordPressに直接組み込むのが好きな場合は、Divi Builderが最適です。これには、すべてのモジュール内に多くのアニメーションの可能性があります。

記事の最後に、サイトにアニメーションを追加するのに役立ついくつかの優れたリソースへのリンクをいくつか含めました。

サイトのUXと全体的な視覚的構成を改善できるさまざまな種類のアニメーションを見てみましょう。

機能的または美的

アニメーションには、Webデザインで2つの用途があります。 機能性と美学。

機能的なアニメーション

アニメーションは、訪問者がサイトでユーザージャーニーをするのに役立ちます。 彼らは、あなたが彼らに見逃してほしくない行動への呼びかけや重要なセクションに注意を向けさせます。 それらはプロセスをより簡単にし、視覚的に心地よいものにします。

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

最も一般的な機能アニメーションであり、Webサイトのデザインで最初に一般的になったものの1つは、読み込みアニメーションです。 これらは主にサイトが最初に開かれたときに見つかりましたが、現在はサイトがすぐに読み込まれるようになり、動画の読み込み、ダウンロードの進行、その他のサイトのプロセスなどに使用されています。

読み込みアニメーションを効果的にするには、ブランドと一致させる必要があります。 サイトが楽しくてカラフルな場合、読み込みアニメーションはバウンドするボールからカラフルなループまで何でもかまいません。 一方、サイトが真面目でフォーマルな場合は、読み込みアニメーションはそのスタイルに従う必要があります。

SharonYarとDilysLimによるBehanceのアニメーション

TomColeArchitectureのサイトのUXPinからのアニメーション

ホバー

考慮すべき他の一般的な機能アニメーションはホバーです。 私たちはすでにホバーアニメーションを見るのにかなり慣れており、ほとんどの人はそれらを期待するでしょう。 ボタンにカーソルを合わせたときにボタンの色を変更することは、メニューまたは召喚状のいずれかで使用することを確実に検討する必要がある基本的なアニメーションです。

ホバーを使用する他の方法は、ボタンのように見えないボタンの場合、またはクリックする前にホバーに関する情報を表示したい場合です。

デザインシャックのアニメーション

スクロール

スクロール効果のあるWebサイトは、もはや独特の現象ではありません。 視差スクロールは非常に人気があります（そして、実を言うと、少し疲れます）。 したがって、アニメーションスクロールを使用する場合は、ボックスの外側を考えてください。 セクション間を移動する要素、スクロールとともに徐々に表示される要素を含めます。 機能性と美学を考えてください。

Youandigraphicsによるアニメーション

美的アニメーション

美的または装飾的なアニメーションは、サイトをより視覚的に魅力的にするものですが、必ずしも機能に役立つとは限りません。 最初のウォルトディズニーの漫画の時代からの古い比喩があります、そのアニメーションは「人生の幻想」です。 静止画像に対してアニメーションが行うことは、静止画像を生き生きとさせ、呼吸させることです。

適切な量​​の美的アニメーションがあれば、あなたのサイトは忘れられないものになるでしょう。

機能的なアニメーションと同じように、装飾的なアニメーションにもバランスが必要です。 そのアニメーションの背景が本当に必要かどうか、またはそれがあなたのブランドと適切に一致するかどうかを自問してください。 すべての写真を画面にアニメーション化する必要がありますか、それともその数のポップアップが必要ですか？ 追加するアニメーションが、サイトを見やすくするのに十分であるが、圧倒されないようにする必要があります。

アニメーションの背景

現在最もトレンディなアニメーションの背景は、単純な動くドットから複雑な光の効果の動きまで、粒子の背景です。 これらは、ページ全体またはセクションのみの背景として追加できます。 彼らはあなたのサイトの領域をより個性的にすることができます。 トレンドは変化することを忘れないでください。パーティクルの背景を使用する場合は、それがサイトに本当に適していることを確認してください。

ファム・ファタールによるアニメーション

無制限の創造性

大事なことを言い忘れましたが、アニメーションがあなたのサイトにできることは、無制限の創造性を提供することです。 ほぼ何でもアニメートできるので、クリエイティブな可能性は無限大です。 アニメーションの背景から画面上を移動するもの、さらにはキャラクターの点滅などの微妙なアニメーションまで。

サイトはアニメーションに大きく依存している可能性があるため、ページをたどる旅は本当の体験です。 たとえば、ポルシェの新しいサイトを見てみましょう。このサイトには、長年にわたる自動車メーカーの歴史が示されています。

または、等角投影図とアニメーションスクロールを組み合わせると、RollParkのようなすばらしいサイトが得られます。

Rollparkのアニメーション

常にモバイル向けに最適化してください！

常にモバイルでアニメーションをチェックする必要があることを思い出させないのは不公平です。 それらが正常に機能することを確認し、そうでない場合は調整を行います。 SVGアニメーションを使用する場合、.svgグラフィックスは無限にスケーラブルであるため、それほど問題はありません。

いずれにせよ、常にモバイルをチェックし、すべてのフォーマットに合わせてアニメーションを最適化することで、サイトがさらに良くなります。

サイトのアニメーション化に役立つツール

これは、サイトで使用できるさまざまなタイプのアニメーションの実用的な記事へのリンクのリストです。

• 無料のアニメーションライブラリのコレクション
• DIVIBuilderのアニメーション機能
• パーティクルバックグラウンドクリエーター
• CSSを使用して単純な粒子の背景を作成する2つの方法
• SVGアニメーションの使用

結論は

機能性と美学の観点から、アニメーションのバランスを保ちます。 彼らはあなたのサイトを生き生きとさせるためのツールであり、それを圧倒するものではありません。 創造性を発揮し、枠にとらわれずに考えることを忘れないでください。

次のWebサイトを構築するとき（または既存のWebサイトを更新するとき）、デザインにアニメーションを追加しますか？ 注意：ライブサイトに新しいコードを永続的に追加する前に、ステージングサイトまたはローカルサイトで実験することをお勧めします。

次にどのような種類のウェブサイトアニメーションを試しますか？

これらのチュートリアルで独自のアニメーションを作成してください！

• CSSを使用してSVGアニメーションを作成する方法
• CSS3トランジションとトランスフォームを使用してアニメーションを作成する方法