動画素材をWeb上だけで加工する方法
サイトのトップページなどにただの背景ではちょっと味気ないものです。折角のウェブページなのですから、動きのあるものを取り入れてみたいものです。そこで、今回は動画素材を利用した動画背景の作り方についての方法をご紹介したいと思います。
これが全部フリー素材、フリーWebで完結するというのが今回の肝です。
動画素材をダウンロードする
私は「無料の動画サイト|動画AC」というサイトを利用しました。サイトには「高品質な動画が無料でダウンロードできます。加工や商用利用もOK!」との記述がありますので、安心して使用できますね。

動画をアニメーションGIFへ変換
ダウンロードしただけの動画ファイル(.mp4)だけでは動画背景として使えませんので、アニメーションGIFへと変換を行います。
このオンラインで動画からGIFへと変換してくれるサイトが「Media.io」です。感覚的に変換を行うことができ、優れたサイトです。

リサイズを行う
動画素材をアニメーションGIFに変換したら、今度はサイズの変更も行えたらと思いませんか?そんな願いを叶えてくれるのがこのサイト「I❤IMG」です。
こちらも大変便利なサイトです。

画像の切り抜きをしたい場合
このサイト「I❤IMG」ではなんと「画像のサイズ変更」だけではなく、「画像の切り抜き」や「画像の圧縮」といった機能までついています。
「画像の切り抜き」を行いたい場合はこちらから。

画像の圧縮をしたい場合
「画像の圧縮」を行いたい場合はこちらから。

まとめ
いかがでしたでしょうか?
たった3ステップで、動画素材を自分の思ったサイズの動画背景に変換することができました。これであなたのサイトも華やかになったはずです。
ちなみに私の使っている動画背景はスマートフォンでも重くないように「400×150」のサイズで作成しています。fpsの設定もあったと思いますが「30fps」程度で良いでしょう。

最後までお読みいただき有り難うございました。
ではでは、参考までに。

コメント