海外サイト Medium で公開された Website Animation Types & Trends That Will Dominate Your Screen in 2020–2021 を著者 Dana Kachan より許可をもらい、意訳転載しています。
動き（英: Motion）は、感情を動かすことがよくあり、サイトデザインにとっては、ユーザーを魅了するのに必要なスパイスと言えます。静的なUIデザインに動的なダイナミックさを加え、魅力的に演出することができます。
この記事では、現在人気となっているWebアニメーションとモーショングラフィックスの最新トレンドをまとめて紹介しています。
1. 背景アニメーション
アニメーションでブランドストーリーを作成したり、楽しい製造工程を見せたり、カリスマ的なアニメーションヒーローをつかってチームを紹介したりすることができます。
ウェブサイトの背景にアニメーションを使用するアイデアはたくさんあります。金融機関や銀行、ヘルスケア企業から、eコマースの小売業者、レストラン、B2Bサービス・プロバイダまで、さまざまなニッチや業界で背景アニメーションを使用したウェブサイトを見つけることができます。
Airline responsive web by Quan for Fireart Studio
一度ウェブサイトに入ると、その会社についての詳細を知ることができることから、背景アニメーションはユーザーに愛されています。
このタイプのアニメーションは、ブランドを一目で紹介する訪問カードのような役割を果たします。背景のモーショングラフィックが、どのようにウェブサイトの使いやすさを向上させているのか分かるでしょう。
IOCO / Biocomputer by Mike | Creative Mints
2. アニメーション・ロゴ
アニメーションロゴは、ココ数年人気となっており、今日ではWebアニメーションでもっとも人気のあるトレンドとなっています。回転するロゴ、モーフィングロゴ、隠れて見えるロゴ、拡大するロゴ、手書きのアニメーションロゴ、3Dアニメーションロゴなどの視覚効果を加えることで、モーションデザイナーはさまざまなタイプのロゴアニメーションを作成しています。
IQOO by Nicolas Girard
多くの場合、ロゴはウェブサイトで最初に目にするものです。記憶に残りやすく、キャッチーで、シンボルやタイポグラフィだけでブランドの個性をはっきり表現する必要があります。
アニメーションは、いくつかのモーションやエフェクトを使いストーリーを伝えることで、ブランドの特長や個性を強調することができます。
たとえば、あなたの会社が楽しい雰囲気のロゴタイプの場合、揺れるアニメーションや泡立つアニメーションを追加することで、ブランドイメージの楽しい側面をうまく強調することができるでしょう。
Logo Animation in After Effects Lego by MaxKravchenko
Cassatka logo animation by Motion Design School
3. リキッド・モーション
水などの液体のような動きが、ユーザーの目を引きます。液体の動きは、次のプロジェクトで検討したいウェブデザインのトレンドとなりつつあります。サイトのレイアウトに多くのスタイルとインタラクティブな動きを追加することで、完璧さと静けさでユーザーを魅了することができるでしょう。
Liquid Effect by Asha Rajput
ウェブサイトに楽しいデザインのアクセントを加え、ユニークなユーザー体験を演出したいときは、おそらくリキッドアニメーションが必要となるでしょう。
波紋を描くようにゆっくりとした流れのような動き、マウスホバーに反応させたり、スクロールに反応させたりすることができます。
INTERCOM by Judson Collier
Experiment by Gilles Tossoukpé
4. キネティック・タイポグラフィー
キネティック・タイポグラフィー（英: Kinetic Typography）やムービング・テキスト（英: Moving Text）とは、タイポグラフィと動きをミックスしたアニメーション技法です。多くの注目すべきブランドがキネティック・タイポグラフィをウェブデザインに取り入れて、オンラインでの見た目に動きと革新性を加えています。
Coming Soon 😃 by Nathan Riley
シンプルな文字テキストに適切なトーンやペース、タイポグラフィのスタイルをを組み合わせることで、明るい感情やパワフルな連想を呼び起こすことができる点が特長です。
キネティック・タイポグラフィは、ウェブサイト上で訴求したいメッセージやコンセプトに焦点を当て、ユーザーがさまざまな知覚レベルで理解するのに役立ちます。
Typographic Slider by Hervé Rbna
5. ローディング・アニメーション
Digital Synopsisによると、47%のユーザーはウェブページの読み込みが2秒以内に終わることを期待しています。4秒後にはユーザーはイライラを感じはじめ、8秒後にはウェブサイトから離脱してしまいます。
1秒の遅延は、ユーザーを失ったり、コンボージョンの定価を招く可能性があります。しかし、8秒を過ぎてもユーザーに残ってもらうことができる秘訣が、読み込みアニメーションです。
Animation by Boing Boing
ウェブサイトが読み込まれている間、ユーザーを退屈させないためにローディング・アニメーションを使用してみましょう。アニメーションについて言葉で説明するよりも、少なくてもいくつかの種類を試してみると良いでしょう。
Loading by 山顶漫
6. ホバーエフェクト
ホバーアニメーションは、Webモーショングラフィックスの中でも古くから利用されており、現在でももっともよく利用されているアニメーションタイプのひとつです。
実装が手軽で、ユニークなユーザー体験を実現できることも、人気の理由と言えるでしょう。最小限の努力でウェブサイトに美しい体験を提供することができます。
ホバーアニメーションをうまく使いこなすことで、ユーザーが何度もホバーしたくなり、ウェブ体験をゲームのように変えてしまうでしょう。このような遊び心のあるウェブサイトのインタラクションは、ユーザーに喜びと満足感をもたらすことができます。しかし、バランス感覚を理解することが重要で、ウェブサイトにあまり使いすぎないことも覚えておきましょう。
3d hover interactions by Andy Selimov for Fireart Studio
7. アニメーション付ギャラリー＆スライドショー
アニメーション付きギャラリーとスライドショーは、最近人気となっているトレンドのひとつです。ウェブサイトの背景に自動的に他の画像に置き換えるシーケンスのように見えるでしょう。
一般的に画像の遷移は単調、シンプル、そしてソフトなものが多く、このアニメーションはユーザーがメインとなる目的から気をそらさないのにも役立ちます。
ギャラリーやスライっどしょーは、実際のフォトアルバムの機能を自然に真似、模倣しているため、使いやすい点も特長です。
Banksy’s site gallery by Victor Nikitin for Fireart Studio
さいごに、。
今やアニメーションは、ウェブデザインよりも遥かに古いメディアでもその力を証明しています。近年では、ウェブデザインのトレンドの中でもっとも人気の高いもののひとつと言えるでしょう。
アニメーションロゴやリキッドモーション、キネティック・タイポグラフィ、ローディングアニメーション、ホバーエフェクト、その他のタイプまで、ウェブデザインのレイアウトに命を吹き込むための多くのオプションがあります。
アニメーションのさまざまな種類をまとめたこの記事が、ウェブデザインでの新しい活用方法や、よりエキサイティングなデジタル体験の創造にインスピレーションを与えてくれることを願っています。
サムネイル@ : Geometric Walk Cycle by Aslan Almukhambetov for Fireart Studio – Dribbble
参照元リンク : Website Animation Types & Trends That Will Dominate Your Screen in 2020–2021 by Dana kachan – Medium
