短尺UI動画の最適化：poster/予約サイズ/優先度/自動再生のベストプラクティス（WebM/MP4）

UIの動きを動画で見せると理解が速くなります。ただし動画は重さと不安定さの両面リスクがあります。結論は予約サイズとposterでCLSを安定させ、自動再生の条件を満たしつつ、優先度の乱用を避けること。この記事のテンプレをそのまま使えば、安全に量産できます。

先に結論（運用ルール）

aspect-ratio で予約、posterは軽量（100KB目安）。
muted + playsinline + autoplay + loop、reduced-motion で停止。
オフスクリーンは一時停止。LCP候補のみpreload。
画質/容量は /compare と /compressor で最終確認。

要点（TL;DR）

WebM/MP4の二本立て、予約サイズ＋posterでCLSゼロ。
自動再生は無音＋インライン再生が必須条件。
優先度は最小限。preloadはLCP候補のみ1点に絞る（関連：画像優先度）。

1. なぜ“予約＋poster＋最小優先度”か

動画は初期描画で空白や押し下げを生みやすく、CLSや離脱につながります。CLSゼロ設計の原則を動画にも適用し、予約サイズとposterでファーストビューを安定させます。優先度は乱用するとネットワークが飽和し、他資産のTTFBやLCPを悪化させます。

2. 最短フロー（実務）

素材は WebM(VP9/AV1) + MP4(H.264) の2種を出力。
aspect-ratio と poster を設定し、CLSをゼロに。
muted + playsinline + autoplay を満たし、reduced-motionでは停止。
オフスクリーンは一時停止（IntersectionObserver）。
LCP候補のみpreload。詳細は優先度の記事を参照。

3. 実装レシピ（コピペOK）

3.1 エンコード（ffmpeg）

// Shell (ffmpeg)# エンコード例（PowerShell/ffmpeg）
# WebM(VP9) 30fps・可変ビットレート（CRFで品質指定）
ffmpeg -y -i input.mov -vf "fps=30,scale=iw:-2:flags=lanczos" -pix_fmt yuv420p -c:v libvpx-vp9 -b:v 0 -crf 30 output.webm

# MP4(H.264) 互換性重視 + ストリーミングフレンドリー
ffmpeg -y -i input.mov -vf "fps=30,scale=iw:-2:flags=lanczos" -pix_fmt yuv420p -c:v libx264 -crf 23 -movflags +faststart output.mp4

3.2 HTMLテンプレ

// HTML + CSS<!-- 予約サイズ + poster + 無音自動再生 -->
<div class="ui-mv">
  <video
    class="ui-mv__video"
    width="1280" height="720"
    muted playsinline autoplay loop
    preload="metadata"
    poster="/thumbs/feature-ui.jpg"
  >
    <source src="/anim/feature-ui.webm" type="video/webm" />
    <source src="/anim/feature-ui.mp4" type="video/mp4" />
  </video>
</div>

<style>
.ui-mv { aspect-ratio: 16/9; width: 100%; background:#f3f4f6; }
.ui-mv__video { width: 100%; height: 100%; object-fit: cover; display:block; }
@media (prefers-reduced-motion: reduce) {
  .ui-mv__video { animation: none !important; }
}
</style>
<!-- 予約サイズは CLS をゼロに保つ鍵（関連：/articles/cls-zero-images-ads） -->

3.3 Next.js クライアントコンポーネント

// TSX (Next.js)// Next.js 15: 短尺UI動画コンポーネント（オフスクリーンで一時停止）
"use client";
import { useEffect, useRef } from "react";

export function MicroVideo({
  srcWebm, srcMp4, poster, ratio = "16 / 9", autoPlay = true,
}: {
  srcWebm: string; srcMp4: string; poster: string; ratio?: string; autoPlay?: boolean;
}) {
  const ref = useRef<HTMLVideoElement>(null);

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

    // reduced-motion 対応：自動再生しない
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    if (mq.matches) { el.pause(); return; }

    // ビューポート外で一時停止
    const io = new IntersectionObserver(
      (ents) => {
        for (const e of ents) {
          if (!el) continue;
          if (e.isIntersecting) { if (autoPlay && el.paused) void el.play().catch(() => {}); }
          else { if (!el.paused) el.pause(); }
        }
      },
      { threshold: 0.25 }
    );
    io.observe(el);

    return () => io.disconnect();
  }, [autoPlay]);

  return (
    <div style={{ aspectRatio: ratio, background: "#f3f4f6" }}>
      <video
        ref={ref}
        className="w-full h-full object-cover"
        muted playsInline={true} autoPlay={autoPlay} loop
        preload="metadata"
        poster={poster}
      >
        <source src={srcWebm} type="video/webm" />
        <source src={srcMp4} type="video/mp4" />
      </video>
    </div>
  );
}

3.4 優先度（preload/fetchpriority）

// HTML<!-- LCP候補のみ慎重に preload/fetchpriority を使う（乱用しない） -->
<link
  rel="preload"
  as="image"
  href="/thumbs/feature-ui.jpg"
/>
<!-- 動画本体の preload は基本 "metadata" のまま。fetchpriority は画像向けの記事を参照。 -->

4. 応用と使いどころ

ヒーローの画角は <picture>のアートディレクションと同様に、縦横で別トリムを検討。
GIFからの置換は GIFの置き換え最短ガイドを参照。
サムネの静止画は OGP安全域と自動トリミングが便利。

5. 公開前チェック

// Checklist# 公開前チェック（短尺UI動画）
- 素材は WebM(VP9/AV1) + MP4(H.264) の2本立て（互換）
- 予約サイズ（aspect-ratio or width/height）と軽量 poster（<=100KB）
- 自動再生は muted + playsinline + autoplay、reduced-motion では止める
- オフスクリーン時は一時停止（IntersectionObserver）
- LCP候補のみ preload（乱用しない）。優先度は最小限（関連: 画像優先度）
- 画質/容量は /compare と /compressor で確認

6. まとめ

短尺UI動画は予約サイズ＋poster＋最小優先度が基本。自動再生の条件とオフスクリーン制御を満たせば、見た目も CWV も安定します。仕上げは /compare と /compressor で定量確認しましょう。

FAQ（よくある質問）

画像形式の基本方針は？（写真/スクショ/透過）

写真は AVIF / WebP（画質80–85%目安）、UIやスクショはPNG / WebP Lossless、単色ロゴはSVGが基本です。実装の詳細は srcset/sizes設計ガイドとスクショ最適化を参照してください。

圧縮しても画質を落とさないコツは？

実表示幅に合わせたリサイズ → 過大ダウンロードを防ぎ、srcset/sizes を実描画幅に一致させます。画質は写真で 80–85% を起点に、ノイズやエッジを目視確認。仕上げは /compare で Before/After を見比べるのがおすすめです。

CLSを悪化させない画像の置き方は？

すべての画像に width/height（または親に aspect-ratio）を与え、広告・埋め込みは予約サイズを先に確保します。詳しくは CLSゼロ設計ガイドを参照。

Xで共有 LINEで共有 Facebookで共有記事リンク