動く背景
コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
[itemlink post_id=”9233″]
動く背景
背景がゆっくり変化するだけで、ページは静止した紙から「生きている画面」に変わります。このページは、グラデーションの時間変化、流体シェイプ、幾何学模様、雪・桜・ホタル・紙吹雪の季節演出、波形のバリエーションまで、16種の背景アニメーションを一気に揃えたデモ集です。SVGを出力してくれるジェネレータの紹介も含みます。
背景動画ほどの重さを背負わずに空気感を出せるのがCSS/SVG/canvas系の強みで、季節演出はキャンペーンLPなど期間限定の企画と特に相性が良い分野です。
ファーストビューにインパクトを持たせたい時、サイト全体の空気感を伝えたい時、背景が動くとインパクトは大きいです！
１６種類のアニメーションを作ってみた
背景色が時間変化
流体シェイプ
SVG形式で流体シェイプを出力してくれるジェネレータ
デザインカンプを作るとき、お手元のPCにPhotoshopやIllustratorがないとき、SVG形式で流体シェイプを生成してくれるジェネレータはいかがですか？
Blobmaker
色、形を指定して流体シェイプを作るジェネレータです。 SVG形式でダウンロードとソースコードの出力が可能です。
blobs
色、グラデーション、パターン、画像、枠線などを指定して、流体シェイプを作るジェネレータです。 こちらもSVG形式でダウンロードとソースコードの出力が可能です。
幾何学模様
js詳細版
js簡易版
季節の演出
雪が降る
桜が散る
ホタルが舞う
紙吹雪が舞う
波打つシリーズ
1つ重なり「なし」バージョン
1つ重なり「あり」バージョン
複数重なり「なし」バージョン
複数 重なりなし「あり」バージョン
波の形をSVG形式で出力してくれるジェネレータ
上記の波はJavaScriptを利用してアニメーションを作っています。 デザインカンプを作る時に、波の形を再現するのは意外に手間だったりしませんか？ そんな時はCustom Shape Dividersを使うと便利です。
上部にあるバーやボタンで形や色などの項目を設定してします。 設定に合わせてプレビュー画面の白い波が変化します。 最後に、雲の形をしたダウンロードボタンを押して出力します。
波線シリーズ
1つ
複数
コーヒーを淹れているシーン
粒子が集まってタイポグラフィーを形成する
実務メモ（2026年追記）
この系統で実務上いちばん効くのは負荷の管理です。特にcanvasで粒子を大量に動かす演出（雪・紙吹雪など）はモバイルの発熱・バッテリー消費に直結するため、粒子数を欲張らないことが品質になります。また背景が動く以上、その上に載る文字の可読性は常に点検対象です。半透明のオーバーレイを一枚敷くだけで、演出と読みやすさは両立できます。
- 動きはあくまで脇役。本文を読む邪魔になる速さ・コントラストの変化は避ける
prefers-reduced-motionで止められる作りに（パーティクル系は特に）- 季節演出は「外す日」を決めてから入れる（出しっぱなしが一番寂しい）
- より強い没入感が必要なら背景動画と使い分けます
次回の予定
ビジュアル要素を押し出して、コンテンツごとに世界観を変化させてたい時に活躍する「エリアの動き」に挑戦してみます ＼＼٩( ‘ω’ )و //／／
