【BEHIND THE SCENE】 #02 UNLOCK YOU | WW | WIRED

今回制作の裏側をお話しするのはUNLOCK YOU | WW | WIREDです。
2019年11月にSEIKOから誕生したストリートファッションウオッチライン「WW＜ツーダブ＞」が発売されました。そのブランドキャラクターのWW MANがインラインスケートで渋谷の街を駆け巡る<SHIBUYA HACK & PLAY>キャンペーンとしてスペシャルサイトおよびARコンテンツを制作、同12月にこのサイトが公開されました。

---------------------

ーこのサイトはどうやって設計されていった？
（有方）切札立ち上げ当初からお付き合いのある椎木さん（当時株式会社ピラミッドフィルムクアドラ、現在株式会社米）にお声がけいただき、どのようなWebサイトにしていくか企画・演出のベースから入らせていただきました。
弊社がテクニカル・実装部門でアサインされるときは、ある程度表現の方向性や演出、デザインが決まってから弊社へのオリエンがある場合もあるのですが、今回はありがたいことに表現部分をゼロからCHERRYのCD贄田さん、椎木さん、デザイナーを担当される中川さんと詰めていきましたね。椎木さん以外ははじめてお仕事させていただく座組みだったのですが、はじめてとは思えないほどの阿吽の呼吸と申しますか、みなさんの考えている方向性がぶれない感じがとても心地よかったのを今でも覚えています。
CD贄田さんディレクションのもと、ブランドコンセプトである、"ストリートをハックする" を踏襲し、Webサイトでもキャラクターが縦横無尽に動き回ると面白いよねとなり、「ではWebGLでキャラクターを動かしましょう！」と決まっていきました。

ーアニメーションの制作過程は？
（有方）オリエン当初から贄田さんから、3D的表現とは別にもう一つ特徴的な演出を入れたいと言われていて、私の中でピンときたアイデアがあったのでとりあえずモックを作って見てもらおうと思いました。デベロッパーあるあるなのですが、過去に作って採用されなかった技術が引き出しのように溜まっているのですよね。その中の一つで、3Dをリアルに表現したものとTOON風にしたものをユーザーインタラクションによって切り替えられたら面白いのではないかと。

モックを完成させ贄田さんに見せに行くと、モックを見せる前に贄田さんが「2D的な表現を足してみたらいかがですか？」と。私が考えていたことと全く同じで驚きました。その後モックを触っていただき、「これでいきましょう！」と即OKをいただきました。

ーサイト全体の演出アイデアはどうやって？こだわったポイントは？
（有方）これまたWebGLなどの表現を取り入れたWebサイトにはあるあるだと思うのですが、結局のところデザイナーさんに演出を考えていただいてもそれが実装可能か、実装できたとしても描画負荷が高すぎないか、みたいな調整をやっていくことになると思います。今回は光栄なことにデザインを待たずに演出提案が出来たというか、それが許されるチームだったので私のほうで描画負荷を見ながら最適化や演出の足し引きをひたすらやっていきました。

こだわりポイントでいうと、キャラクターは頭部が鏡面でボディはちょっとマットな素材、ベルトが時計なのでガラス素材、等々様々な質感が使われており、普通に作ってしまうとそれぞれMeshとMaterialが別々になると思うのですが、描画負荷軽減のためキャラクターは1Mesh1Materialで実現しています。
あとはやはりリアル⇄トゥーンの切り替えですね。動的にキャラクター等のMaterialをスイッチングし、それぞれをWebGLでリアルタイムにレンダリングし、それぞれのレンダリング結果をいかに気持ち良く切り替えるか試行錯誤しました。
キャラクターアニメーションがトリックメイク中にスローになったりするのは映画Matrixのオマージュです。（笑）

ーーHTML側ではどんな工夫をしたのでしょうか？
(中島）UIやコンテンツ自体はHTML/CSSで構築されているのですが、3DのWebGL部分が活きるようなつくりを心掛けています。

まず、MENUをはじめとしたUIについては、よく見る形の無個性のものでは今回のお題にそぐわないと思ったため、JavaScriptで制御する形で進めていました。が、負荷も気になりはじめ...途中で、軽快に動くCSSアニメーションへとシフトしました。
CSS上のアニメーションは単調になってしまうこともあり、最初はプログラム制御のものと比べると全くピンときたものが出来ずでした。パラメータを変更し、繰り返しアニメーションを調整するうちに、途中からはSassを使ったプログラム開発状態となりまして。ノイズエフェクトでいうと分割数・サイズ・スピードなど、１つ１つの動きに複数の変数を付加し、それを管理する形で現状のアニメーションにしています。
このSassプログラムはチーム内でも共有していて。MENUについては、デベロッパーの戸部が何度もトライアンドエラーをしながら制作していたのを今でも覚えています。

コンテンツ部分については、3D表現の上に乗ることもあり、デザインの状態を通常のマークアップをした上で細かい調整を重ねました。
実際に動かしてみないと見えない部分も多く...。例えば、ウィンドウサイズを何度も変えてコンテンツがWW MANになるべく被らない場所を探す、など。
この部分については、チームで共有しながらリアルタイムで編集していました。

---------------------

以上、制作の裏話でした。お読みいただきありがとうございました！

CREDIT
Technical director & Programmer / Arikata Nobuaki
Programmer / Nakashima Kenshiro
Assistant Programmer / Tobe Tatsuya