【SitePal】顔写真を表情アニメーションさせて喋らせるWebアプリとは?!

  • 2016年11月30日
  • 2017年9月30日
  • 3DCG

ブラウザで使えるSitePalという顔写真を表情アニメーションさせて喋らせることができるWebアプリを紹介します。ビジネス用なので有料ですが無料で遊べます。また、Windows 10で動画キャプチャーができる無料のWebサービスも紹介?

SitePalとは?

こんな感じになります。日本語も選べましたが今回は喋らせることができませんでした。詳しく調べれば日本語で喋らせることもできるかと思います。
PhotoFace by SitePal on Welcome to ZEENA MONO World

サイトに行く

以下のサイトに行きます。
http://www.sitepal.com/howitworks/
PhotoFace

右上の「FREE TRIAL」ボタンをクリックします。

PhotoFace

いきなり右の女性が英語で喋ります。うるさく感じたら、下の四角いボタンをクリックして止めます。マウスカーソルを女性の周りでグルグル動かすと視線が追従します。

5つのステップに分かれていますが、順番に進めればOKです。「LET’S START」ボタンをクリックします。

顔写真をアップロード

PhotoFace

2Dのアバターっぽいイラスト顔が表示されるので、「3D Photoface」タブをクリックします。

PhotoFace

左側のパネルのトップに「Create Your Own」ボタンがあるのでクリックします。

PhotoFace

左下の「I agree to…」のチェックボックスをクリックしてチェックマークを入れ、その下の「Browse」ボタンをクリックし、ファイル選択画面が表示されるので、今回使う顔写真を選んで開きます。顔写真はいわゆる証明写真のような正面のバストアップで無表情、フラットな写真が好ましいです。

この時点では左下の入力窓にファイル名が表示されるだけです。「Next」ボタンをクリックします。

PhotoFace

顔写真の下にある一連のボタンをクリックして、顔のアップになるよう調整します。「Next」ボタンをクリックします。

顔写真を表情アニメーションさせる

顔のパーツの位置をSitePalに教えるために、右の男性の顔写真を参考にして、目、耳、鼻、口、アゴの位置に「+」マークを移動します。以下は移動後の状態です。

PhotoFace

「Next」ボタンをクリックします。

PhotoFace

輪郭を、右の男性の写真を参考にしてドットを動かして囲みます。右側の「Do you want to…」の下のラジオボタンは「Yes」側でOKです。背景は後で付けます。「Next」ボタンをクリックします。

PhotoFace

顔のアニメーションが始まります。マウスカーソルに視線が追従します。右のパネルで、Genderを「Female」にし、その下の入力窓にモデルの名前を入力します。左下の「Preview」ボタンをクリックすると喋ります。音声が出るので音量に注意してください。

PhotoFace

右下の「Save」ボタンをクリックして、状態を保存し元の画面に戻ります。

PhotoFace

右のアニメーション顔の下にあるボタンで顔の大きさや位置を調整します。ここまででステップ1が終了です。

ステップ2以降を実行する

ステップ1と同様にして、ステップ2以降を下のツールバーをクリックしながら実行します。

ステップ2は「Accessories」になっています。以前はたしかサングラスのコーディネートができたような気がしますが、今回は「Expressions」タブしか使えませんでした。表情を8個のプリセットから選べて変顔が作れます。

PhotoFace

ポートレートでは変顔は使わないので「None」を選んでステップ5まで終わらせると以下のようになりました。

PhotoFace

ブログにプレーヤーを埋め込もうと思い、右端の「Embed」をクリックすると以下のメッセージが表示されました。

PhotoFace

どうもユーザー登録が必要なようです。ユーザー登録は元のSitePalのページのトップメニューの「Pricing」をクリックすると以下の画面になり、ここから有料パッケージを選んで「Register」を行うようです。

PhotoFace

今回は登録は止めておきます。使う必要が生じたら検討したいと思います。

以上でSitePalの紹介を終了します。

Adobe Premiere Elements 15|ダウンロード版|Win対応

まとめ

プレーヤーをブログに埋め込みたかったのですが、ユーザー登録が必要なので諦めて、プレーヤー画面を動画キャプチャーしてYouTubeにいったんアップロードして、その動画をYouTubeの共有機能を使ってブログに埋め込みました。それが記事のトップで紹介している動画です。

Mac用の動画キャプチャーソフトは持っていますが、Windows 10用は持っていません。Mac用は有料でたしか7,000円くらいしたと思いますが、今回の記事のためにWindows用の有料ソフトを買うのももったいないと思ったので、無料でWindows 10で使えるソフトを探したところ見つかりました。

今回使ったのはApowersoftのブラウザから呼び出すタイプで、最初にWindowsにデバイスドライバか常駐ソフト的なモジュールを自動的にインストールしますが、以後は簡単な操作で動画をキャプチャーできて、.mp4形式で自動的に保存されます。これをYouTubeにアップロードしてブログに埋め込みました。

以下のサイトに行きます。
https://www.apowersoft.jp/free-online-screen-recorder
PhotoFace

録画するエリア指定もマウスドラッグで簡単にできます。Mac版の有料ソフトと比較しても実用上は同等の機能と言えます。有料ソフトはいろいろなことができるので応用が利きますが、通常の作業ではこれで十分かと思います。

マイクを切っていても(マイクが無くても)Windowsのシステム/アプリケーションが出す音声は記録され、YouTubeにそのままアップロードすれば音声付きの動画になります。
PhotoFaceミニプレーヤーが表示されるので、動画を確認してから右下の共有アイコンをクリックします。

PhotoFace

アニメーションGIFでも保存できるので、そういった用途には便利かもしれないですね。

YouTubeへのアップロードは結局ファイルエクスプローラで目的のファイルを探して、YouTubeのアップロード画面にドラッグ&ドロップしました。メニューから直接アップロードする方法があるのかもしれないですが現時点ではわかっていません。ファイルの場所はポップアップが表示されて見れます。

2Dの顔写真でこのくらいのことができれば、わざわざ3Dキャラクターを使わなくても応用ができると思います。もう少し選択できるバリエーションを増やしてもらえるとありがたいのですが・・・

【ポートレート】ブラウザで使える2D写真ツールで仕上げる?!

ではでは、きらやん