.png)
CHARACTER
ニードル人形のフクロウが持つ愛嬌や世界観を軸に、Web上でも自然に見えるキャラクターの動きを設計。
ANIMATION / CHARACTER / WEB EXPERIENCE
占い結果を伝える
フクロウアニメーション
匿名希望
PROJECT OVERVIEW
結果を表示するだけでなく、
結果を表示するだけでなく、
結果を見る時間まで楽しくする。
ニードル人形でフクロウ作品を制作されている方のWebサイトで使用する、 占い結果発表用のキャラクターアニメーションを制作しました。
占い結果はテキストを表示すれば情報としては成立します。 ただ、結果が出るその瞬間にフクロウが動き、表情やリアクションが変わることで、 サイト全体の世界観や体験そのものをより印象的にできます。
今回はひとつの動画を使い回すのではなく、 占い結果に応じて異なるパターンを制作し、結果ごとに違うリアクションを楽しめる構成にしました。
CLIENT
匿名希望
ROLE
演出 / イラスト / キャラクターアニメーション / モーション / パターン設計
USE
Webサイト / 占い結果表示 / キャラクター演出 / 複数パターン
CHARACTER × WEB EXPERIENCE
作品のフクロウを、
作品のフクロウを、
サイトの中でも生きた存在に。
このサイトの大きな魅力は、ニードルで一体ずつ制作されたフクロウそのものにあります。 そのため、Web上のアニメーションも単なる装飾ではなく、作品の持つ愛嬌や個性を広げる役割として考えました。
静止した作品写真だけでは伝えきれない感情やリアクションを動きとして加えることで、 「このフクロウが占ってくれている」という感覚をつくり、ユーザーとキャラクターの距離を縮めています。
実物の作品、Webデザイン、キャラクターアニメーションを別々のものとして扱わず、 同じ世界観の中でつながるようにすることを重視しました。
DESIGNING THE RESULT EXPERIENCE
占い結果ごとに、
占い結果ごとに、
違う反応が返ってくる。
占いコンテンツでユーザーが最も期待するのは、結果が出る瞬間です。 ボタンを押したあとに数字や文章だけが表示されるよりも、キャラクターが先に動き出し、 そのリアクションと一緒に結果が伝わる方が、体験として記憶に残ります。
そこで今回は、フクロウを結果発表のナビゲーターとして扱い、 占い結果の内容に合わせて複数のアニメーションパターンを用意しました。 どの結果でも同じ動きが再生されるのではなく、結果に応じて反応が変わることで、 「次はどんな動きになるだろう」という小さな楽しみも生まれます。
結果を読む前に、
キャラクターの反応から気分が伝わる。
キャラクターの反応から気分が伝わる。
占い結果のアニメーションでは、動きを派手にすることそのものが目的ではありません。 結果の意味や温度感を邪魔せず、ユーザーが自然に内容へ目を移せるよう、 キャラクターの動きと情報表示のバランスを整えています。
MULTIPLE RESULT PATTERNS複数パターンを制作する際には、それぞれをまったく別物にするのではなく、 フクロウらしい仕草やテンポには共通性を持たせながら、表情や動き、間の取り方で結果ごとの差をつけました。
これにより、一度占って終わりではなく、別の結果も見てみたくなるような体験につながります。 キャラクターコンテンツとしての楽しさと、Webサイト上の機能としての分かりやすさを両立させる設計です。
WHY CHARACTER ANIMATION商品や作品の魅力をWebで伝えるとき、説明文や写真だけではなく、 そのブランドらしいキャラクターが動くことで、サイト全体に人柄や空気感を持たせることができます。
特に今回のように、もともと立体作品として強い個性を持つキャラクターの場合、 動画やアニメーションは新しい見せ方を追加するだけでなく、作品世界をWebへ拡張する手段になります。
CREATIVE APPROACH
キャラクターを動かす前に、
キャラクターを動かす前に、
体験の役割を決める。
Webサイトの中で何を見せるためのアニメーションなのかを整理し、 占い結果の分かりやすさ、キャラクター性、複数パターンの違いを一つの体験としてまとめました。
RESULT
占い結果ごとの違いが伝わるよう、表情・リアクション・テンポを変えた複数のアニメーションパターンを制作。
EXPERIENCE
結果を邪魔しない尺と情報量に整え、Webサイト上で繰り返し使いやすい演出として仕上げました。
THE ROLE OF THE ANIMATION
Webの機能に、
Webの機能に、
その人らしい体験を加える。
占い結果を表示する機能自体は、シンプルなテキスト表示でもつくることができます。
しかし、そのサイトにしかいないフクロウが動き、結果によって違う反応を返すことで、 同じ機能でも体験の印象は大きく変わります。
今回はアニメーションを単体の動画としてではなく、 Webサイトの中でユーザーが触れる小さな演出の一つとして設計しました。
キャラクターや作品を持つブランドでは、こうした短いWebアニメーションも、 世界観を伝え、サイトを記憶してもらうための重要な接点になります。
キャラクターを、
Webサイトの体験まで広げる。
キャラクターアニメーション、Web演出、サービス内モーション、結果表示や診断コンテンツ。
画面の中でどう動けば、そのブランドらしくなるかというところから設計します。