AI x 音声 x Live2DをWebアプリに統合

AIに表情豊かなAIアバターを搭載

担当領域: プロダクトデザイン、UI/UXデザイン、開発

弊社ではAIにどのようなインタフェースを搭載したら良いか、という議論が最近多く交わされるようになりました。作るもの、使うお客さんによって、AIと一言で言っても、AIを使った機能を搭載する上でインタフェースはAI自体と同じくらい重要なテーマと私たちは考えています。

3D、2D、色々なアバターインタフェースを使った試作を行う中で、私たちが特にAIやWebサービスと相性が良い、使いやすい、作りやすい、と思ったのがLive 2Dです。

Live2Dとは、２次元のイラストを多層的に組み合わせ、各層にメッシュを適用して動かすことで、3Dのようなリッチな表現を実現することができるプラットフォームです。 VTuberのアバターやゲームのアニメーションキャラクター、インタラクティブメディアなどに、幅広く活用されています。

Live2D Editorを使用すれば、シンプルなスケッチから細部まで描き込まれたイラストまで、静止画を生き生きと動くインタラクティブなキャラクター（Live2Dモデル）へと変換できます。

私たちはこのLive2DをAIのインタフェースとしてWebアプリに組み込めないかと実験を始めました。 Live2Dには、Live2D Cubism SDK for WebというWebアプリに組み込むためのSDKが用意されています。私たちはこれをVue.jsプラットフォームで動かせるように改変していきました。

また、TTS (Text to Speech)と呼ばれる音声合成の各種のプラットフォームとLive2Dの発話アニメーションをよりシームレスに繋げるために、リップシンクという発話に合わせて口が連動して動く機能を強化し、WAV以外のオーディオファイルフォーマットでもリップシンクが動くようにしました。

こちらのデモをご覧ください。

このデモのコードは多くをLive2D Cubism SDK for Webを元としているため、残念ながら公開はできませんが、人気の高いVue.jsで開発するWebアプリにLive2Dを組み込むための最適なテンプレートを開発することができました。

デモではLive2D Cubism SDK for Webに標準搭載されたアニメキャラクターを使用していますが、 Live2Dの表現力はそれには止まりません。より3D的なイラストを使ってほぼほぼ3Dモデルが動いているように表現することもできますし、逆に、ゆるキャラのようなふわっとしたキャラクターのイラストを使っても驚くほど豊かな表現力を実現できます。

Goldrush Computingでは、AIによるインテリジェントな会話や思考、進歩の著しい自然な音声合成エンジン、そしてLive2Dを組み合わせることで、新しいユーザー体験を作り出すことに積極的に取り組んでいます。 AIで実現するユーザー体験を考えるときに、

「AIのロジック・データと、インタフェースの双方を総合して最初から考えたい」

という方は是非お気軽にご連絡ください。

以下Live2Dについてにまとめました。

Live2Dモデルの主な特徴

表情豊かなジェスチャー: 笑顔、しかめっ面、まばたきなど、会話に応じた自然な動き。
リアルタイムのリップシンク: 音声と完全に同期した口の動き。

プロダクトデザイナーにとってのメリット

感情的なつながり: 自然なリアクションをするキャラクターは、ユーザーとの絆を深めます。
ブランド認知度の向上: 独自のデジタルキャラクターがブランドを際立たせます。
ユーザーの定着率向上: 魅力的なビジュアルとスムーズな対話が、ユーザーの関心を引き続けます。

AI搭載アバターの実用例

NTT XRコンシェルジュ: AI搭載アバターが多言語対応のカスタマーサポートを提供。詳細は Live2D公式サイトをご覧ください。
CHELULU by Sony Music Solutions: 高度な音声認識とLive2Dアニメーションを活用。詳細は Live2D公式サイトをご覧ください。