AnimGen
新規登録
本文へ移動
記事一覧

Webの透過アニメーション

Webページに透過キャラクターアニメーションを置く：WebM Alphaの実装

透過WebMをHTMLでページの背景に重ね、PNGへのフォールバック、再生操作、モバイル表示、対象ブラウザでの互換性確認まで実装します。

AnimGen更新日 9 分で読める
Chromeで同じ透過ランナーを明るい背景、暗い背景、グラデーションに重ねた検証画面
目次

Webの透過アニメーションなら、ページ自体の背景がキャラクターの周りから見えるはずです。各フレームに黒・白・緑の背景や描き込まれた市松模様が固定されていては、同じ結果になりません。

ここではAnimGenから書き出した本物のWebM Alphaを使い、GIFで見た目だけを再現しません。まずブラウザで動くデモを開くか、HTMLサンプル一式をダウンロードし、対象ブラウザで同じファイルを試してください。

コードより先に実際の表示を見る

デモでは1つのキャラクター動画を明るいパネル、暗いパネル、グラデーションのHero領域に重ねています。3種類の背景で、透過が本物かどうかと、特定の色でだけ現れる縁の問題を見分けられます。

AnimGenの同じ透過WebMを明るい背景、暗い背景、グラデーションの上で再生するChrome

使用したファイルの実測値は次の通りです。

素材 実測値 役割
透過WebM VP8 Alpha、512 × 512、24 FPS、4.00秒、1,611,685バイト アニメーション
PNGポスター 512 × 512 RGBA、121,667バイト 初期表示と静止画への切り替え

libvpx で96フレームをすべてデコードし、Alphaが0～255に分布することを確認しました。続いてmacOS 26.5.2のChrome 152.0.7977.84でページを開き、3本の動画が進み、透過画素の下に各背景が見えることを確認しました。幅500画素の狭い表示でもレイアウトを確認しています。

これはこのファイルと検証環境に対する結果です。通常のWebMが再生できても、WebM Alphaが正しく合成されるとは限りません。MDNの動画コーデックガイドはSafariでVP8／VP9動画のアルファ透過がサポートされない点に触れています。推測せず、対象ブラウザを製品要件として確認してください。

WebMとPNGを別ファイルで用意する

text
public/
└── animation/
    ├── character-run.webm
    └── character-run.png

PNGは市松模様のスクリーンショットではなく、実際にアルファを持つ1フレームにします。次はデモで使うフォールバック画像です。このページの画像ビューアーに見える市松模様は、ファイルに描き込まれた背景ではありません。

青いランナーの動画から取り出した透過RGBAポスターフレーム

通常のMP4を透過用フォールバックと考えないでください。一般的なMP4と最初のモデルプレビューは不透明です。AnimGenではWebM Alpha、ProRes 4444、RGBAフレーム、透過スプライトは別途生成される書き出し結果です。透過形式と再生互換性も参照してください。

段階的に機能を強めるHTMLから始める

既定ではPNGを表示し、ブラウザがVP8 WebMを再生できると判断した場合に動画を表示します。読み込みエラーならPNGに戻します。

html
<div class="animation-stage">
  <img
    id="character-fallback"
    src="/animation/character-run.png"
    width="512"
    height="512"
    alt="走っている青いキャラクター"
  />

  <video
    id="character-video"
    width="512"
    height="512"
    muted
    loop
    playsinline
    preload="metadata"
    poster="/animation/character-run.png"
    aria-label="走っている青いキャラクター"
    hidden
  >
    <source
      src="/animation/character-run.webm"
      type='video/webm; codecs="vp8"'
    />
  </video>
</div>

width と height を指定すれば、読み込み前に正しい比率の場所を確保できます。playsinline はモバイルでページ内再生を促し、muted は装飾動画を無音にし、preload="metadata" はページを開いた時点で動画全体を急いでダウンロードしないようにします。MDNの<video>要素の説明に属性とposterの挙動があります。

<video>...</video> の内部に置く文字や画像は、主にvideo要素自体を知らないブラウザ向けです。現代のブラウザが要素は認識するが、どのsourceもデコードできない場合、内部の内容が期待通りに出るとは限りません。隣接した <img> を置き、エラーイベントで切り替える方が実用的です。

CSSでページの背景に重ねる

透過画素の下には .animation-stage の背景が見えます。

css
.animation-stage {
  position: relative;
  width: min(100%, 32rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 1.5rem;
  background: linear-gradient(145deg, #7c3aed, #0891b2);
}

.animation-stage > img,
.animation-stage > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

画面全体を見せるなら object-fit: contain を使い、切り抜きたいと確信できる場合だけ cover を使います。複雑なHero背景では drop-shadow() を足せますが、元の縁を検査するときはエフェクトを切り、スピルや明るい縁を隠さないでください。

動画と静止画を安全に切り替える

canPlayType() は初期の分岐には使えますが、容器とコーデックの判定にすぎず、アルファが正しく合成される証明にはなりません。

js
const video = document.querySelector("#character-video");
const fallback = document.querySelector("#character-fallback");
const playButton = document.querySelector("#play-character");

function showFallback() {
  video.pause();
  video.hidden = true;
  fallback.hidden = false;
}

const canPlayWebM = video.canPlayType(
  'video/webm; codecs="vp8"'
);

if (canPlayWebM) {
  fallback.hidden = true;
  video.hidden = false;
} else {
  showFallback();
}

video.addEventListener("error", showFallback);
playButton.addEventListener("click", () => video.play());

重要なHeroや導入フローに使うなら、対象ブラウザで実測し、アプリ側の明確なフォールバックを保ちます。装飾なら適切なPNGだけでもレイアウトは維持でき、動画の互換性を主な内容の障害にしなくて済みます。

幅500画素のビューポートで、キャラクターの上に再生操作を配置したレスポンシブ表示

再生の制御を訪問者に渡す

透過動画も動くコンテンツです。無限ループする装飾を、ページを理解・利用する唯一の方法にしないでください。

ダウンロード可能なデモは最初にposterで停止し、再生／一時停止ボタンを用意しています。prefers-reduced-motion も確認し、動きを減らしたい訪問者には、本人が再生するまでPNGを表示します。

js
const reducedMotion = matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;

if (reducedMotion) {
  showFallback();
}

どうしても自動再生が必要なら、無音・ページ内再生とし、ブラウザに拒否された play() のPromiseを処理し、一時停止の操作を用意します。短い動画でも、ループでCPUや通信を使い続けるべきではありません。

Webへの配信コストを抑える

このデモで同じ動画を3本同時再生するのは、3背景で透過を証明するためです。本番では普通1つのvideoで足り、同じ素材を3つのデコーダーで再生する必要はありません。

  1. 実際に見せる動作範囲まで切ります。
  2. Webでの最大表示サイズに近い寸法で書き出し、小さなカードに巨大な元ファイルを入れません。
  3. ファーストビューより下や操作後にだけ必要な動画は preload="none" とし、寸法・長さを先に知る必要がある場合に metadata を使います。
  4. 内容を示す透過PNGのposterを用意します。
  5. 長時間再生する動画は、ビューポート外やタブが非表示になったら停止します。
  6. サーバーが video/webm のContent-Typeを返し、バージョン付き静的ファイルをキャッシュするようにします。
  7. ProRes 4444は編集・合成に残し、通常のWeb埋め込みには使いません。

今回の4秒の例は約1.54 MiBで、短い展示素材として使えますが、あらゆるサイトの予算ではありません。他のページリソースと一緒に、通信速度を落としたモバイル環境で測ってください。

黒い矩形が出ても、すぐに動きを再生成しない

  1. 対応するRGBA PNGを明るい背景と暗い背景の上で確認します。
  2. PNGは透過するのにWebMが黒くなるなら、ブラウザ／デコーダー、実際のエンコード、合成経路を調べます。
  3. 両方とも不透明なら、入力画像のAlpha、書き出しモード、元絵に背景が描かれていないかを確認します。
  4. サーバーがファイル全体と Content-Type: video/webm を返すか確認します。
  5. 製品で使うブラウザ、OS、端末、埋め込みWebViewで再テストします。

透過書き出しのトラブルシューティングには明るい縁、色かぶり、ぼけた縁、ファイルにAlphaがあるのにプレーヤー表示が誤る場合もまとめています。

動画を作ったら、最終的なWebページで受け入れ確認をする

AnimGenでWeb用素材を作るなら、有効なAlpha付きPNGから透過アニメーションモードで動きを生成し、使える範囲を切り出し、WebM Alphaとフォールバック用のPNGを一緒に書き出します。透過アニメーションの全体フローは入力と出力の境界を、走行・ジャンプの事例は生成と仕上げを説明しています。

最終確認の対象はダウンロードファイルだけでなく、実際のページのコンポーネントです。本物の背景に置き、最小対応ビューポートも確認してください。この記事のサンプル一式を出発点にするか、AnimGen Studioで自分の透過キャラクターを制作できます。

画像の詳細