ページのすみから 話しかける。キャラクターが案内する Webサイト体験
このサイトの案内役をここで体験
挨拶と選択肢を、実際のPop Vuddyで体験できます。TOPでは左下の案内役として表示しています。
Webサイト埋め込み / Pop VuddyVARISTAのWebサイトに、いとゆきのキャラクターが案内するPop Vuddyを設置。ページを読み進める体験に、小さな対話の入口を加えています。画面のすみで案内を受け、関心のある内容を選んで先へ進めます。
読み進めるサイトに話しかけられる入口を
Webサイトのナビゲーションに加えて、キャラクターから案内を受ける入口をつくっています。スクロールしても画面のすみに残るため、読んでいる場所から案内へ戻ることができます。
PCではページの左下に常駐し、スマートフォンでは小さなボタンから起動。見たい時に開き、ページを読みたい時には閉じられるようにしています。
メニューの手前に人の気配をつくる
機能を並べるだけの案内に、キャラクターの動きと言葉を加える。サイト全体を覆わず、見たい時に触れられる小さな入口として、ページの閲覧と会話のきっかけを両立させています。
体験の流れ
出会う
ページのすみでキャラクターが案内
選ぶ
表示された選択肢から関心のある内容へ
読み進める
閉じたり開き直したりしながらサイトを閲覧
表現に込めた考え
案内役をサイトの一部にする
いとゆきのキャラクターを画面のすみに固定し、本文や写真と同じページの中に置いています。挨拶や動きのある案内が、静的なメニューとは違う接点になります。
大きな画面を開く前から人物の存在が見えるため、サービスの説明に触れるきっかけを、サイト上に継続して置けます。
読んでいる流れを小さな選択につなぐ
キャラクターの案内に続いて、動画内に選択肢が現れます。訪問者が関心のあるものを押すことで、その先の案内へ進める構成です。
独立した動画の再生枠を探さなくても、ページ上の案内役から行動できる。Webサイトとインタラクティブ動画が同じ場所でつながります。
画面サイズに合わせて案内の居場所をつくる
PCでは画面の左下に表示し、スマートフォンでは起動ボタンから開く構成。閉じた後も、同じ場所から案内を再表示できます。
本文や操作ボタンに重ならないよう、固定表示される要素の位置関係も調整。案内役の存在感と、サイトを読むためのスペースを一緒に考えています。
SCENES
PROJECT FACTS
この事例で
つくったもの
制作内容と、公開作品から確認できること。
- クライアント
- 株式会社VARISTA
- 制作内容
- VARISTA｜WebサイトのPop Vuddy
- 担当・提供範囲
- キャラクターによる案内 / 動画内の選択肢 / Webサイトへの埋め込み / PC・スマートフォン対応
- 表現・用途
- Webサイト案内 / 選択・分岐 / Vuddy
- 作品から確認できること
- 閲覧中のサイトに相談や情報への案内を添える
- 設置場所
- VARISTAのWebサイト。PCでは左下の案内役、スマートフォンでは開閉できるタブから利用できます。
- 選べる内容
- 会社・サービスを分かりやすく伝えたい / サービスの説明が難しい / 問い合わせを増やしたい / 制作品質を知りたい
成果・数値の扱いについて
この事例では、制作した内容と表現・体験設計を紹介しています。問い合わせ率や売上などの導入効果は、確認済みの実測値がある場合に測定期間・条件と合わせて掲載します。
制作内容の出典：公開中のVuddyを開く
サイトのすみに対話の入口を
キャラクターによる案内を、Webサイトに組み込んだ自社事例です。固定表示、開閉、スマートフォンでの起動方法まで含めて、ページ内での使い方を設計しています。
TOPページでは、実際に設置したPop Vuddyも操作できます。
- キャラクターによる案内
- 動画内の選択肢
- Webサイトへの埋め込み
- PC・スマートフォン対応
