[後編] 7つのシーンを、ひとつの物語体験へ 『IVRESSブランドサイト』におけるシーン設計とインタラクション

7つのシーンを、
ひとつの体験としてつなぐ

インタビュイー：Lecamus Jocelyn

―― Laugh Mindさんが設計した各シーンの役割やトーンを、Web体験としてつなげていくうえで、Utsuboさん側ではどのようなことを意識しましたか？

まず意識したのは、それぞれのシーンを単体の見せ場としてではなく、ひとつの旅の流れとして接続することです。

IVRESSのサイトには、暗い世界から始まり、名も無き者との出会い、IVRESS Manの出現、城へ向かう道、増えていく影、戦い、そして最後に宇宙的な広がりへと向かう複数のシーンがあります。

それぞれのシーンには異なる役割があり、ビジュアルの印象も大きく異なります。だからこそ、単に一つひとつのシーンを美しく作るだけでは不十分でした。重要だったのは、それらをひとつの旅としてどう接続するかです。

そのため、シーン間の遷移はかなり丁寧に検討しました。単純なカットやフェードイン、フェードアウトに頼りすぎると、シーンが分断されて見えてしまいます。できる限り、遷移そのものも物語の一部として機能するように考えました。

―― 特に印象に残っているシーンはありますか？

特に気に入っているのが、シーン4からシーン5へつながる部分です。モンスターがカメラに向かって入り込み、画面を覆う。そして次のシーンでは、前景の草を抜けながらカメラが上昇していく。脅威そのものが次の場面への入口になるような遷移で、シーン同士を自然につなぐことができました。

また、戦いのシーンから次へ進む場面では、光り始める剣にカメラが入り込み、その強い光が次のシーンへの白い遷移につながっていきます。単なる画面効果ではなく、その場にあるモチーフを使って、物語の流れを切らさないようにしています。

形を持たない存在を、
15,000以上の光の粒で立ち上げる

インタビュイー：Shotaro Shibata

―― IVRESS Manという存在は、もともとどのような文脈で生まれていたものなのですか？

オリエンを受けて感じたことのひとつに、IVRESSはブランディングとして、すでに色々な仕掛けをされている会社だということがありました。

たとえば、社員アバターをプレゼントしたり、社内全体でSNSを盛り上げていたり、TikTokもかなり活発に運用されていたり。定性的な施策も含めて、ブランドの一貫性をつくる動きがすでにありました。

IVRESS Manも、その文脈の中にあるIPです。だからこそ、今回のブランドサイトの中でも、知っている人が見たときに「あ、これIVRESS Manじゃん」と感じられるような存在として採用したいと考えました。

―― その一方で、サイト上ではキャラクター性を強く出しすぎていない印象もありました。そこにはどのような意図があったのでしょうか。

既存のIPとしての認知は活かしながらも、今回の世界観の中では、ひとつの象徴として立ち上がる存在にしたかったからです。

はっきりとしたヒーローとして描くのではなく、光の粒が集まり、輪郭が生まれ、そこに何かが宿っているように見える。そうすることで、IVRESS Manはキャラクターでありながら、守り神のようにも、導き手のようにも、ブランドの意志のようにも見える存在になります。その曖昧さが、今回のブランドストーリーには必要でした。

Utsuboさんには、その曖昧で象徴的な存在感を、リアルタイム3Dの表現としてどう成立させるかを一緒に探っていただきました。

インタビュイー：Lecamus Jocelyn

―― IVRESS Manを、光の粒が集まってシルエットになる表現として描かれていますよね。

このシーンで目指したのは、IVRESS Manをはっきりとしたキャラクターとして見せることではなく、空間の中に何かの存在が少しずつ立ち上がってくるような感覚でした。

チームとしても、特に手応えを感じたシーンのひとつです。

IVRESS Manを、一般的な3Dキャラクターモデルとして登場させるのではなく、空間に散らばった星や光の粒が、少しずつ集まってひとつのシルエットになっていくように見せたいと考えました。形はあまり定義しすぎず、でもそこに何かの存在がいることは感じられる。その曖昧さを大切にしています。

動きそのものが、「形を持たないものが、少しずつ形を得ていく」という物語になるようにしたかったのです。

―― その曖昧な存在感を、リアルタイムで動くWeb体験として成立させるために、制作工程ではどのような工夫を行ったのでしょうか。

この表現では、制作工程を大きく二つに分けています。

まず、形はBlender上で作りました。大量の粒子をブラウザ上でリアルタイムにシミュレーションすると、負荷が高く、挙動も予測しづらく、アートディレクションのコントロールも難しくなります。そこで、最終的なシルエットはBlender上で構成し、粒子の密度や配置、読みやすさを手作業で調整したうえで、軽量な3Dデータとしてベイクしました。

これにより、デザイナーがBlender上で見ている形を、ブラウザ上でもなるべくそのまま再現できる状態を作っています。

一方で、動きはブラウザ上で加えています。実行時には、3Dエンジンが粒子シミュレーションを最初から計算し直すのではなく、ベイク済みの形状を到達点として扱います。そして、スクロール量に応じて、粒子が拡散した状態からシルエットへと収束していくように制御しています。

完全に形ができたあとも、粒子はわずかに揺れ続けます。静止した像ではなく、空間の中でまだ呼吸しているような存在にしたかったからです。

―― シルエットとして読み取れることと、はっきり定義しすぎないこと。そのバランスはどのように調整していったのでしょうか。

最終的に、IVRESS Manには15,000以上の光の粒子を使用しています。さらに、背景には別レイヤーとして約500個の星の粒子をコード側で配置し、空間全体に奥行きを持たせました。シルエットが読み取れるか、でもはっきりしすぎないか。そのバランスを見つけるために、粒子の量や密度については10回ほどイテレーションを重ねています。

粒子は小さな光として描画し、重なり合う部分では内側から発光しているように見える加算表現を用いています。また、アンバーの芯とシアンのハローという2つの色味を共存させることで、単調な光の塊ではなく、奥行きのある存在感を目指しました。

重い作業は事前にBlenderで行い、ブラウザ上では軽量なポイントデータを動かす。この「前工程で作り込み、実行時は軽く動かす」という考え方が、アートディレクションとパフォーマンスの両立につながっています。

音もまた、
物語に合わせて変化させる

インタビュイー：Shotaro Shibata

―― サウンドも含めた体験設計について、どのような検討をしましたか？

BGMに関しては、正直Utsuboさんにかなりお任せしていました。笑

というのも、初回からかなりイメージに近い音源や演出を出してくださったからです。こちらが細かく説明しすぎなくても、今回の世界観に必要な空気感を理解してくださっている感覚がありました。

視覚だけで世界観を伝えることもできますが、ユーザーが“その場にいる”感覚を得るためには、音の存在がとても大きいです。暗闇の静けさ、何かが近づいてくる緊張感、場面が切り替わる気配、戦いの高揚感、最後に世界が広がっていく感覚。そうしたものは、ビジュアルだけではなく、音の変化によってもより深く伝わります。

Utsuboさんには、スクロールやシーン遷移と連動する音のあり方を非常に丁寧に設計していただきました。音があることで、さらに没入感のあるWeb体験になったと思います。

インタビュイー：Lecamus Jocelyn

―― 視覚だけでなく音の変化も印象的です。Utsuboさんにとって、音の設計でどのようなことを大切にしたのでしょうか。

音は、このプロジェクトで最初から体験設計の重要な一部として考えていました。

ストーリー性のあるWebサイトにおいて、音楽は単に背景で流れているだけでは足りないと考えています。ユーザーがどこを進んでいるのか、どのシーンにいるのか、どのように操作しているのかに応じて、音も一緒に変化していくべきだと考えました。

音楽とサウンドエフェクトは、UtsuboチームのLucas Fiorellaが制作しています。そのうえで、スクロールやシーン遷移、ユーザーの操作に反応するオーディオシステムを、Utsubo側で設計・実装しました。

素材としては、主要セクションをカバーする3つの音楽トラック、7種類のサウンドエフェクト、ループするwhoosh、環境音、UIサウンド、そしてリバーブ用の共通インパルスレスポンスを用意しています。

―― 実際には、ユーザーの進行に合わせて音をどのように変化させているのですか？

音の変化は、時間の流れによるものだけではありません。

特徴的なのは、スクロールによって駆動されていることです。セクションの境界に近づくとwhooshが立ち上がり、そのローパスフィルターの周波数は、遷移への近さとスクロール速度の両方にマッピングされています。速くスクロールしたときには、音が過剰に鋭くならないように周波数の上限を抑えています。

また、バトルシーンのインタラクション時には、音楽が少しこもったように変化します。ローパスフィルターと音量の変化によって、まるでクラブのスピーカーから少し離れたような印象を作り、操作をやめると再び音が開いていく。こうした音の変化によって、インタラクションの感触を視覚だけでなく聴覚からも支えています。

各セクションには、それぞれ異なる音楽レイヤーや環境音を加えることができます。チャイムや森のようなアンビエンスが、シーンに合わせてフェードイン・フェードアウトしていく。音は単なる装飾ではなく、ユーザーが物語のどこにいるのかを感じるための、もうひとつのナビゲーションになっています。

インタラクションに、
物語上の意味を持たせる

インタビュイー：Shotaro Shibata

―― バトルシーンは、ブランドストーリー上どのような意味を持つ場面として設計されましたか？

実は、このバトルシーンは、初稿で構成を提出したときには含まれていない展開でした。ここも、外山社長が大切にされていた世界観のひとつでした。

この場面は、物語における“葛藤と突破”のシーンです。

ブランドや企業の物語を描くとき、どうしても美しい部分だけを見せたくなります。しかし実際に企業が成長していく過程には、必ず迷いや衝突、壁があります。IVRESSの姿勢には、その考え方が特に色濃く表れており、理想を掲げるだけでなく、現実の課題に向き合いながら前へ進んでいく力強さが感じられました。

そこでIVRESSが大切にしている「逆境を乗り越える」という思想を表現するうえで、光や美しさだけではなく、影や戦いのシーンを入れる必要がありました。