見る人の選択に応える。インタラクティブ動画 プラットフォーム「Vuddy」
実際に選んで仕組みを体験する
Vuddyの利用例として、いとゆきの公開プロフィールを体験できます。気になる項目を選び、画面が変わる様子をご覧ください。
Vuddyの利用例 / 自社公開コンテンツインタラクティブ動画「Vuddy」は、VARISTAが開発する自社サービスです。見る人が画面の中で選び、その先の動画や情報へ進む。一方向に流れる映像に、Webアプリケーションの操作を組み合わせた体験をつくっています。ここでは個々の映像制作ではなく、その体験を支えるサービス開発をご紹介します。
「見る」の先に「選べる」をつくる
動画を訪れる人の関心は、一人ひとり異なります。会社の事業を知りたい人も、プロフィールを見たい人も、すぐに相談したい人もいます。Vuddyでは、画面の選択肢から関心のある情報に進めるようにしています。
動画が変わることだけでなく、何を選べるのかがわかること、選んだ結果が画面に返ってくることも大切にしています。映像表現と操作の仕組みを切り離さずに設計する、自社プロダクト開発です。
動画の世界を触れるインターフェースに
映像の中のキャラクターや空間が、情報を選ぶ入口になる。映像をつくる視点と、操作できる仕組みをつくる視点を組み合わせて、見る人の行動から次の体験につながるサービスを開発しています。
体験を支える基本の流れ
見つける
画面の中から気になる情報を見つける
選ぶ
興味に合う入口をタップする
進む
選んだ内容に応じた動画や情報へ進む
仕組みに込めた考え
選択肢を映像の一部にする
動画の外にメニューを置くだけでは、映像を見る行為と操作する行為が分かれてしまいます。Vuddyは、画面の中に選択の入口をつくることで、映像の世界観に沿って情報を選べる体験にしています。
掲載している利用例では、キャラクターの隣に人物・会社・サービス・相談の入口を配置。何に触れられるかが伝わる画面と、選択に応える仕組みを組み合わせています。
関心に合わせて情報への道を分ける
同じ入口から訪れても、全員に同じ情報を同じ順番で見せる必要はありません。選択から次の画面へつなぐことで、見る人自身が知りたい内容をたどれる構成にしています。
会社紹介を選んだ場合は事業や実績へ、人物に興味がある場合はプロフィールへ。選んだ先でも情報を深められることが、Webサービスとしての体験につながります。
画面と裏側の仕組みを一緒につくる
操作する画面だけでは、Webサービスは成立しません。Vuddyの開発では、Reactによる画面、Pythonによる処理、PostgreSQLによるデータ管理、AWSのクラウド環境を組み合わせています。
見る人に届く体験を考えながら、それを支える処理やデータの扱いも設計する。映像の表現からシステムの実装までをつなげる、VARISTAの開発事例です。
SCENES
PROJECT FACTS
この事例で
つくったもの
制作内容と、公開作品から確認できること。
- クライアント
- 株式会社VARISTA
- 制作内容
- Vuddy｜インタラクティブ動画サービス開発
- 担当・提供範囲
- 体験設計 / フロントエンド開発 / バックエンド開発 / クラウド構成
- 表現・用途
- 自社サービス開発 / Webアプリケーション / インタラクティブ動画
- 作品から確認できること
- 見る人の関心に合わせて情報に進める動画体験をつくる
- 開発した仕組み
- 動画内の選択肢・分岐 / 選択内容に応じた案内 / Web上で体験するインタラクティブ動画の配信
- 開発の位置づけ
- 株式会社VARISTAが自社で提供するサービス「Vuddy」の開発事例です。
成果・数値の扱いについて
この事例では、制作した内容と表現・体験設計を紹介しています。問い合わせ率や売上などの導入効果は、確認済みの実測値がある場合に測定期間・条件と合わせて掲載します。
制作内容の出典：Vuddyのサービス紹介を見る
映像の表現をWebの体験へ
見る人の選択に応えるインタラクティブ動画サービス「Vuddy」。映像を見せる画面と、その先に進む仕組みを一体で開発しています。
使用技術：React / Python / PostgreSQL / AWS。掲載している画面・体験は、Vuddy上で公開されている「いとゆき」の利用例です。
- 体験設計
- フロントエンド開発
- バックエンド開発
- クラウド構成