【Web制作者必見】AIで静止画を動画に。サイトの離脱率が劇的に下がるかもしれない…

急速に進化するAIの世界

最近のAIの進化って、本当にすごいじゃないですか。皆さんもお仕事などでAIをたくさん活用されていることと思います。一般的には文章を生成するAIが一番よく使われていたり、あるいはデータ処理やプログラミングといった領域でAIの力を借りることが多いかもしれませんね。

プロ仕様！内部SEOセルフチェックツール

あなたのウェブサイトが検索エンジンで上位表示されるために重要な内部SEO対策。このセルフチェックツールを使えば、簡単な質問に答えるだけで、サイトの改善点が見つかります。

あなたのホームページのSEOは健康度はどれくらい？ 今すぐチェックして、アクセスアップを目指しましょう！

今すぐチェックする >

文章生成だけじゃない！動画生成AIの可能性

でも、皆さんも薄々気付いていると思うんですが、AIの進化はそれだけにとどまりません。ChatGPTに画像作成機能が登場したように、AIは様々な領域でその能力を高めています。そして今回の主題なのですが、実は動画を生成するAIも、相当発達してきているんです。

これはWebサイトにも活かせるんじゃないかな、ということで一つ実験をしてみました。その結果が結構面白いというか、すごい感じになったので、今回はその内容について詳しくお伝えしていければと思います。

「Webサイトの写真を動かせたら面白いんじゃないか？」

今、実験の元となるオフィシャルのWebサイトを表示しています。サイトを見ていくと、挿絵のような形で画像が使われていることがありますよね。今回、実験してみようと思ったのが、この一枚の画像です。

これは結構昔に撮ったもので、もう10年ぐらい前に撮影した写真ですね。いい感じの写真なので未だに利用させてもらっているのですが、これをAIの力で動かせたら面白いんじゃないか、と考えたのが今回の実験の始まりです。

例えば採用サイトなどで、素敵な写真はあっても、動画まではコストが高くて撮れていない、といったケースはよくあると思います。そんな時に、もし生成AIを使って静止画を手軽に動画にすることができたら、「もう写真撮影だけで、ある程度いいんじゃないか」みたいな、そんな状況も生まれたりするんじゃないか。そんな期待を込めて、実験してみることにしました。

動画生成AI「KlingAI」で実験開始

早速、実験を開始してみたいと思います。まずは先ほどのWebサイトに掲載していた会議風景の画像を、あらかじめPCに保存しておきました。

今回利用した動画生成AIは「KlingAI」（クリンAIと読むのでしょうか、正式な読み方はまだ分からないのですが）というサービスです。

Kling AI

Kling AI, tools for creating imaginative images and videos, based on state-of-art generative AI methods.

klingai.com

Image to Video機能を使ってみる

このKlingAIの中には、画像や動画、さらにはサウンドまで作れる色々なメニューがあるのですが、今回は「ビデオジェネレーション機能」の中にある「Image to Video」というメニューを使っていきたいと思います。

まだ完全に使いこなしているわけではないのですが、この機能は、例えばスタート地点の画像とゴール地点の画像を設定すると、その間を滑らかに移り変わっていくような動画も作れるようです。今回はスタート地点の画像だけを設定して、AIに動きを生成してもらうことにしました。

AIへの指示（プロンプト）はこんな感じ

最初に僕が考えたのは、画像の中に女性がいらっしゃるので、その方の髪の毛をふわっと揺らしたり、あとは手前に写っている葉っぱを少し揺らしたり、そんな動きでした。室内なので風が吹くのも少しおかしいですけど、そのくらいなら自然に動かせるんじゃないかな、と。

あとは、真ん中でバインダーかタブレットのようなものを持っているので、それを受け渡しているような感じにできたら面白いんじゃないかと考えました。

そこで、AIへの指示、いわゆるプロンプトとして、「葉っぱと女性の髪の毛を揺らす」「バインダーを受け渡すように手を少しだけ動かす」と入力してみました。あまり大きく動かすと違和感が出てしまうかもしれないので、「ちょっとだけ動かす」というニュアンスで指示を出したわけです。

いざ再生！想像をはるかに超えた驚きの結果

確か有料プランに課金していたと思うので、その機能を使って動画を生成しました。そして、こちらで出来上がった動画がこちらです。

これ、めちゃくちゃすごくないですか？

正直なところ、ちょっと想像以上でした。僕は「葉っぱと髪の毛だけ揺らしてくれれば良いかな」くらいに思っていたのですが、出来上がった動画では、頭が動いたり、なんなら奥の人物が立ち上がったりといった、より複雑な動作が生成されていたんです。

プロンプトを超えて”察して”動くAI

少し残念だったのは、手前の葉っぱが全く動いていない点で、ここは若干プロンプトを無視されてしまったようです。しかし、指示したバインダーの受け渡しはちゃんとできていますし、それに合わせて「これは会議の様子だな」とAIが察知してくれたのか、登場人物が頷いたりする動作まで追加されていました。

髪の毛の揺れまで精巧に再現

特に注目していただきたいのが、女性の髪の毛の動きです。上半身の動作に合わせて頭も自然と下がり、逆に物を受け取る時には上がったりするのですが、それに伴って髪の毛が少し遅れて揺れる、といった物理的な動きまで、かなり精巧に再現されていると思います。

これなら、静止画を動画に変換してWebサイトで利用する、というアイデアは十分実用的だと言えるでしょう。

生成した動画を実際にWebサイトへ埋め込んでみた

さらに実験を続け、これを実際に先ほどのWebサイトに埋め込んでみたらどうなるのか、というところまでやってみたいと思います。元のサイトではこのように画像が固定された状態で表示されています。これを、今からコードを編集して動画に差し替えてみます。

結構いい感じじゃないですか。サイトの要素が全部動いていると、さすがにガチャガチャして見づらいかもしれませんが、一部分だけが動くことで、訪問者の視線を誘導したり、より効果的に情報を伝えたりすることができそうです。この動画には確実に目がいくと思うので、非常に有効なんじゃないかと思います。

これが元の静止画の状態で、これを動画にすると、こんな感じになります。ご覧いただいた通り、これは結構実用化できるレベルなんじゃないかと思います。

無視できない注意点：動画ファイルの重さ

ただ、もちろん良いことばかりではありません。注意点を挙げるとすると、やっぱり動画はファイルが重たい、という点です。

今回、MPEG-4形式でダウンロードした動画の重さは、大体7～8MBぐらいありました。元の画像は、特に軽量化していたこともあって20KBとか30KBとか、それぐらいのサイズだったので、ファイルサイズが数百倍になっている計算です。

サイト内の色々な場所に、こういった重たい動画が埋め込まれていると、ページの読み込み速度自体がかなり遅くなってしまう可能性があります。なので、何かしらの工夫をして利用する必要があるでしょう。

重さ対策のアイデア

これは動画全般をWebサイトに載せる時に言えることですが、例えば、最初は静止画を表示しておいて、ユーザーが画像にオンマウスした瞬間に動画を再生するようにする、といった方法が考えられます。

つまり、最初に軽い静止画をまず読み込ませておき、その裏側で重い動画を読み込み始める。そして、ユーザーがその箇所までスクロールしてきて、画像にマウスカーソルを合わせた時にだけ、ちょっと動く、といった見せ方です。そういったエンジニアリング的な処理を組み合わせることで、表示速度の問題を解決できるかもしれません。

あるいは、ここはページの重要な部分だから、多少重たいファイルを使ってでもリッチなビジュアルで見せていきたい、といった戦略的な判断で利用するのも良いと思います。

まとめ：Webサイトの新たな表現としての動画生成AI

以上が、今回「動画生成AIは非常に使える」というところと、Webサイトをより魅力的に、そしてお客様に情報を伝えるための一つの手段として、「これまで画像だったものを動画に変える」という選択肢もあるんだよ、ということをお伝えしたかった実験の内容です。

動画は重たいというデメリットはありますが、インターネット回線の速度も年々向上していますし、データ通信量が使い放題の方も増えています。そのため、動画に対する技術的なハードルは昔に比べて下がっていると思うので、チャレンジしてみる価値はあるのではないでしょうか。

広がるAI動画活用の可能性

この動画では紹介しきれませんでしたが、他にもWebサイトの最上部に表示されるメインビジュアルの画像が動いたら面白いよね、とか、様々な使い方が考えられます。今回は実際に撮影した写真を動かしましたが、例えば素材サイトの画像だと、どうしても「素材っぽさ」が出てしまうことがありますよね。それを動画にすることで、よりオリジナリティを出して良く見せていく、といったやり方も考えられると思います。

是非、この実験が面白そうだと思った方は、動画生成AIにチャレンジしていただければと思います。

プロ仕様！内部SEOセルフチェックツール

あなたのウェブサイトが検索エンジンで上位表示されるために重要な内部SEO対策。このセルフチェックツールを使えば、簡単な質問に答えるだけで、サイトの改善点が見つかります。

あなたのホームページのSEOは健康度はどれくらい？ 今すぐチェックして、アクセスアップを目指しましょう！

今すぐチェックする >