イラスト・オブジェクトの動き

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

イラスト・オブジェクトの動き

イラストやオブジェクトを動かす方法を、GIF・APNG（アニメーションPNG）・JavaScriptでの発火制御・SVGアニメーションという4系統で比較検証したページです。線が描かれていくSVGの手書き風アニメーションまで、静止画に命を吹き込む選択肢を横断しています。

同じ「動くイラスト」でも、形式によって画質・容量・制御性がまったく違います。この違いを知っていると、デザイナーから素材を受け取ったときの判断が速くなります。

「イラスト・オブジェクトの動き」は直感的に作成できるジェネレータを使用したGIFアニメ、PNGアニメ、SVGアニメで簡単に表現できます。

GIFアニメーション

PNGアニメーション（APNG）

PNGアニメーション（1度だけ動く）

PNGアニメーション（ループして動く）

PNGアニメーション（hoverすると動く）

JavaScriptと組み合わせて動かすきっかけを設定する方法

SVGアニメーション（Vivus.js）

イラストとテキストが複数あるSVGアニメーション

SVGアニメーションを使い、手書き風アニメーションを実現

以上で「イラスト・オブジェクトの動き」編は終わりです。実装パターンを覚えたら、実践編で実装課題に取り組むのがおすすめです。

実務メモ（2026年追記）

現在の形式選びの地図はこうです。透過付きのアニメ素材はAPNGかアニメーションWebP、ベクターで軽く緻密に制御したいならLottie（JSON形式のアニメーション）が主流の選択肢に加わりました。SVGの線画アニメーションは今もCSSのstroke-dasharray / stroke-dashoffsetだけで実現でき、手書き風の温かみを出す手法として現役です。どの形式でも、採用前にファイルサイズを比較する習慣が保守を楽にします。

• GIFは色数と容量の面で最も不利。今は「動けば良い」用途以外では選ばない
• ループアニメは動き続ける前提。prefers-reduced-motionでの停止を
• 装飾のイラストにはaria-hidden="true"、意味があるなら代替テキストを
• 背景全体を動かす系統は動く背景で扱っています