AVAL：Webアニメーションを状態マシンで制御する新しいオープンソースフォーマット

AVアニメーションを状態グラフで管理し、コードからsetState("success")の一行でシームレスに遷移できる新しいWeb動画フォーマット。Pixel Point社が開発したオープンソースのAVALを徹底解説します。

GitHubで急上昇中の pixel-point/aval をご紹介します。 スター数 1106★ を獲得し、Web分野で注目されているツールです。

---

AVAL とは？

AVALは、Pixel Pointが開発したWebブラウザ向けのインタラクティブ動画フォーマットです。短いプリレンダリングされたモーション（動画）に状態マシンを組み合わせることで、ホバー・クリック・成功・エラーといったUIの状態変化に対応したアニメーションをシームレスに実現します。

従来のGIFやCSSアニメーション、Lottieが抱える課題（コーデック選択の煩雑さ、シーキングによるカクつき、透明度の扱いにくさ）を解決するために設計されています。アニメーターが作成したRGBAフレームをコンパイラが.avlファイルにパックし、ブラウザがAV1・VP9・H.265・H.264の中から最適なコーデックを自動選択します。

こんな人におすすめ:

• エンジニア向け: フロントエンドエンジニア・Webアニメーター・UXエンジニアがプロダクトUIのインタラクティブアニメーションをコードから制御する場面で活躍します
• 非エンジニア向け: アニメーション制作担当者がデザインツールでモーションを作成し、エンジニアに渡すだけで実装できる仕組みのため、デザイナーにも親しみやすいワークフローです

---

AVAL の主な機能・特徴

• 状態グラフ（State Graph）: named states・authored triggers・ルーティングで決定論的な状態遷移を実現。最新のトリガーが優先されるシンプルなAPI
• フレーム精度の遷移: ポータル・フィニッシュ・カット・リバーサルによりコンテンツフレームから始まる正確なアニメーション遷移が可能
• マルチコーデックバンドル: AV1・VP9・H.265（HEVC）・H.264のコーデックバンドルを自動生成。ブラウザが対応するコーデックを自動選択する
• パックド透明度（Packed Alpha）: 透明チャンネルを効率的に格納し、WebM/MP4では難しかった半透明アニメーションをGIF同等のシンプルさで実現
• SSRセーフなWebコンポーネント: <aval-player>カスタム要素はSSR（サーバーサイドレンダリング）に対応済み

---

使い方・始め方

5分でセットアップ

# ランタイムとコンパイラをインストール
npm install @pixel-point/[email protected]
npm install --save-dev @pixel-point/[email protected]

# スターターを生成
npx avl init my-motion
cd my-motion
npm install
npm run dev

コンパイルとバンドル生成

# 4コーデック分のファイルを一括コンパイル
npx avl compile motion.json --out dist/motion
# → dist/motion/av1.avl, vp9.avl, h265.avl, h264.avl が生成される

HTMLへの組み込み

<aval-player width="320" height="320">
  <source src="/motion/av1.avl"
    type='application/vnd.aval; codecs="av01.0.00M.10.0.110.01.01.01.0"'>
  <source src="/motion/vp9.avl"
    type='application/vnd.aval; codecs="vp09.00.10.08.01.01.01.01.00"'>
  <source src="/motion/h264.avl"
    type='application/vnd.aval; codecs="avc1.640028"'>
  <img slot="fallback" src="/motion.png" alt="">
</aval-player>

<script type="module" src="/motion.js"></script>

JavaScriptからの状態制御

import { defineAvalElement } from "@pixel-point/aval-element";
defineAvalElement();

// 状態をコード1行で切り替え
const motion = document.querySelector("aval-player");
await motion?.setState("success");

---

活用事例

フロントエンドエンジニアのUIアニメーション実装

ローディングスピナーやボタンのホバーエフェクト、成功/エラー表示など、状態変化が必要なUIアニメーションにAVALは最適です。setState("loading")やsetState("error")と呼ぶだけで、アニメーターが設計したモーションに切り替わります。Blenderで作成した小さな3Dアイコンアニメーションをそのまま使えるため、デザインと実装のギャップが大幅に縮まります。

UXエンジニアとデザイナーの協業

デザイナーはAblender・After Effectsなどでフレームシーケンスを作成し、エンジニアはそれをコンパイラに渡して.avlファイルを生成。実装者はHTML/JSのみで状態制御できるため、従来のLottie JSON調整作業や動画ループ処理の実装コストが大幅に削減されます。

---

Lottie・CSS・GIF との違い：なぜ今このフォーマットか

AVALが登場した背景には、既存のWebアニメーション手法の限界があります。

比較項目	AVAL	Lottie	CSS Animation	GIF
透明度対応	✅（パックドα）	✅	✅	✅（低品質）
状態マシン	✅（組み込み）	❌（要プラグイン）	❌	❌
コーデック選択	自動（4種）	SVGベース	N/A	固定
ビデオ品質	✅（高品質）	❌	❌	❌（8bit限定）
シーキング不要	✅（ループシーム）	✅	✅	✅
ブラウザ対応	source順自動選択	広範	全ブラウザ	全ブラウザ

LottieはSVGベースのため複雑な3Dや映像的な表現が難しく、GIFは色数制限・ファイルサイズの問題があります。AVALはビデオコーデックの品質をそのままに、状態マシンとWebコンポーネントで使いやすさを提供する、両者の「いいとこ取り」的なアプローチです。

---

こんな人に向いている

職種	具体的な活用シーン
フロントエンドエンジニア	ボタン・アイコンのホバー/クリック/ロード/成功アニメーションを状態管理と連動させたい
UXエンジニア	デザイナーからもらったBlender/AfterEffectsのモーションをコードで制御したい
Webアニメーター	品質を落とさずに複数コーデックへ自動変換し、状態グラフで遷移を設計したい
SaaSプロダクトチーム	ローディング・成功・エラーなどUIの状態変化をリッチなビデオアニメーションで表現したい

---

使う前に知っておきたいこと

FFmpegが必須

コンパイラはシステムにインストールされたFFmpegとFFprobeを使用します（libx264・libx265・libvpx-vp9・libaom-av1エンコーダー必須）。FFmpegをバンドルせず、別途インストールが必要です。

動作環境とNode.jsバージョン

Node.js 22.12.0以降が必須です。ブラウザ側はAV1→VP9→H.265→H.264の順にフォールバックするため、古いブラウザでもH.264コーデックがあれば表示できます。

プラットフォーム制限（Windows・Mobile Safari）

開いているIssueによると、Windowsでのコンパイルに問題があります（IO_FAILED: syncDirectory()がPOSIX専用のため）。またMobile SafariでのGraphicsに関するIssueも報告されています。現時点ではmacOS/Linuxでの開発を推奨します。

ライセンスとコーデック特許

コンパイラはFFmpegを使ってコーデックエンコードを行いますが、コーデック特許・ソースメディア・配布義務はパブリッシャー（利用者）の責任です。H.265/HEVCなど特許コーデックを商用利用する際は、ライセンスの確認を行ってください。

---

まとめ

AVALはビデオコーデックの高品質と状態マシンのシンプルさを組み合わせた、次世代のWebアニメーションフォーマットです。日本語情報がまだほとんどなく、今後の普及が期待されるツールです。

setState()の1行でアニメーション状態を切り替えられる開発体験は、フロントエンドエンジニアやUXエンジニアにとって非常に魅力的です。現時点ではmacOS/Linux向けの技術プレビューですが、React対応やブラウザテストの拡充も予定されています。

GitHub でチェックする →

---

関連ツール・おすすめサービス

• Vercel — Web/フロントエンドプロジェクトのかんたんデプロイに最適
• DigitalOcean — 開発者向けクラウド・App Platformでかんたんデプロイ

---

この技術を学ぶ

Webに興味を持った方には、UdemyのオンラインWeb開発コースもおすすめです。

• 🎓 関連するWebコース一覧 — セール時（最大90%OFF）を狙うとお得です