思想をデザインで伝える──“UN - SCALABLE VISION”というサービスを、Webにどう昇華させたか<WEBサイトの世界3大アワード受賞：CSS Design Awards / FWA / Awwwards>

こんにちは。D2C IDでデザイナーをしている宮崎です。
今回は私がアートディレクションからデザインまで携わった「UN - SCALABLE VISION」のWebプロジェクトについて、コンセプト設計から表現の落とし込みまで、どのような思考とプロセスでかたちにしていったのか──ビジュアルと体験設計の融合、そして技術と思想のバランスを探った舞台裏をお届けします。

また本プロジェクトは、CSS Design Awards、FWA Site of the Day、Awwwards Honorsといった国際的に権威あるアワードに選出されました。プロジェクトに関わってくださったすべての方々へ、心より感謝申し上げます。皆さまの専門性と熱意があってこそ、ここまでの表現を実現することができました。

WEB URL：https://www.un-scalablevision.com/

案件詳細はこちら：https://www.d2cid.co.jp/projects/unscalable/

————————————————————————————————————————

UN - SCALABLE VISIONとは

「UN - SCALABLE VISION」は、電通ライブとIMAGICA GROUPが手を組むことで生まれた、映像分野における最先端のソリューションです。場所や空間にとらわれず、サイズやアスペクト比にも制限されない、あらゆる環境に最適化された自由な映像表現を実現することを目指し、映像制作や体験開発はもちろん、映像機器の手配・設置から、送出システム開発までワンストップでサービスを提供しています。そして、国内トップクラスの映像コンテンツ開発と映像体験の知見、そして多様なクリエイティブ＆テクノロジーが融合し、「環境に最適化された新しい映像体験」を創造します。

（D2C ID IMG SRC STUDIOは2025年3月。インタラクティブな領域を担う組織としても「UN - SCALABLE VISION」へ参画）

この「スケールを超えてあらゆる環境に適応する映像ソリューション」というコンセプトを、どのようにWebという制約のある領域に落とし込めるか──その問いかけこそが、今回のプロジェクトの出発点でした。

1. ブランドの核を探るコンセプト設計

まず最初に行ったのは、サービスの「思想」に対する仮説立てでした。単なるロゴや配色といった表層的な要素ではなく、その背後にある「このサービスが伝えたいことは何か」といった問いに向き合うことから始まりました。その思想が、すべてのデザイン判断の軸となる──そんな前提のもと、プロジェクトはスタートしました。

ベンチマークや競合をリサーチする中で、単なる差異を探すのではなく、各社が何を伝えようとしているのか、その表現の背景や意図に目を向けました。なにを伝えたいサービスなのか。世の中における認知はどのくらいのものなのか。他サービスにおける差別化できる箇所とは？など...そして顧客イメージ、その最終にいるユーザー像をイメージしながら仮説を立てていきました。

そうした分析を通じ、仮説立てUN - SCALABLE VISIONという事業内容や思想から上がってきたのが、「空間からメディアへ変容する、形にとらわれない柔軟な思想」という軸でした。

そこから導かれたキーワードが、「新しい映像体験」「シームレスな没入感」「空間×演出×映像」。これらをサイト全体のコンセプトに昇華し、次元的な空間からメディアへとつながる“体験の連続性”を設計の核に据えました。

2. ビジュアルストーリーテリングを絵コンテで制作

具体的なビジュアル設計に入る前に、まず行ったのが絵コンテと全体のストーリー設計です。

「視覚的なストーリーボード」として描き出し、サービスの思想をWeb上でどう展開するかをワイヤーの要件を基本に整理しました。

UN - SCALABLE VISIONのブランドイメージを全面に訴求するため、まずはサービスやロゴに表現されているいくつものスクリーンを板に見立てて、ロゴのモチーフを主体として３次元的にカメラワークが切り替わっていく構成を複数パターンで検証しました。

サイズや画角に囚われない6枚のスクリーン（ロゴ）が画面内でシームレスに表現され、あらゆる空間においてメディアが存在する様を3D空間を通して没入感で表現します。

この絵コンテは、クライアントとの共通認識を築くための“対話の土台”となるステップです。ビジュアルと言葉の双方から構成意図を可視化することで、「思っていたのと違う」という齟齬を未然に防ぎ、プロジェクト全体の精度と納得感を高めていきました。

3. 世界観の構築-デザイン要素の統合

絵づくりの検証段階（世界観づくり）では、「語りすぎない」ことを大切にしました。

絵コンテで描いた一連の流れを軸に、板（スクリーン）というモチーフが空間の中でどのように存在し、どんな質感・佇まいを持つべきかを多角的に検証していきました。

ビジュアル設計においてはまずはじめに、フォント選定をデザインの起点に据えました。どのような印象を与えるかを見極めながら、書体の選定とともに、文字のサイズ、行間の設計をグリッドに落とし込み、複数のバリエーションで検証をおこなっています。

具体的なデザイン検証：

初期段階では、各パース（視点）においてスクリーンを空中に浮かせる表現を実践しましたが、ブロック自体がミニチュアのように見え、空間に対するスケール感が十分に伝わらないという課題が浮かび上がりました。また、ロゴの形状に忠実に寄せすぎたことで、視覚的な広がりや拡張性が制限され、世界観の奥行きが感じられにくい場面も発生したりと、この検証フェーズでは、「空間との関係性をどう構築し、どのようにスケール感を演出するか」という点が難しくもあり、何度も角度・配置・動きの検証を重ねながら進行しました。一方で質感の検証でも、現場で使用されているLEDの質感をweb上で表現するとノイズの荒い質感の印象へ繋がってしまったりなどつまづきがある部分もありました。

そしてロゴが持っている雰囲気（モノトーン調）との共存も考えながら、3Dでの動的なモックをつくったりなど、静と動のバランスを考えながら試行錯誤の中で思い切ったパース感を表現する感覚を探っていきました。その過程では、視覚的な印象だけでなく、空間全体の“気配”としてどう作用するかという感覚的な軸も重視していきました。

制作過程で一貫して意識したのは、「拡張的で自由な体験」と「空間そのものを感じさせる演出」、そして「何か新しいことが始まる予感」をユーザーに届けることです。見る人の感覚に訴えるような世界観を目指しました。

また、WebGLを使ったインタラクション表現も今回のチャレンジの一つでした。たとえば、マウスカーソルの動きに応じて“空間”が変化するような微細な演出を設けたり、インタラクションが自然に働くような設計をおこないました。確かな存在感を持たせられるようにするため、「動と静のバランス」を追求していきました。

そして最終的に公開されたWebサイトとの整合性を保つため、ロゴの形状やフォントについても微調整をおこなっています。

4. 最終検証と実装への引き継ぎ

完成に至るまで、何度もプロトタイプの検証を重ね、最終段階前の最終絵パターンがこちらです。

板の質感に関しても、過剰に異なる素材を混在させることで表現の軸が曖昧になってしまう恐れがあったため、表現の純度を保つためモノクロの質感に絞りました。そのうえで、板の配置や動き、カメラワークの切り替えや動き方、光の反射の仕方に至るまでをひとつずつ丁寧に、空間演出として最も効果的な構成を再度検証しました。

“見せたい”ではなく“感じてほしい”という視点でユーザーがストレスなく、自然に動線を辿れるようにデザインをブラッシュアップしていきました。

実装フェーズでは、Blenderで制作した3Dデータをもとに、高橋さんをはじめ開発チームと密に連携しながらWebへの実装に取り組みました。セクションごとに板の動きや配置を細かく検証し、表現したい意図と技術的な再現性のバランスを取りながら調整を進行。特にエンジニアの高橋さんとは、UIアニメーションの精度やセクション間の遷移における“シームレスな没入感”を実現するため、細部まで詰めたディスカッションを重ねました。

-----

まとめ：ブランド価値を最大化するWebデザインとは

最後までお読みいただき、ありがとうございます。

UN - SCAlABLE VISIONのプロジェクトを通して、私たちは「Webとは、思想を伝える場である」という前提を再確認しました。プロデューサーやエンジニアと、都度壁打ちを重ねていくスタイルで制作進行することで最善を模索できました。

単なるビジュアルや導線設計ではなく、その奥にあるブランドの“声”をどう伝えるか。

D2C IDは、こうした思想に共鳴し、共に形にしていく“伴走型のパートナー”として、多くのブランドと向き合ってきました。

誰に、何を、どんな姿勢で届けたいのか──その問いを大切にする方々と、また新たな挑戦をご一緒できればと思います。

クリエイティブチーム　クレジット

DENTSU LIVE
Chief Creative Director：Katsufumi Maezawa

IMAGICA EEX
Creative Director : Norifumi Furuya 
Project Manager : Hikari Kurokawa

D2C ID
Producer：Yuya Kato
Project Manager：Moeko Yoshida
Art Director / Designer：Noriko Miyazaki
Technical Director：Atsushi Matsushita
Front-end Engineer：Yuta Takahashi
Front-end Engineer：Takuma Sakai
Back-end Engineer： Shuhei Takarada