Webサイトや動画で使える「動く背景素材」は意外と探すのが面倒です。
しかも、イメージに合うものがピタッと見つかることはほとんどありません。
だったら、自分で作ればいい。
今回は、WebGLでクラウド風のアニメーション背景をその場で生成し、
そのまま素材として保存できるツールを作ってみました。
Cloud Drift WebGL Background｜もやもやクラウド背景ジェネレーター（無料）
WebGLで動くクラウド風背景をその場で生成し、PNG素材として保存できる無料ツール。完全ローカル処理で外部送信なし。ブログ・動画・Web背景に使えるもやもやアニメーションを簡単に作成できます。
b.aries67.com
2026.04.27
ツール概要
- WebGLでクラウド背景をリアルタイム生成
- 色・速度・濃淡などを調整可能
- PNGとしてそのまま保存
- 完全ローカル処理
実際の生成例
16秒で生成したクラウド背景。
そのまま動画素材として使えます。
使い方
- パラメータを調整
- 気に入った状態を作る
- スクリーンショット保存 or 録画
Codexで作ったらどうなったか
今回のツール、実はほぼ手書きしていません。
最初のプロンプトを投げてから、
- 初回生成：約3分
- 機能追加：数回のリクエスト
- 合計作業時間：約10分
で、ここまでのアプリが完成しています。
実際に使ったプロンプト（初弾）
WebGLを使って、ブラウザで動くクラウド風の背景アニメーションを生成する単一HTMLアプリを作ってください。
色・速度・スケール・透明度などをUIから調整できるようにする。
ダークテーマで中央にプレビュー、PNG保存機能を付ける。
外部ライブラリなしで動作させる。
出てきたもの
- 単一HTML（約750行）
- WebGLシェーダー込み
- UI込み
- エラーなしで一発動作
ここまでが、ほぼ一撃。
消費量
- 合計リクエスト：3回程度
- 所要時間：約10分
- 消費：約10%
小さめツールなら週に複数本いける感覚
SVGも試したが…
SVGでも同じことをやろうとしましたが、
- ループが難しい
- 表現が制限される
結果として、
WebGL → 動画素材化
が現実的な落としどころでした。
現状の制約
現在はループ素材としては完全ではないため、
- 動画編集でループ化
- または今後アップデート対応予定
としています。
まとめ
素材を探す時代から、
素材を“その場で生成する”時代に変わってきました。
今回のようなツールも、
10分程度で実用レベルまで到達します。
無料ツール集 ─ 人生を少し楽にする道具箱
インストール不要のブラウザツールから、ローカルで動くスクリプトや小さな便利ツールまで。主に、このブログで紹介したツールをまとめて置いてあります。
b.aries67.com
2026.03.31
