目次
Resnとは
AdobeやadidasからVanmoofまで、世界的ブランドのプロジェクトを手掛けるグローバルなインタラクティブスタジオ。Cannes Lions、The One Show、Webby Awards、Awwwardsなど、広告からデジタルデザインまで幅広いアワードシーンで高い評価を受けており、テクノロジーを用いて新しいブランド体験を構築するスタジオとして、世界的にも高い評価を受けています。
Web制作に焦点を当てると特徴的なのは、単なるサイト制作ではなく、ブランドをどう体験として成立させるかという視点を軸に設計しているところです。UIや情報設計だけではなく、インタラクション、音、動き、空気感まで含めてブランドの世界観を構築しており、画面上でありながら空間的・感覚的な体験を生み出しています。
また、R&Dプロジェクトも継続的に展開しており、ARやジェネラティブ表現、ゲーム的インタラクションなどを通じて、技術研究と表現開発を日常的に行っている点も特徴です。これらの取り組みは単なる実験で終わるのではなく、クライアントワークにも還元されており、独自のアウトプットを成立させているところが非常に強みだと思います。
SHIFTBRAINのアートディレクターが選ぶ、EXO APEのイチオシ事例
事例1：KPRVERSE
2Dグラフィックをそのまま空間化したような3D表現や、スクロールに応じて別空間へシームレスに移動していく演出など、WebGLを活用したビジュアル体験そのものも非常に完成度が高いのですが、個人的に最も驚かされたのは、まるでゲームUIのように設計されたレイアウトデザインです。Head up displayのようなレイアウトや情報密度のコントロールなど、あらゆる要素が極めて高いレベルで整理されており、それでいて実験的なUIに見えすぎない絶妙なバランス感覚があります。特に凄いのは、その体験がPCだけでなくスマートフォン環境でもほぼ破綻せず成立している点です。
一般的にWebGLを多用したサイトでは、パフォーマンスや操作性の観点から、PCとスマートフォンで体験を大きく変えたり、スマートフォンでは演出を削減するケースも少なくありません。しかしこのサイトでは、デバイスごとの差を感じさせないほど自然に最適化されており、媒体を問わず一貫した没入感を体験することができます。
さらに印象的なのが、TOPページだけでなく下層ページに至るまで、世界観の統一精度が非常に高い点です。書体の選定、文字サイズのジャンプ率、罫線やUIパーツの扱い方、アニメーションの緩急に至るまで、すべての要素が同じ思想で設計されており、単なる演出の集合ではなく、サイト全体がひとつの世界として成立しています。
そのため、このサイトは単なるWebデザインの枠を超え、世界観を体験するインターフェースとして非常に完成度の高い事例だと感じました。私ごとですが、このサイトが公開された当初、1ヶ月間毎日見ていたかと思います（今でも見ます）。
事例2：SAVOR
Isabel Morantaさんと共に制作したサイトですが、こちらも挙げさせてもらいます。
このサイトが優れているのは、科学技術やサステナビリティの話を説明することではなく、それらをひとつの魅力的なブランド体験へと変換している点にあります。サイト全体は、雑誌のような大胆なレイアウトで構成されており、大きな写真、力強いタイポグラフィや余白を活かした構図によって独特のリズムが生み出されています。
特に印象的なのはタイポグラフィの演出で、一般的なサイトであれば文章や図説などで説明する内容を、あえて単語や短いフレーズへ分解し、リズムを刻むように緩急を持って登場させている点です。そのため、視覚的なテンポそのものが体験として機能しており、心地よさを生み出しながら、同時に直感的な理解も促しています。
Resnの制作物は、音を伴う体験型の表現を得意とする事例が多いのですが、このサイトでは実際に音を使わずとも、タイポグラフィやモーション、レイアウトの緩急によって、まるで音楽を感じるような体験へ落とし込まれている点が非常に秀逸でした。また、馴染みのない技術の話を難しく見せるのではなく、魅力的に感じさせる。そのためのアートディレクションと情報設計の編集力が非常に高く、学ぶ点の多い事例だと感じました。
Resnのものづくり
今回お話を伺ったのは、プロデューサーのErinさんと、UXデザイナー・ストラテジストのNedさんの2人です。
まず作るのは、”ストーリー”
プロジェクトは普段どのような流れで進めていますか？
Erin：基本的には、Context → Concept → Craftという3つのフェーズで進めています。私たちの仕事の多くは、”体験”を作ることにあります。まず最初に行うのは、ブランドの核となるストーリーを言語化することです。多くのブランドにとって、そのストーリーこそが他との違いであり、人との本質的なつながりを生むものだからです。その上で、「このストーリーを、どうすれば最もユーザーに響く形で伝えられるか？」を考えます。どんな感情を生み出したいのかを定義しながら、タイポグラフィ、カラー、モーションなど、ブランドのDNAとなるビジュアルの軸を設計していきます。
Ned：私たちは、プロセスの中でも特に初期フェーズを大切にしています。それぞれのフェーズが次のフェーズに繋がっているからこそ、最初の方向性が、その後のすべてのトーンを決めるんです。コンセプト設計の段階では、複数の可能性を並行して探りながら、素早く試行錯誤を繰り返します。
Erin：さらに、この段階では「何を作るか」だけではなく、「何を作らないか」を決めることも重要です。クライアントの要望をすべて盛り込むのではなく、本当に重要なものを見極める。それによって、限られたリソースを核となる部分に集中できます。私たちは、ウェブサイト全体を均等に作り込むというより、”最も記憶に残る一つの体験”に集中することを意識しています。リソースを分散させると、すべてが中途半端になり、結果として何も記憶に残らなくなってしまう。逆に、核となる部分に集中すれば、その体験の密度や品質を極限まで高めることができます。これは、大規模な案件だけではなく、予算が限られているプロジェクトでも同じです。限られた条件の中でも、「何を優先するか」を明確にすることで、インパクトのある体験は作れると思っています。
テクノロジーは、表現のためにある——R&Dへの向き合い方
R&Dにもかなり力を入れている印象があります。
Erin： Resnにとって、R&Dは非常に重要な存在です。実案件ではなかなか試せない新しい技術に触れる機会であり、そこで得た知見が「どんなことが可能なのか」の理解を深めるだけでなく、実際のプロジェクトに応用する際のリスクを減らすことにも繋がっています。
大きな取り組みの一つが、「Dim Sum」というWebGL実験シリーズです。さまざまなインタラクション手法を探求しており、Resnのプロジェクトで実際に使われている表現や技術が見つかるかもしれません。R&Dは成果物そのものだけでなく、その過程にも意味があります。未来のクライアントワークに備え、潜在的なニーズやリスクに対して準備するための時間でもあるんです。
「違うもの」が、記憶に残る——インスピレーションとデザインの考え方
普段、どのようにリファレンスを集めていますか？
Ned： なるべくWeb以外のものから探すようにしています。本や空間、アナログなものなど、インターネットの外側にはまだたくさん面白いものがあります。みんなが同じ場所から参考を集めていると、違うものを作るのは難しいので、デジタル以外のものから探しています。私たちが最も興味を持っているのは、”まだ誰もやったことがないこと”です。世の中にあるものから多くのインスピレーションは受けていますが、それらを違う形で結びつけ、新しいものとして生み出すことを意識しています。
Erin： 便利さを追求する中で、摩擦はどんどん消えていきました。でも、その結果、全部同じような体験になってしまったとも感じています。良いデザインは、”何ができるか”ではなく、”どんな感情を生むか”が重要です。違うものは人の目に留まり、記憶に残ります。
訪問したメンバーの声
石塚（アートディレクター / デザイナー）
この業界の第一線を走り続けているResnに実際に会える機会なんてなかなかないと思っていたので、正直かなり緊張していました。
実際に会ってみるととても話しやすく、WebGLやインタラクション表現で世界的に知られているスタジオですが、会話の中心にあったのは、ブランドをどう魅力的に感じさせるか、人にどう記憶として残すかという視点でした。
また、制作体制についてもチームワークの話を何度もしていて、強いアウトプットは個人個人の技量だけではなく、スタジオ全体の連携から生まれているんだと感じました。
また、自分たちのワークスを見せる機会もあったのですが、その時に「このサイトは音が出るの？」と聞かれたことがすごく印象に残っています。Resnのサイトは、音や動きまで含めて体験として成立しているものが多いですが、実際に会話していても、彼らは自然と体験全体の視点で話している感覚がありました。
実際に話を聞くことで、あの独特な没入感や空気感は、表現技法そのものを追求した結果というより、体験をどう成立させるかという視点を突き詰めた先に生まれているんだと感じました。
金（モーションデザイナー）
R&Dへの向き合い方がとても印象に残っています。今後の案件でも活かせそうな表現や仕組みを想定してR&Dに取り組むことで、実案件でも比較的スムーズに実装できる点が素晴らしいと感じました。さらに、案件予算が限られていても、限られた工数の中で表現の幅を広げ、満足度の高いサイトを実装できる点も魅力だと思いました。
また、ニュージーランドとアムステルダムでの連携では、オーバーラップするコアタイムを使ってMTGはするものの、プロジェクトは主にどちらかのチームが担当し、必要に応じて別支部から人員を入れるスタイルは、今後自分たちが海外支部を作るときの参考になりそうだと感じました。
岡田（プロデューサー）
今回、Awwwardsでも常連のResnさんにお会いできることを、すごく楽しみにしていました。
制作されているサイトからは、勝手ながら少し硬派でストイックな雰囲気を想像していたのですが、実際にお会いしたお二人はとてもフレンドリーで、良い意味で印象が大きく変わりました。あれだけかっこいいものをつくっている方々に親しみやすく接していただくと、それだけで心をつかまれてしまいますね（笑）。
特に印象的だったのは、案件の予算やスケジュール、状況に応じて、Framerのようなノーコードツールを使う選択肢も持たれていたことです。
Resnさんには、できることとできないことを明確に線引きし、制作手法にも強いこだわりを持っているイメージがありました。そのため、条件に応じて柔軟に手段を選びながら会社を運営されていることは、少し意外でもあり、とても興味深かったです。
これはSHIFTBRAINにも通じる部分があると感じましたし、アウトプットの品質を守りながら、プロジェクトごとに最適な方法を選ぶ姿勢は、すごく現実的で参考になりました。
坪井（プロジェクトマネージャー）
リッチな実装が印象的なResnですが、ノーコードツールも活用しているというのは意外なお話でした。高度な技術と柔軟なツール選択を使い分けているところに、実用的なスタジオのリアルを感じました。
R&Dが単なる実験で終わらず、そのまま将来のプロジェクトの表現や案件につながっているという話もとても参考になりました。探求と実務がきれいに循環している構造は、自分たちのチームにも取り入れたいと思いました。
PM視点では、ニュージーランドとオランダという時差のある拠点間でのプロジェクトマネジメントが気になりました。MTGの設定一つとっても調整が大変なはずなのに、それをうまく機能させているのは純粋にすごいと思います。
さいごに
今回のインタビューを通じて印象的だったのは、Resnが単に”技術的に高度なもの”を作っているわけではないということでした。彼らは常に、「どんな感情を生み出すか」「どうすれば記憶に残るか」を考えています。テクノロジーはそのための手段であり、R&DもAIも、最終的には”人間だからこそできる表現”へ辿り着くために存在している。だからこそ、Resnのアウトプットには、単なる機能性ではない強さがあるのだと感じました。
次回紹介するのは、アムステルダムのNumbered。お楽しみに！
