Webアニメーションとは

_{スターバックスの採用サイトTOPページから引用。画質荒くてすみません}

Webアニメーションとは、Webサイトやアプリケーション上で要素を動的に表現する技術です。ボタンのホバーエフェクトから複雑なインタラクティブアニメーションまで、様々な動的表現を実現します。

WebアニメーションはUXにどのように影響するか

WebアニメーションはUXの観点で、以下に影響します。

視覚的な効果

ユーザーの注目を集める
サイトの魅力を向上させる
情報の理解を促進する

操作性の向上

ユーザーアクションへの即時フィードバック
画面遷移をスムーズに表現
操作を直感的に理解させる

ブランド価値の向上

サイトの個性を表現
記憶に残る体験を創出
ブランドイメージの強化

Webアニメーションの実装方法一覧

CSSアニメーション

最も基本的で軽量な実装方法です。

style.css

/* トランジションの例 */
.button {
  background-color: blue;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: red;
  transform: scale(1.1);
}

/* キーフレームの例 */
@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

.bouncing-element {
  animation: bounce 1s infinite;
}

メリット

JavaScriptなしで実装可能
ブラウザの最適化により高パフォーマンス
学習が比較的簡単（ただし奥は深い...）

SVGアニメーション

ベクターグラフィックスを使用したアニメーション。

index.html

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3">
    <animate 
      attributeName="r" 
      values="40;20;40" 
      dur="2s" 
      repeatCount="indefinite"
    />
  </circle>
</svg>

メリット

解像度に依存しない高品質な表現
ファイルサイズの最適化が可能
複雑なアニメーションが可能（複雑なものを作りすぎるとページのパフォーマンスが下がる可能性あり）

Lottieアニメーション

After Effectsで作成したアニメーションをWeb上で再生。

lottie.js

import lottie from 'lottie-web';

const animation = lottie.loadAnimation({
  container: document.getElementById('animation'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'animation.json'
});

メリット

高度なアニメーションが可能
デザイナーとの協業が容易
軽量なJSONファイル形式　← ここ重要

GIFアニメーション

最もシンプルな実装方法。

index.html

<img src="animation.gif" alt="アニメーション">

メリット

実装が極めて簡単
広いブラウザ互換性
デザイナーが直接作成可能

その他

JavaScript/Canvas
WebGL/Three.js
GSAPなどのアニメーションライブラリ

実装時の注意点

パフォーマンス最適化

アニメーションの頻度を適切に設定
重い処理は避ける
モバイル端末での動作確認

アクセシビリティ

reduce-motionへの対応
過度なアニメーションを避ける
代替コンテンツの提供

ブラウザ対応

クロスブラウザテスト
フォールバックの実装
最新のWeb標準への準拠

まとめ

今回はWebアニメーションの実装方法について簡単にまとめてきました。他にもやり方はあるかもしれませんが、主要な方法については取り上げられたのではないかと思います。

個人的にLottieが気になっていて、Figmaのプラグインでも作成できるらしいので、近日中に調整してみようと思います！

本記事を読んでいただきありがとうございました！