概要

• 手描きアニメ のような「 jitter（ジッター）」効果の仕組みを解説
• SVGフィルター を使い、静止画に動きを加える方法
• feTurbulence と feDisplacementMap の組み合わせによるエッジの歪み
• JavaScript によるパラメータのアニメーション制御
• Web上 で再現するための実践的な手順

手描き風「ボイリング」エフェクトの仕組み

• アニメやイラストで見られる 「ボイリング（boiling）」 や 「ラインボイル（line boil）」 と呼ばれる効果
• 同じフレームを 何度も手描き し、微妙なズレを重ねて動きを演出
• 静止画でも動きを感じさせる、視覚的に魅力的な表現手法
• ARTEドキュメンタリー のピザの材料紹介アニメーションにも採用例
• 本記事では、 Web上での再現方法 にフォーカス

エフェクトの分解と再現方法

• 効果の要素を2つに分解
  • エッジの歪み ：輪郭をなめらかでなく、 有機的に揺らす 表現
  • アニメーション ：歪みパラメータを 時間経過で変化 させ、動きを生み出す
• Webでは SVGフィルター を活用
  • feTurbulence でノイズ（乱流）テクスチャ生成
  • feDisplacementMap でノイズを元画像に適用し、 ピクセル単位で歪ませる
• SVGフィルターの基本構成
  • ノイズ生成→画像歪み→SVG要素に適用
  • サンプルコード：

    <svg width="400" height="400" viewBox="0 0 400 400">
      <defs>
        <filter id="distortionFilter">
          <feTurbulence type="turbulence" baseFrequency="0.03" numOctaves="2" seed="1" result="noise" />
          <feDisplacementMap in="SourceGraphic" in2="noise" scale="20" xChannelSelector="R" yChannelSelector="G" />
        </filter>
      </defs>
      <image x="0" y="0" width="400" height="400" href="/image.jpg" filter="url(#distortionFilter)" />
    </svg>
    

JavaScriptによるアニメーション制御

• SVGフィルターの属性 をJavaScriptで定期的に更新
• 例： baseFrequency や scale などの値を、 100msごと に変化
• オフセット配列（例：[-0.02, 0.01, -0.01, 0.02]）を用いて 揺れをループ
• スライダーで 揺れの強さ を動的に調整可能
  • 0で揺れ無し、1で最大揺れ
• SVG画像やラスター画像 どちらにも適用可能

実践と応用

• 調整次第で、微細なジッターから大きな歪みまで表現可能
• やりすぎ注意 ：過剰な歪みは元画像が判別不能になる場合も
• ARTEシリーズ など、実際のアニメーション作品でも活用例多数
• SVGフィルター＋JavaScript で、 静止画に命を吹き込む 技術

まとめ

• 「ボイリング」効果 は、 ノイズ生成（feTurbulence） と ピクセル歪み（feDisplacementMap） の組み合わせで再現
• JavaScript でパラメータを動的に変更し、 手描き風の動き を実現
• SVGフィルター を使えばWeb上でも 手軽に実装可能
• 微調整が肝心 ：さりげない揺れで 温かみや個性 を演出
• 創作の幅が広がる、Webアニメーションの新たな手法