今回は、OBS StudioやStreamlabs Desktopなどの配信画面にHTMLソースファイルを追加するだけで、PNG画像やAPNGなどのアニメーションデータ（APNG）がウゴウゴとゆらゆら動くようになるを制作してみました。
次章でダウンロードできるファイルと使うと、昔懐かしなコンテンツであったようなウゴウゴするエフェクトを追加できます。
下記の動画では、実際に本記事でのデータを使ったサンプルイメージ動画を作成したので、それが参考になれば幸いです。
動画の中央と、右下で、ウゴウゴと画像ファイルや風船で浮いている猫さんキャラクターのAPNGアニメーションファイルに、ゆらゆらしたエフェクトがかかっています、
本記事でダウンロードできるHTMLでは、動画の右下くらいの感じで抑え気味にゆらゆらアニメーションを追加しています。
ウゴウゴと「画像や動画（APNG）が揺らぐ」アニメーションファイルのダウンロードと準備
ウゴウゴと「画像や動画（APNG）が揺らぐ」アニメーションファイルのダウンロードは下記になります。
一般的なSVGの機能を用いて、PNG画像等に波打つ視覚効果を付与できるHTMLです。
ファイルをダウンロードしたら、アニメーションをつけたいファイル名を「yurayura.png」というファイル名に変更して、元々ダウンロードしたファイル内にある、「SAMPLE」と書かれた画像と入れ替えてください。
これだけで準備が完了します。
かならず、「yurayura-animation.html」と「yurayura.png」が、同じフォルダに格納されていることを確認してください。
ウゴウゴと「画像や動画（APNG）が揺らぐ」アニメーションファイルを読み込む
各OBSに本記事からダウンロードしたHTMLファイルを読み込む方法は簡単です。
OBS Studioの「ソース」エリアから「+」ボタンを押して「ブラウザ」を選択
「ローカルファイル」にチェックマークをつけてHTMLファイルを指定する
読み込んだ後は、自動的にアニメーションが始まります。
ウゴウゴと「画像や動画（APNG）が揺らぐ」アニメーションファイルを設定する
ウゴウゴと「画像や動画（APNG）が揺らぐ」アニメーションファイルは、一度、拡張子を「.txt」ファイルにすることで、揺らぎ具合を変更したりすることが可能です。
ファイル内にある、下記の部分を変更して設定することが可能になっています。
// 利用者が変更できる要素と値
baseFrequency="0.02" // 値を大きくすると「波の密度」が細かくなります。
numOctaves="2" // 値を増やすとディテールが細かくなります。 ※あまり増やすと書林負荷が大きくなります。
scale // 画像の歪みの強さ。数値を上げるとゆらぎが大きく、下げると繊細な揺らぎになります。
--animation-speed // アニメーションの切り替え速度です。数値を小さくすると動きが速く、大きくすると、ゆっくりになります。ゆらゆらアニメーションは上手く利用すれば動画コンテンツの制作にも役立ちます。
本記事でダウンロードできるHTMLファイルは、上手く利用すれば、このウゴウゴと動くゆらゆらアニメーション制作にも役立てることが可能です。
もともと、OBSソフトウェアは生放送などのライブ配信向けのアプリケーションで構成されています。
その中の機能にはスイッチャー的な切り替え機能などが用意されているので、PNGやAPNGなどの画像コンテンツを組み合わせて切り替えていけば、動画コンテンツの制作にも活用できます。
また、配信画面をレトロ的な感じにするときに、昔のブラウン管テレビ風のエフェクトを追加することによって、時代感を演出することが可能になります。
筆者のところでは、特に年末年始、「こたつ」に「みかん」、「ブラウン管テレビ」など、昭和感を出した背景をデザインしたときに使ったりしたことがあります。
これら、本記事の内容が、配信活動に役立てば幸いです。
最後まで読んでいただき、ありがとうございました。
