UIアニメーション キャプチャ最適化
UIアニメは “雰囲気” ではなく 機能理解と操作予測 を支援する資産です。再撮影や微変更で差分が追えないとドキュメントの信頼性が下がります。本記事は キャプチャ品質・再現性・容量 を同時最適化するための標準フローです。
要点
- 背景統一 + 最小領域クロップで “余白差分” を除去。
- fps 正規化でコマ冗長を削減、視覚的滑らかさは30fpsで十分。
- ループ境界は reverse 連結で自然化、クロスフェードは極力避ける。
- pixel + SSIM の二軸で回帰検出、自動閾値
SSIM≥0.97/ diff <1.5%。 - 命名規則とメタJSONで検索性・一括差し替えを保証。
1. 初期設計
まず “何を伝えるアニメか” を 1 文で書き出し、不要装飾を除去します。背景は #121212 (ダーク) か #ffffff (ライト) の二択に固定。コンポーネント境界から 8px 以内に収まる矩形を計画し、操作シーケンスを 2〜3 秒に圧縮します。
2. キャプチャ
# macOS QuickTime + 背景統一 (例: ダーク)
# 1) ブラウザで強制テーマ & 余白最小化
body { background:#121212; }
# 2) QuickTime 画面収録 (領域指定) 60fps 原本確保
# Windows は PowerToys / Xbox Game Bar 等で矩形収録Retina ディスプレイでもブラウザズーム 50% で実質 1x ピクセルを確保し、後処理なしで “表示と一致” を担保します。
3. 前処理 & トリミング
# 60fps -> 30fps + 最小クロップ + ループ2.2秒抽出
ffmpeg -i raw.mov -vf "fps=30,trim=0:2.2,setpts=PTS-STARTPTS" -an cut.mp4
# 差分で余白自動算出 (擬似: python + Pillow)
python detect_crop.py cut.mp4 > crop.txt # 出力: crop= x,y,w,h
ffmpeg -i cut.mp4 -filter:v "crop=w:h:x:y" tight.mp4
# ping-pong 化 (hover往復など)
ffmpeg -i tight.mp4 -filter_complex "[0:v]split[v1][v2];[v2]reverse[r];[v1][r]concat=n=2:v=1:a=0" ui-loop.mp4差分ベースで不要余白を除去することで、エンコード対象画素を 20〜40% 削減でき、後段のビットレートも比例して減少します。
4. 差分検証
// 差分検証 (pixel + SSIM 擬似コード)
import { compare } from 'ssim';
import pixelmatch from 'pixelmatch';
const base = await load('baseline.png');
const latest = await load('latest.png');
const { mssim } = compare(base, latest);
const pxDiff = pixelmatch(base.data, latest.data, diffOut, base.width, base.height, { threshold:0.1 });
const ratio = pxDiff / (base.width * base.height);
if (mssim < 0.97 || ratio > 0.015) throw new Error('regression');pixelmatch だけだと “意図したUI変更” まで検出されノイズ化します。SSIM を併用し構造変化を閾値上で許容する二段構えが安定。
5. 命名規則とメタ
// 命名規則 (例)
// ui-{component}-{state}-{variant}-{loop?}.{ext}
// component: button / modal / tooltip
// state: hover / open / loading
// variant: primary / danger / subtle
// ext: mp4 / webp
// 例: ui-button-hover-primary.mp4命名は検索 + 差分自動化 + 例外レビューのキーです。pull request で ui-* 差分を grep し、想定外の再撮影有無を判断できます。
6. 埋め込み
<!-- HTML 埋め込み (ポスター + 自動再生) -->
<video
src="/anim/ui-button-hover-primary.mp4"
poster="/anim/ui-button-hover-primary-poster.jpg"
autoplay muted loop playsinline
width="420" height="240"
aria-label="ボタン hover 状態の視覚的遷移"
></video>自動再生は “理解促進” が目的であることを説明テキスト/ARIA で補足し、動きが過敏な利用者には prefers-reduced-motion で停止オプションを提供するのが望ましいです。
7. 公開前チェック
- 背景/余白: 設計通り最小。
- fps: 過剰でない。
- ループ境界: ジャンプなし (ping-pong 成功)。
- 差分: 閾値内。
- 命名: 規則準拠、poster も存在。
8. まとめ
“背景統一 → fps 正規化 → 余白クロップ → 差分検証 → 命名テンプレ” の一列化で UI アニメ資産は 再現性と軽量性 を両立します。さらに 短尺ループ軽量化 の手法と組み合わせると最終出力のバラツキを抑えられます。
FAQ
FAQ（よくある質問）
1画像形式の基本方針は？（写真/スクショ/透過）
写真は AVIF / WebP（画質80–85%目安）、UIやスクショはPNG / WebP Lossless、単色ロゴはSVGが基本です。 実装の詳細は srcset/sizes設計ガイド と スクショ最適化 を参照してください。
2圧縮しても画質を落とさないコツは？
実表示幅に合わせたリサイズ → 過大ダウンロードを防ぎ、
srcset/sizes を 実描画幅に一致させます。画質は写真で 80–85% を起点に、ノイズやエッジを目視確認。 仕上げは /compare で Before/After を見比べるのがおすすめです。3CLSを悪化させない画像の置き方は？
公開日: 2025-09-07編集: gazou-compressor.jp