未知のVR体験へ誘う「入り口」をデザイン
ULTRA TOUR by STYLY Webサイト構築プロジェクト

本サイトのコンセプトは「超初体験前日」。リアルとヴァーチャル、日常と非日常を繋ぐ、ULTRA TOUR by STYLY独自の世界観を伝えるため、サイトデザインにはさまざまな工夫や意図が込められています。「超初体験」「没入感」などの印象を与えるモーションなど、先鋭的な要素を持ちながら、初めてVRに触れるユーザーにも魅力を感じてもらえるように、サービスサイトとして間口を広げていることも大きな特徴です。

テクノロジーが進化する現代で、新たなメディア表現の「入り口」となるWebサイトはいかにデザイン・実装されたのか。本サイトのデザインを担当したデザイナー, アートディレクターの田中 隼人氏と、ロフトワーククリエイティブティレクターの山田 麗音、岩倉 慧が、プロジェクトを振り返りながら、実装までの道のりとチームづくりのポイントについてディスカッションします。

聞き手・編集：後閑 裕太朗（loftwork.com編集部）
聞き手・執筆：吉澤 瑠美
写真：村上 大輔

「ご相談は “今” がおすすめ！」Webから始める、ブランドコミュニケーション [最新事例7選]

今年度から新たにブランドコミュニケーションのためのWeb構築やリニューアルを検討中のマーケティングや広報、ブランドマネージャー。デジタルコミュニケーション戦略担当などの方におすすめのオンラインセミナーです。ULTRA TOUR by STYLYのPJ事例もご紹介しますので、ご興味のある方は、ぜひご参加ください。

ーーULRTA TOUR by STYLY Webサイトのコンセプト「超初体験前日」に込められた意図や、決定までの経緯を教えてください。

ロフトワーク　山田（以下、山田）　ULTRA TOUR by STYLYは、これまでVRというものを遠い存在だと思っていた一般の方々に、少し違った切り口から、エンタメ的にVRを体験してもらおうというプロジェクトです。尖ったコンテンツが企画されるなか、並行してWebサイトを開設することになり、企画に負けない良いサイトにしたい、という思いはありました。

ULTRA TOUR by STYLYのサービス全体のコンセプトは「超初体験」。それに対して、Webサイトは本番の「超初体験」に臨む一歩手前の場であり、「超初体験」に対してイメージや想像を膨らませられる、遠足の前の日みたいなワクワク感がセットアップされる場として位置づけました。明日のことを考えると落ち着かない、現実と幻想との間を行ったり来たりしているような感覚を、浮遊感やブラーみたいなもので表現できるといいな、とデザインコンパスに落とし込んでいきました。

ーーデザイナーの田中さんには、どのようにイメージを伝えたのでしょうか？

山田　具体的な参考例として挙げたのは、スーパー・ニンテンドー・ワールド™️のような世界観ですね。他にも、浮遊感や違和感をビジュアルで表現したり、アニメーションで表現したりしているサイトをいくつか挙げました。でも、それらのリファレンスは「こうしてください」という指示ではなく、「僕が言っている『違和感』というのはこういうこと」を伝えるための補足資料です。その受け取り方はあくまで田中さんに委ねているので、デザインカンプを確認する時には、「超初体験前日」か否か、という観点からコメントするようにしていました。

ーー田中さんにとって、何がこのプロジェクトへの参加の決め手だったのでしょうか。

田中隼人（以下、田中）　これまで一緒にアートワークを手掛けてきた「NEWVIEW」の姉妹プロジェクトということで、とにかく面白そうだったというのが一番ですね。いわゆるデザインだけでなく演出ありきのサイトという点も、チームを組むエンジニア次第でかなり楽しい案件になりそうだと思いました。自分が楽しめないとアウトプットが良いものにならないので、その点はどの案件でも重視しています。

山田　田中さんからは、こちらの期待以上の提案を頂きました。何より印象的だったのは、gifアニメーション付きでご提案いただいたことです。アニメーション想定の提案を静止画の状態で受け取ると、動きについて細かいヒアリングが必要ですが、最初から動きも含めて見せてくれる丁寧さに驚きました。クライアントにも伝えやすかったですし、認識のずれもほぼなかったので、修正が必要な箇所はほとんどありませんでした。

また、コーディングを担当した小松 貴之（テクニカルディレクター・デベロッパー）さんは田中さんからの紹介だったのですが、今回はお二人の連携プレーが効果的でしたね。

田中　小松さんとは、これまでに何度か案件を一緒に取り組んだこともあり、彼となら良いものが作れるのではないかと思ったんです。

山田　田中さんのデザイン提案を受けて、小松さんが頭を抱えるという場面もありましたが（笑）。最終的にはちゃんとデザイナーの意図を汲んだコーディングをされていて、とても心強かったです。

ロフトワーク　岩倉（以下、岩倉）　もしかしたら、コーダーが小松さんだったからこそ田中さんも自由に考えられたのかもしれませんね。デザイナーとコーダーの関係性が希薄だと、コーダーに難しいものを託すことを避けたり、田中さんの創造性やデザインに制限がかかっていたりしたかもしれません。でも、田中さんと小松さんの間には信頼感や期待があったので、複雑なアニメーションも実現できたのかなと思いました。

山田　エンジニアの視点から要望以上の提案をしてくれるのも、小松さんの素晴らしいところですよね。デザイナー目線の実現したい演出だけでなく、実装を考えるとこうしたほうが効果的、というアイデアを出して、より良いものにしてくれるのはありがたかったです。

ーーサイトのデザインでこだわった点を教えてください。

山田　「超初体験前日」というコンセプトはとても抽象的です。だから、何が必要で何をやったらダメというのは、しっかり向き合って考えたデザイナーの中にしかないと思いました。だから、田中さんにこれだけ意図を汲み取って期待以上のものを出していただいた手前、僕自身の考えやこだわり以上に、田中さんのアウトプットを尊重したいなと考えました。実際、デザインにはさまざまな工夫がありまして。なかでも僕は、トップに戻るUFOの演出が一番好きなんです。

岩倉　私もそれが一番好きです！

山田　マウスホバーで「TO TOP」の文字が整列するんですよね。こうした、一見気づかない可能性もあるディテールのこだわりが積み重なって、サイト全体の印象に繋がっていると思います。

田中　これも小松さんとすり合わせながら実装した部分です。こういう、細部にこだわった工夫はどんな案件でも意識して取り入れています。こうしてちゃんと見つけてもらえるとありがたいですね。

山田　勝手なイメージですが、田中さんはゼロイチのデザイナーというよりも、料理人のように、一つの素材やモチーフをいろいろな手法で扱うのがものすごく上手な方だなと思います。今回も、TopページはGIGANTIC 柴田ハルさんが制作したロゴ・キービジュアルをもとにデザインをしてもらったわけですが、田中さんはデザインという仕事に向き合うなかで、どういうところに面白さを感じているのでしょうか？

田中　元の作り手の方の気持ちも汲みつつではありますが、そこに違う人の手が加わってはじめて新しいものになったり、違った表現ができたりしますよね。その瞬間が面白いんです。だから、素材を受け取った時に、もっと違う角度から見たらどうなるだろう、と想像します。そのうえで「私ならこうします」と打ち返しているような感覚ですね。

ーー初めてのチームで新サービスのWebサイトを、かつ短納期で制作するという難易度の高いプロジェクトでしたが、チームビルディングやコミュニケーションで工夫したことはありますか？

山田　Webサイト制作プロジェクトでは、デザイナー、コーダー、CMS開発者と多様なクリエイターが関わりますが、通常の進めかたの場合、僕たちディレクターがコミュニケーションのハブとなり、クリエイター同士は直接やりとりをしないケースが多いんです。その方が、クリエイターがより自分の仕事に専念できるので。

ただ、今回は田中さんと小松さんがもともと繋がっていたこともあり、Slackのコーディングチャンネルに田中さんを入れて、クリエイター同士で直接やりとりができるようにしました。田中さんから受けた指示内容をディレクターが小松さんに伝え直す、という動きをすると、かえって誤変換やディスコミュニケーションが生じる恐れがあると考えました。

岩倉　私は、小松さんとコーディングの調整プランを検討したことが印象に残っています。普段は、提出してもらったコーディングに対して、ディレクター側が動作検証と調整すべき箇所を洗い出すことで優先順位を決めていきます。動くスピードを変えたいといった表現の調整もあれば、正しく挙動しないバグの修正もあるので、それをこちらでリスト化し、一つずつ直していくんです。

今回のプロジェクトでは、クリエイターのお二人とは全体スケジュールがタイトであることや各自のこだわりなど、詳細な情報を常に共有していたので、調整箇所の優先順位についても、小松さんと話し合いながら考えました。小松さんからの「ここは譲れないので優先順位を高くしたい」という意見や、「スケジュール上、間に合わない場合はここは諦めよう」など、意見をすり合わせながら決められたのが、お互いに納得感があり良かったです。また、実際に話してみたら、修正の方向性に関する意見がだいたい同じだったので、それもうれしかったですね。

田中　プロジェクトメンバー全員、フラットな関係性を築けていたのが良かったですね。ミーティングも2、3回しかできずほぼSlack上のやり取りでしたが、ちゃんとお互いの意見を聞いて進められていたと思います。それがこの案件のスムーズさにも繋がったのではないでしょうか。

また、「良い、悪い」をはっきりと言ってくれたのは、作り手としてありがたかったです。悪かったら悪かったで、次回どのようにデザインすればよいかという指標にもなりますし、褒められたら素直にうれしい。コメントをもらえたら、その分僕もリアクションを返します。そういった積極的なコミュニケーションが、このプロジェクトを良い方向へと導いたのだと思います。

ーー今後、VRをはじめ、先端テクノロジーを活かした新しい体験が続々と出てくると思います。それらの魅力を伝える手段としてのWebサイトにおいて、田中さんが挑戦したいことや目指したい表現があれば、教えてください。

田中　僕は、結構感覚で生きているところがあるので、体験する人が「初めてみる、すごい」とか「面白い、かっこいい」と気持ちが動くようなものが作れることが、一番良いなと思っています。Webに限ったことではありませんが、「気持ちが動くかどうか」という軸を大事にしたデザインを作っていきたいです。

岩倉　そういった意味でも、ULTRA TOUR by STYLYは、まだVRコンテンツに触れたことのない人たちにVRの魅力を翻訳し、「見たことのないものを提供する」プロジェクトだと思います。

山田　今回のプロジェクトで言えば、VRの没入感や浮遊感を表現するという、他にない尖った部分と、一般層の心を動かし興味を持ってもらうサービスの導入としての役割、対照的な2つの要素をいかに両立するかがチャレンジポイントでしたね。

田中　そうですね。VRというものに縁遠かった人たちが「気になる」と感じ、コンテンツを深掘りしたくなるサイトを目指しました。ユーザーの方々の反応が気になりますね。これからも、誰もやっていないような表現を追求しつつ、見る人が「面白い、楽しい」と思えるものを作っていきたいと思っています。