最近のトレンドのアニメーション効果４選【アニメーションをうまく活用しよう】

2,899 views

読了時間 : 約3分43秒

インタラクションデザインがあらゆる場面で使用され、アニメーションは訪問者を楽しませるツールとしてだけでなく、ユーザ体験を向上させる手段としても認識されています。

この記事では、近頃ウェブサイトで頻繁に使用される４つの動的効果を紹介したいと思います。

1.エラスティック・アニメーション

エラスティック・アニメーションは現在人気が高まっています。短く、エレガントで、簡単に人の興味をそそります。デザイン、プログラミング、物理学、微積分の巧みな組み合わせが鍵となります。

最も一般的なオプションは次のとおりです。

・素早く伸びてすぐに要求された形状に圧縮し、カルーセルのコンポーネントやスライドのオープニングを強化するアニメーション。原則として、1つの短いアクションです。
・浮かんだり、広がったりして、焦点または付属の詳細として機能する初期状態に戻る滑らかな液体のようなアニメーション。原則として、全体的な雰囲気を活気づけていきます。

LatinoMediosとOpretteはどちらもエラスティック・アニメーションを使用して基本的なスライドアウトメニューに一味加えています。

Taika Stromはより高度な技術を使用しています。ここでは、背景上のWebGLで動く流動体は、ホームページを閲覧する中でユーザについて回るため、サイトが印象深くなります。

2.変形可能なロゴタイプ

このロゴタイプは、ブランドアイデンティティの一環として、有益な構成要素と美しさを兼ね備えています。ユーザの意識に瞬時に止まり、見過ごされることはありません。

これを活用するにはいくつかの方法があります。

遊び心を持つ

HTMLBurgerの変形可能なロゴタイプを見てみましょう。面白い見た目ですが、しっかりと以下の２つの目的を遂行しています。

・マスコットとして、ブランドアイデンティティをサポートするネームプレートを示している。
・動的効果で、プロジェクトに遊び心を添え、楽しげな雰囲気を醸し出している。

シリアスに

上記の例とは異なり、Muriel Guillaumonはこのトリックを活用して、よりシリアスな雰囲気を作ります。色とサイズのわずかな変化のみでシンプルですが、全体のテーマにうまく一致し、見た目に変化を加えています。

ミニマリズム

Funktionalのミニマリスティックなアプローチを見てみましょう。最初の画面に表示されるロゴタイプは、ウェブサイトを閲覧し始めると、文字中のブランドアイコンだけを残すように設計されています。

3.意味のあるローディングアニメーション

優れたローディングアニメーションは洗練されたインテリジェンスを備えています。

ローディングアニメーションは現在、平凡なスロボから進化して、重要なタスクを実行できる洗練された小さなアニメーションに変わっています。アニメーションは準備プロセスについて通知するだけでなく、ユーザ体験を向上させ、全体的な見た目をより良くします。ローディングアニメーションは以下のような目的で使用できます。