Web アニメーションツール 2026 — Rive / Lottie / Spline / Motion / GSAP (MIT 無料化) / Anime.js 4 / Theatre.js 深掘りガイド

1. 2026 年 Web アニメーションの地図 — コード / エディタ / 3D / インタラクティブの 4 分類
2. GSAP の MIT 無料化 (2024-11、Webflow 買収) — 何が変わったのか
3. Motion (旧 Framer Motion、2024-10 リブランド) — React / Vue / Vanilla
4. Rive — インタラクティブ + ステートマシン
5. Lottie + dotLottie — Airbnb の標準
6. Spline — ブラウザ 3D
7. Theatre.js — タイムラインエディタ
8. Anime.js 4 — モジュール式に刷新
9. Three.js + R3F — 3D
10. Lenis — スムーススクロールの標準
11. AutoAnimate / Mo.js / Tween.js — その他
12. Web Animations API + CSS scroll-driven — ネイティブ
13. デザイン → コード — After Effects → Lottie、Rive Editor、Spline Editor
14. 韓国 / 日本のデザインシステム — Toss、Kakao、pixiv、CyberAgent
15. 誰が何を選ぶべきか — マーケティング / プロダクト / ゲーム / 学習教材
16. 参考 / References

1. 2026 年 Web アニメーションの地図 — コード / エディタ / 3D / インタラクティブの 4 分類

2026 年の Web アニメーションはひとつのツールで完結しません。マーケティングページのスクロールインタラクション、プロダクト UI のマイクロインタラクション、ゲームやメタバースのような 3D シーン、学習コンテンツのステートマシン主導のインタラクティブキャラクター — それぞれに別の 1 軍ツールが存在します。

大きく分けると 4 カテゴリです。

コードファーストのライブラリ — GSAP 3.13、Motion、Anime.js 4、Web Animations API、react-spring、Lenis、AutoAnimate、Mo.js、Tween.js、Popmotion
エディタ/ランタイム系 — Rive (Editor + Runtime)、Lottie / dotLottie (LottieFiles + Airbnb ランタイム)、Spline (3D)、Theatre.js (コード統合タイムライン)
3D エンジン — Three.js、React Three Fiber (R3F)、Babylon.js、PlayCanvas、生の WebGPU
ネイティブ標準 — CSS animations、CSS scroll-driven animations、Web Animations API、View Transitions API

2026 年を決定づけた出来事は 2 つあります。第 1 に 2024 年 11 月、Webflow が GreenSock を買収し、GSAP と全有料プラグイン (SplitText、MorphSVG、ScrollSmoother、MotionPath、DrawSVG、Inertia など) が MIT ライセンスのオープンソースに変わりました。第 2 に 2024 年 10 月、Framer チームが Framer Motion を「Motion」へリブランドし、React 以外に Vue・Vanilla JS も同列に扱うようになりました。

この 2 つの変化で、無料の選択肢が一気に 2 段階上に押し上げられました。5 年前は「有料の GSAP vs 無料の Anime.js」でしたが、いまは GSAP も Motion も両方無料です。

本記事は 2026 年 5 月時点でこれらのツールすべてを高速で一巡するガイドです。入門者は「どこから始めるか」を、シニアは「次のプロジェクトに何を追加するか」を判断する助けになるはずです。

2. GSAP の MIT 無料化 (2024-11、Webflow 買収) — 何が変わったのか

GreenSock Animation Platform (GSAP) は 2008 年以来、Web アニメーションの事実上の標準でした。単純なトゥイーンエンジンを超えて、タイムライン / スクロールトリガー / SVG モーフィング / テキスト分割 / 慣性 / モーションパスといった難しいケースに対する実証済みの解を提供してきました。

2024 年 11 月、Webflow が GreenSock を買収して大きな変化が起こりました。過去に有料だった "Club GreenSock" の全プラグイン (年 99 ドルの SplitText や MorphSVG など) が MIT ライセンスで無料になり、npm からインストールするだけで使えるようになりました。

npm install gsap
# Webflow 買収後はライセンスキー不要で全プラグインが利用可能

GSAP 3.13 の主な機能をまとめます。

gsap.to / gsap.from / gsap.fromTo / gsap.set — 基本のトゥイーン 4 種
gsap.timeline() — 時間軸でシーケンスを正確に制御
ScrollTrigger — スクロール起因のインタラクションの 1 位。pin / scrub / snap / markers でデバッグ
ScrollSmoother — Lenis 相当のスムーススクロール (旧有料、現在無料)
SplitText — 文字 / 単語 / 行単位での分割 (旧有料、現在無料)
MorphSVG — SVG path 間のモーフィング (旧有料、現在無料)
DrawSVG — ラインを描画するエフェクト (旧有料、現在無料)
MotionPath — path 上を移動 (旧有料、現在無料)
Inertia / Draggable — ドラッグ + 慣性 (旧有料、現在無料)
Flip — FLIP (First, Last, Invert, Play) によるレイアウト遷移

React と組み合わせた基本例:

import { useRef, useEffect } from 'react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { SplitText } from 'gsap/SplitText'

gsap.registerPlugin(ScrollTrigger, SplitText)

export function HeroHeadline({ text }: { text: string }) {
  const ref = useRef<HTMLHeadingElement>(null)

  useEffect(() => {
    if (!ref.current) return

    const split = new SplitText(ref.current, { type: 'chars,words' })

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: ref.current,
        start: 'top 80%',
        end: 'bottom 20%',
        toggleActions: 'play none none reverse',
      },
    })

    tl.from(split.chars, {
      opacity: 0,
      y: 40,
      rotateX: -45,
      stagger: 0.02,
      duration: 0.6,
      ease: 'power3.out',
    })

    return () => {
      tl.kill()
      split.revert()
    }
  }, [text])

  return <h1 ref={ref}>{text}</h1>
}

GSAP の最大の強みは 30 年近く積み上げてきた安定性と互換性です。IE 時代から検証されたトゥイーンエンジンなので、ほぼあらゆるブラウザ / デバイスで一貫した結果が得られます。短所は React/Vue のコンポーネントモデルとの統合に useEffect の cleanup を自分で管理する必要があることですが、公式の @gsap/react フック (useGSAP) が用意されています。

GSAP を使うのが良い場面:

スクロール主導のマーケティングサイト (Awwwards 系) — ScrollTrigger は事実上の標準
SVG が多いモーショングラフィック — MorphSVG、DrawSVG、MotionPath
複雑なシーケンス / カードシャッフル / テキストエフェクト
厳しいタイミング制御が必要なゲーム / インタラクティブ広告

3. Motion (旧 Framer Motion、2024-10 リブランド) — React / Vue / Vanilla

2024 年 10 月、Framer チームが Framer Motion を「Motion」へリブランドしました。ポイントは 2 つです。

React 以外に Vue・Vanilla JS も 1 級市民に
Motion のコア (Motion One) は約 3.8KB の超軽量ライブラリで、Web Animations API を直接活用

既存の framer-motion パッケージ名も使えますが、新規プロジェクトは motion で始めるのが標準になりました。

npm install motion
# React: import { motion } from "motion/react"
# Vue: import { motion } from "motion-v"
# Vanilla: import { animate, scroll, inView } from "motion"

React コンポーネントとしての例:

import { motion, AnimatePresence } from 'motion/react'
import { useState } from 'react'

export function Card() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen(!open)}>Toggle</button>
      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ type: 'spring', stiffness: 300, damping: 30 }}
          >
            カード内容
          </motion.div>
        )}
      </AnimatePresence>
    </>
  )
}

Vanilla JS ならさらに軽量:

import { animate, scroll } from 'motion'

// 基本のトゥイーン
animate('.card', { opacity: 1, y: 0 }, { duration: 0.5, easing: 'spring' })

// スクロールトリガー
scroll(
  animate('.parallax', { y: [-200, 200] }),
  { target: document.querySelector('.section') }
)

Motion の強み:

バンドルサイズが軽い (motion/mini は 2.6KB)
React の宣言的モデルとよく馴染む
layoutId による自動 FLIP 遷移 — 他のライブラリにない強力な機能
spring physics が 1 級 — duration 型と spring 型を自由に混ぜられる

Motion を使うのが良い場面:

React/Vue 製のプロダクト UI — カード遷移、モーダル、ページ遷移
デザインシステムのマイクロインタラクション
軽量なマーケティングページ (GSAP の重いスクロールワークまで不要なケース)

GSAP vs Motion の選択はシンプルです。マーケティングサイトのスクロールインタラクションが主役なら GSAP、プロダクト UI のカード遷移が主役なら Motion。両方を併用するプロジェクトも多いです。

4. Rive — インタラクティブ + ステートマシン

Rive は 2026 年最も興味深いアニメーションツールです。単なるトゥイーン出力ではなく、「ステートマシン」を基盤としたインタラクティブなアニメーションを構築できます。Lottie が「動画のように再生するだけのアニメーション」なら、Rive は「ユーザー入力に反応するコンポーネントのようなアニメーション」です。

Rive のコア構成要素:

Rive Editor — デスクトップ + Web エディタ (デザイナー向け)
Rive Runtime — Web (WASM)、iOS、Android、Flutter、React Native、Unity
ステートマシン — 入力 (input) に応じた遷移グラフ
Listeners — マウスホバー / クリック / ドラッグを直接処理

代表例はトグルスイッチ、視線追従するキャラクター、パスワード入力時に目を覆う動物、インタラクティブなオンボーディングイラストなど。一度作れば全プラットフォームで同じように動くのが大きな利点です。

Web での使用例:

import { useRive, useStateMachineInput } from '@rive-app/react-canvas'

export function PasswordCharacter({ password }: { password: string }) {
  const { rive, RiveComponent } = useRive({
    src: '/animations/login-character.riv',
    stateMachines: 'Login State Machine',
    autoplay: true,
  })

  const isChecking = useStateMachineInput(rive, 'Login State Machine', 'isChecking')
  const numLook = useStateMachineInput(rive, 'Login State Machine', 'numLook')

  useEffect(() => {
    if (numLook) numLook.value = password.length * 6
  }, [password, numLook])

  return (
    <div style={{ width: 400, height: 400 }}>
      <RiveComponent
        onMouseEnter={() => {
          if (isChecking) isChecking.value = true
        }}
        onMouseLeave={() => {
          if (isChecking) isChecking.value = false
        }}
      />
    </div>
  )
}

Rive の強み:

デザイナー自身がインタラクションロジックまで作れる (開発者への引き継ぎ不要)
.riv ファイルは非常に小さく効率的 (ベクター + ボーン)
マルチプラットフォーム (Web / モバイル / ゲームエンジン)
無料プランも十分強力

短所は学習コストがあること (Photoshop/Figma とは別のパラダイム)、純粋なモーショングラフィック用途では Lottie より割高に見える場合があることです。ただ慣れてしまえば「Lottie では作れない」インタラクションを構築できます。

5. Lottie + dotLottie — Airbnb の標準

Lottie は 2017 年に Airbnb がオープンソース化したアニメーション形式です。After Effects でデザイナーが作ったアニメーションを Bodymovin プラグインで JSON 化し、Web / iOS / Android で同じファイルを再生できます。

2026 年の Lottie エコシステム:

lottie-web — Airbnb 公式 Web ランタイム (最も安定、重め)
@lottiefiles/react-lottie-player — LottieFiles の React ラッパー
@lottiefiles/dotlottie-web — dotLottie 形式向けの新ランタイム (Rust + WASM、より高速)
LottieFiles — 無料 / 有料の巨大なアニメーションライブラリ + エディタ + コラボ

dotLottie は 2022 年に LottieFiles が導入した新形式です。.lottie 拡張子で JSON + アセットを ZIP 圧縮しており、従来の .json より約 80% 小さく、1 ファイルに複数アニメーションをまとめられ、テーマ / カラー切替などのインタラクティブ機能もサポートします。

基本例:

import { DotLottieReact } from '@lottiefiles/dotlottie-react'

export function LoadingSpinner() {
  return (
    <DotLottieReact
      src="/animations/loader.lottie"
      loop
      autoplay
      style={{ width: 200, height: 200 }}
    />
  )
}

Lottie の強み:

業界標準ツールである After Effects をそのまま使える
1 回作れば Web / iOS / Android / React Native / Flutter で動く
LottieFiles に何十万もの無料/有料ライブラリ
マーケティングページのイラスト、ローディングスピナー、空状態イラストでは圧倒的

短所:

インタラクティブでない (Rive と対照的に再生のみ)
一部の After Effects エフェクトは未対応 (モーションブラー等)
大きなアニメーションは .json が重くなりがち → dotLottie で解決

韓国・日本の典型的なマーケティングページでは Lottie がほぼ標準です。Toss の採用ページ、LINE のお知らせページ、Yahoo Japan のキャンペーンページはすべて Lottie イラストを使っています。

6. Spline — ブラウザ 3D

Spline は「3D の Figma」と呼ばれるツールです。ブラウザ上で直接 3D モデルを作り、マテリアルを貼り、インタラクションを定義し、React コンポーネントとして export できます。

Spline の主な機能:

ブラウザベースの 3D エディタ (Blender 不要)
無料プランでも無制限 (ウォーターマークなし)
@splinetool/react-spline で React 埋め込み
インタラクション (ホバー、クリック、スクロール) をエディタ内で定義
AR、動画、3D モデル export

基本的な使い方:

import Spline from '@splinetool/react-spline'

export function Hero() {
  return (
    <main className="h-screen w-full">
      <Spline scene="https://prod.spline.design/abc123/scene.splinecode" />
    </main>
  )
}

Spline が強い領域:

マーケティングサイトのヒーロー 3D シーン (Vercel、Linear、Arc ブラウザなどが活用)
デザイナー自身が 3D コンテンツを作りたいとき
高速プロトタイピング (Three.js のコードなしで)

短所:

複雑な 3D シーン (大量のポリゴン、複雑なシェーダ) には不向き
ランタイムが重くなりやすい — モバイル最適化に注意
クラウド依存 (シーンが Spline サーバーにホストされる)

Spline vs Three.js + R3F の選択は単純です。デザイナー主導 + シンプルなシーンなら Spline、開発者主導 + 複雑なシーンなら R3F。

7. Theatre.js — タイムラインエディタ

Theatre.js は Cantor Studios が作ったオープンソースのアニメーションツールです。最大の特徴は「コードとビジュアルエディタを同時に扱う」点です。After Effects のようなタイムライン UI をブラウザ上に表示し、デザイナーがキーフレームを視覚的に調整すると結果が JSON として保存され、コードがそれを再生します。

基本コンセプト:

Studio — 開発中に使うビジュアルエディタ (本番ビルドからは除外)
Sheet — 1 シーンのタイムライン
Object — Sheet 内のアニメーション可能オブジェクト (DOM、R3F mesh など何でも)

基本的な使い方:

import { getProject } from '@theatre/core'
import studio from '@theatre/studio'

// 開発時のみ studio を立ち上げる
if (process.env.NODE_ENV === 'development') {
  studio.initialize()
}

const project = getProject('My Animation')
const sheet = project.sheet('Scene 1')

const obj = sheet.object('Logo', {
  x: 0,
  y: 0,
  rotation: 0,
  opacity: 1,
})

obj.onValuesChange((values) => {
  // values.x, values.y, values.rotation, values.opacity を DOM に反映
  logoEl.style.transform = `translate(${values.x}px, ${values.y}px) rotate(${values.rotation}deg)`
  logoEl.style.opacity = String(values.opacity)
})

// 再生
sheet.sequence.play()

Theatre.js の強み:

R3F (React Three Fiber) と統合して 3D シーンを視覚的に操作
After Effects のようなキーフレーム編集
成果物が JSON なので git にコミット可能 → デザイナーと開発者が同じ PR に参加

使う場面:

複雑な 3D シーンでカメラモーションを視覚的に調整したいとき
デザイナー自身がキーフレームを調整したいとき
マーケティングサイトのスクロール起因のシネマティック

GSAP ScrollTrigger が「コードで定義」なら、Theatre.js は「タイムライン UI で定義 + コードで再生」です。

8. Anime.js 4 — モジュール式に刷新

Anime.js は Julian Garnier 作の軽量アニメーションライブラリで、GSAP の無料代替として長年愛されてきました。2024 年末に v4 がリリースされ、モジュール式アーキテクチャに全面的に書き直されました。

Anime.js 4 の変化:

モジュール式 import — animate、createTimeline、createDraggable、stagger など必要なものだけ import
ツリーシェイキング対応 — バンドルサイズ削減
TypeScript 1 級サポート
spring physics 追加

基本例:

import { animate, stagger, createTimeline } from 'animejs'

// 単純なトゥイーン
animate('.card', {
  translateY: [-20, 0],
  opacity: [0, 1],
  duration: 600,
  delay: stagger(100),
  ease: 'outQuad',
})

// タイムライン
const tl = createTimeline({
  defaults: { duration: 400, ease: 'outQuad' },
})

tl.add('.header', { translateY: [-50, 0], opacity: [0, 1] })
  .add('.subheader', { translateX: [-50, 0], opacity: [0, 1] }, '-=200')
  .add('.cta', { scale: [0.8, 1], opacity: [0, 1] }, '-=200')

Anime.js のポジショニング:

GSAP より軽量で API がシンプル
Motion ほど React 親和ではないが、Vanilla JS に強い
学習コストが低い
小〜中規模プロジェクトに最適

GSAP が無料化されたいま Anime.js を選ぶ理由は 2 つに絞られます。(1) GSAP より小さいバンドルが必要、(2) よりシンプルな API が好み。

9. Three.js + R3F — 3D

Three.js は 2010 年に Ricardo Cabello (mr.doob) が公開した、Web 3D の事実上の標準ライブラリです。WebGL 上の抽象化レイヤとして Scene / Camera / Mesh / Material / Light といった馴染みのある 3D 概念を提供します。

2026 年の Three.js エコシステム:

three (コア) — r170+。WebGPU バックエンドは試験段階
@react-three/fiber (R3F) — React 親和ラッパー (Poimandres チーム)
@react-three/drei — R3F 用のユーティリティ集 (カメラコントロール、シェーダ、ヘルパー)
@react-three/postprocessing — ポストプロセス (ブルーム、DOF、ノイズ)
@react-three/rapier — Rapier 物理エンジンラッパー
@react-three/cannon — Cannon-es 物理エンジンラッパー
leva — R3F 用のデバッグ GUI

R3F の基本パターン:

import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls, Environment } from '@react-three/drei'
import { useRef } from 'react'
import type { Mesh } from 'three'

function SpinningBox() {
  const ref = useRef<Mesh>(null)

  useFrame((_, delta) => {
    if (ref.current) {
      ref.current.rotation.x += delta
      ref.current.rotation.y += delta * 0.5
    }
  })

  return (
    <mesh ref={ref}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  )
}

export function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 5] }}>
      <ambientLight intensity={0.5} />
      <directionalLight position={[10, 10, 5]} />
      <SpinningBox />
      <Environment preset="sunset" />
      <OrbitControls />
    </Canvas>
  )
}

Three.js と Spline の違い:

Three.js + R3F — コードベース、自由度無限、学習コスト大
Spline — GUI ベース、早く結果が出る、自由度に制限

複雑なゲーム / メタバース / データ可視化 (例 Globe.gl、three-globe) は Three.js、マーケティングサイトのヒーロー 3D は Spline、というのが一般的です。

10. Lenis — スムーススクロールの標準

Lenis は Studio Freight (現 Darkroom Engineering) が作ったスムーススクロールライブラリです。2023 年のリリース以来、Web アニメーションの事実上の標準として急速に普及しました。

Lenis の特徴:

軽量 (約 3KB)
ネイティブスクロールイベントと互換 (window の scroll イベントが正常動作)
モバイル親和
GSAP ScrollTrigger と完全に共存可能

基本例:

import Lenis from 'lenis'

const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  smoothWheel: true,
})

function raf(time: number) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}
requestAnimationFrame(raf)

GSAP ScrollTrigger との連携:

import { ScrollTrigger } from 'gsap/ScrollTrigger'

lenis.on('scroll', ScrollTrigger.update)

gsap.ticker.add((time) => {
  lenis.raf(time * 1000)
})
gsap.ticker.lagSmoothing(0)

使う場面:

ほぼすべてのマーケティング / ポートフォリオサイト — Awwwards 受賞作の 80% が Lenis または GSAP ScrollSmoother を使用
スクロール起因のインタラクションが主軸のサイト

使わない方が良い場面:

アクセシビリティが最優先 — スムーススクロールはキーボード / スクリーンリーダー利用者を混乱させる
長文テキスト中心のサイト — 通常スクロールの方が自然
ユーザーが prefers-reduced-motion を設定している場合は必ず無効化

2026 年のトレンドは「デフォルトで Lenis を入れるが、prefers-reduced-motion を尊重する」です。

11. AutoAnimate / Mo.js / Tween.js — その他

Web アニメーションのフルスタックを全部使うことはまずありませんが、知っておくと良いツールを駆け足で。

AutoAnimate — Formkit のゼロコンフィグ遷移ライブラリ。React/Vue/Svelte のコンテナの子要素が追加 / 削除 / 移動されたとき、自動で滑らかな遷移を付けてくれます。

import { useAutoAnimate } from '@formkit/auto-animate/react'

export function TodoList({ todos }: { todos: string[] }) {
  const [parent] = useAutoAnimate()

  return (
    <ul ref={parent}>
      {todos.map((todo, i) => (
        <li key={i}>{todo}</li>
      ))}
    </ul>
  )
}

強みは「1 行で終わる」こと、弱みは自由度がほぼないこと。素早く滑らかさを足したいときに。

Mo.js — モーショングラフィックに特化したライブラリ。パーティクル、バースト、シェイプモーフィングなど「シネマティックなエフェクト」を作るのが得意。ユーザー数は減りましたが、根強いファンがいます。

Tween.js — 最も古いトゥイーンエンジン (2010 年から)。Three.js と併用されることが多い。軽量で精密なトゥイーン制御が必要な場面に。

Popmotion — Motion の前身。現在は Motion に吸収されました。新規なら Motion を使うのが正解です。

react-spring — Pmndrs (Poimandres) の React 用スプリングライブラリ。Motion の spring より自由度が高いですが API が難しい。

Animate.css — 純粋な CSS アニメーションクラス集。最軽量ですが自由度が低い。素早いプロトタイプに。

12. Web Animations API + CSS scroll-driven — ネイティブ

ブラウザが直接サポートするネイティブアニメーション API も 2026 年には非常に強力になりました。ライブラリなしでもかなりのことができます。

Web Animations API (WAAPI) — すべてのモダンブラウザがサポート。

const el = document.querySelector('.box')

const animation = el!.animate(
  [
    { transform: 'translateY(0px)', opacity: 1 },
    { transform: 'translateY(-100px)', opacity: 0 },
  ],
  {
    duration: 800,
    easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
    fill: 'forwards',
  }
)

animation.onfinish = () => {
  console.log('アニメーション終了')
}

Motion のコアは WAAPI 上に構築されているので、Motion を使うことは実質的に WAAPI を効率よく使うことと同じです。

CSS scroll-driven animations — 2024 年後半に Chrome/Edge 105+、Safari 17.5+、Firefox 132+ でサポート開始。JS なしでスクロール駆動のアニメーションを書けます。

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

これ 1 つでスクロールイン時のアニメーションが完成します。GSAP ScrollTrigger 不要。短所は Firefox のサポートが遅かったことと、複雑なインタラクションには限界があることです。

View Transitions API — ページ / ルート遷移時の滑らかなトランジション。Chrome 111+、Safari 18+ でサポート。Next.js や Astro がルート遷移で利用し始めています。

// View Transitions を開始
if ('startViewTransition' in document) {
  document.startViewTransition(() => {
    // DOM 更新
    document.body.classList.toggle('dark-mode')
  })
}

2026 年のトレンドは「できるだけネイティブで、足りなければ Motion、それでも足りなければ GSAP」です。

13. デザイン → コード — After Effects → Lottie、Rive Editor、Spline Editor

Web アニメーションツールの真の違いは「デザイナーから開発者へどう渡るか」で決まります。

伝統的なワークフロー — デザイナーが After Effects で作り、開発者が GSAP で再実装。

デザイナー: After Effects (.aep) -> 動画 export (mp4)
開発者: 動画を見て GSAP コードで再実装
結果: デザイナーのモーションと開発者の成果物が乖離、修正の繰り返し

Lottie ワークフロー — After Effects + Bodymovin で JSON を抽出し、そのまま Web / モバイルで再生。

デザイナー: After Effects + Bodymovin -> animation.json
開発者: lottie-web でそのまま再生
結果: デザイナーのモーションがピクセル単位で正確に再現

Rive ワークフロー — Rive Editor で作り、ステートマシンを定義し、.riv を export、ランタイムで入力をバインドするだけ。

デザイナー: Rive Editor -> character.riv (ステートマシン含む)
開発者: @rive-app/react-canvas で input をバインド
結果: デザイナーがインタラクションロジックまで定義、開発者はデータ接続のみ

Spline ワークフロー — Spline Editor で 3D を作り、インタラクションを定義し、scene.splinecode を export。

デザイナー: Spline (3D モデリング + マテリアル + インタラクション)
開発者: @splinetool/react-spline で埋め込み
結果: 3D マーケティングページをデザイナー単独で完成

Theatre.js ワークフロー — コードでオブジェクト定義、ビジュアルエディタでキーフレーム調整、JSON を git にコミット。

開発者: Theatre Studio を起動しオブジェクト定義
デザイナー (または開発者): タイムライン UI でキーフレーム調整 -> save
結果: デザイナーと開発者が同じ PR に参加、JSON でバージョン管理

大型マーケティングキャンペーンは Lottie + GSAP の組み合わせ、プロダクトのインタラクティブキャラクターは Rive、3D ヒーローは Spline、シネマティックなスクロールは Theatre.js + R3F、というのが 2026 年の典型パターンです。

After Effects 以外のデザインツールも次第に統合が進んでいます。Cavalry (モーションデザインツール) は Lottie export をサポートし、Figma も Smart Animate + プラグインで Lottie export 可能。Adobe Animate (旧 Flash) も一部の広告 / ゲーム分野で残っています。

14. 韓国 / 日本のデザインシステム — Toss、Kakao、pixiv、CyberAgent

韓国・日本の大手企業が実際にどのツールを使っているか、事例を見ます。

Toss — Toss デザインシステムのマイクロインタラクションは Framer Motion (Motion) + Lottie がメイン。送金完了後のチェックマーク、ローディングスピナー、広告バナーはほぼ Lottie。ページ遷移やカード入場 / モーダルは Motion。Toss のデザイナーが「Lottie ファイルを .json で正確に書き出す方法」のワークショップを頻繁にやっているという話があります。

Kakao — KakaoTalk の絵文字 (エモティコン) 自体が巨大なアニメーションシステムで、Web (Daum、KakaoBank、KakaoPay) では Lottie + CSS transitions がメイン。KakaoBank のカード展開アニメーションは GSAP として知られています。

LINE — 日本市場では LINE の影響力が圧倒的。LINE スタンプのアニメーションは自社形式 (APNG、その後独自動画形式) で動作し、Web (line.me、LINE Pay 日本) では Lottie が標準。

Yahoo Japan — LINE ヤフー合併後、マーケティングページは Lottie + GSAP の組み合わせ。広告バナーには独自パイプライン (Bodymovin → 内製変換) を使用。

pixiv — 日本のイラスト SNS。pixivision のようなマガジン的なページは GSAP scroll + Lottie イラスト。イラストレーター向けインターフェイスのため、アニメーションは「ユーザーコンテンツを邪魔しないよう」抑制されたトーン。

CyberAgent — 日本の広告・ゲーム大手。子会社 (AbemaTV、Tap Sports Baseball など) は多様なツールを使用。CyberAgent Developers Blog に「Lottie 導入記」「Three.js ゲームページ」などの記事が頻繁に上がります。

SmartNews — 日本のニュースアプリ。Web マーケティングページに Rive インタラクティブキャラクターを使用。

ZOZO — 日本のファッション EC。商品ページの 3D 回転ビューが Three.js ベース。

Baemin (Woowa Brothers) — 韓国のフードデリバリー。マーケティングページに Lottie を積極利用、キャラクター (Baemin 独自書体と組合せ) のインタラクティブモーションで Rive を実験中と言われます。

Daangn (Carrot) — 韓国の中古取引 / 地域コミュニティアプリ。マイクロインタラクションは Framer Motion (Motion) 中心、広告ページに Lottie。

Coupang — 韓国の巨大 EC。パフォーマンス最優先のため重いアニメーションは控えめ。CSS transitions + 一部 Lottie 程度。

NAVER — 韓国の Daum と並ぶ巨大ポータル。自社デザインシステム (Naver D2) で Motion と Lottie が標準化されています。

15. 誰が何を選ぶべきか — マーケティング / プロダクト / ゲーム / 学習教材

最後に用途別の推奨をまとめます。

マーケティングサイト (Awwwards 系、キャンペーンページ)

第 1 候補: GSAP 3.13 + ScrollTrigger + Lenis
イラストは Lottie / dotLottie
3D ヒーローは Spline (シンプル) または Three.js + R3F (複雑)
シネマティックなスクロールは Theatre.js + R3F

プロダクト UI (SaaS、アプリ)

第 1 候補: Motion (旧 Framer Motion)
自動遷移は AutoAnimate
ローディング / 空状態は Lottie
インタラクティブキャラクター (オンボーディング、決済キャラ) は Rive

ゲーム / インタラクティブコンテンツ

2D インタラクティブキャラクター — Rive
3D ゲーム — Three.js + R3F + Rapier (物理)
広告 / ミニゲーム — 自前 canvas + GSAP (タイミング) + Mo.js (エフェクト)

学習教材 / 教育

インタラクティブ図解 — Rive (ステートマシンが教育に最適)
コード主導の可視化 — d3.js + Motion
イラスト — Lottie

パフォーマンス最優先

ネイティブ CSS animations + scroll-driven animations
ライブラリが必要なら Motion mini (2.6KB)
スムーススクロール用に Lenis (3KB) のみ

バンドルサイズ最小化

Vanilla — Web Animations API + CSS のみ
ライブラリ 1 つ — Motion または Anime.js 4 modular
GSAP は無料だが、コア + ScrollTrigger だけで約 50KB

エンタープライズ / 安定性

GSAP 3.13 — 30 年近い検証
Lottie (lottie-web) — Airbnb がメンテ
Motion — Framer がバックアップ

ブランドの統一感

1 ツールで一貫性 — Motion (プロダクト + マーケティング)
または 2 スタック — GSAP (マーケティング) + Motion (プロダクト)

2026 年のベストセットアップは大抵こうなります。Motion でプロダクト UI の 80%、Lottie でイラスト 100%、GSAP + ScrollTrigger + Lenis でマーケティングページのスクロールインタラクション、必要に応じて Rive または Spline。この組み合わせでほぼあらゆるシナリオをカバーできます。