aircord

Project Facts

• Project: aircord Website
• Client: aircord
• Year: 2024
• Garden Eightの担当範囲: Design, Development
• Relevant capabilities: Web design, Creative development, Three.js / WebGL, Interaction design
• URL: aircord.co.jp

aircordはデジタル技術を用いた体験をつくるクリエイティブスタジオです。イベントや展示・施設などを対象にテクニカルプロデュースからソフトウェア・アプリケーション・ハードウェアの開発までを担っています。

私たちはこれまで4度のリニューアルをともにしその過程でaircordを作品のジャンルや使用技術ではなく映像、光、音、システムを組み合わせ、現実の場に体験を立ち上げるスタジオとして理解してきました。だからこそ今回は実績を整然と並べるだけのポートフォリオではその本質は伝わらないと考えました。

一般的なポートフォリオサイトでは一覧から詳細へ画面を切り替えることで仕事の情報にたどり着けます。しかし完成物を整然と並べるだけでは、映像・光・音・装置・ソフトウェアを横断して現実の場に作用するaircordの仕事を捉えきれません。必要だったのは表現を加えて印象を強くすることではなく、情報へ近づく過程そのものに奥行きを与えることです。

2Dと3Dを接続するページ遷移

そこで中心に据えたのが2Dから3Dへ移り再び2Dへ戻る構成です。ページごとに別の演出を置くのではなくいま見ている画面を一つの物体として空間の中へ送り、その表面を通して次の情報へ接続します。移動の前後で同じ画面が姿を変え続けるため訪問者はサイト内の位置を失わずに別の空間へ入っていきます。

この移動を成立させるため5つの描画レイヤーをRenderTargetで受け渡しています。プロジェクト詳細の画像や映像を含む2Dレイヤーを3D空間の面へ貼ります。その結果を再び2Dの画面として取り込み、空間内のオブジェクトとして扱った後にUIを重ねて最終出力へ戻します。複数のカメラとレイヤーを段階的につなぐことで2Dと3Dの切り替えを場面転換ではなく連続した運動として制御できるようにしました。

Aboutの水面表現

Aboutではaircordの立体的なロゴと水面のように反射する床が空間の基準になります。スクロールを進めると視点は水面の上から下へ移動します。スクロールとともに立体化したaircordの文字、水面、カメラの位置関係が変化し、やがて視点が水中へ移ります。より深く知るという流れをよりシンプルに表しています。

UI

空間表現が複雑になるほどユーザーが直接触れる要素には迷いのない役割が必要になるためです。カーソルも同じ考えで設計しています。プロジェクトを開く、スクロールする、前の画面へ戻るといった現在の操作をアイコンの形で示します。対象に触れた瞬間に形が切り替わるため説明を増やさなくても次に起こる動きを予測できます。3D空間の中ではUIもただ重ねるのではなく同じ光や質感を受ける物体として扱いました。体験と操作の境界を視覚的に切らず機能だけは明確に残しています。

モバイルとパフォーマンス

中心となる体験を残し周辺を整理する考えはモバイルにも引き継いでいます。ここで最大の壁になったのは画面の小ささではなく描画性能と入力方法の違いです。デスクトップの構成をそのまま縮小すると見た目は似ても体験の焦点がぼやけます。そこで2Dと3Dを往復する中心の構成を残しながら理解に直接寄与しないレイヤーを減らしました。何を体験として残すか。その取捨選択に最も時間を使っています。

コードはデスクトップ用とモバイル用で入口を分けました。モバイルではマウスの軌跡や粒子、フォグ、Archivesの3Dプレビューを読み込みません。Projectsもデスクトップでは現在位置に応じて映像を再生しますがモバイルや低電力環境では静止画へ切り替えます。

技術ノート

ここからは実装側に注視して補足します。中心になったのは画面をつなぐRenderTargetと文字の扱い、操作を空間へなじませるカーソルの3点です。

RenderTargetの設計について

画面の連続性を優先した結果レンダリングは5つのレイヤーに分かれました。最も奥にあるSingle Pageにはプロジェクト詳細の画像や映像を描画します。Pageではその結果を3D空間の面に貼り、Screenで再び2Dの画面として取り込みます。Worldはその画面自体を空間内の物体として扱い、最後にUIを重ねてブラウザへ出力します。

各レイヤーは前のRenderTargetをテクスチャとして受け取ります。そのため同じ画面を平面として見せる状態と空間内に置く状態を切り替えても内容は途切れません。構造は複雑になりますがページごとに別の演出を用意するより移動中の見え方を一つの時間軸で調整できます。デザインと実装の検証を同じ画面で進められることもこの構成の利点でした。

テキスト描画について

文字はすべてをWebGLへ置けばよいわけではありません。情報として読む文字はDOMに残し、空間の一部として見せる文字は役割に応じてTextGeometry、SDF、Iconの3つの方法を使い分けています。描画方法を分ける基準は立体感、拡縮への強さ、操作の伝わりやすさです。

TextGeometry

AboutのaircordロゴにはTextGeometryを使用しています。文字の輪郭を頂点へ変換して奥行きを与えられるためカメラや光の影響を受ける物体として水面の反射まで含めて扱えます。一方で文字数が増えるほど頂点数も増えるため長い文章には向きません。立体であること自体に意味があるロゴへ用途を絞りホームのタイポグラフィや本文はDOMとして読みやすさを保っています。

SDF

ProjectsのタイトルにはSDFを使しています。文字の輪郭からの距離をテクスチャに記録しシェーダー側で境界を復元するため、カメラとの距離や表示サイズが変わってもエッジを保ちやすい方法です。文字ごとに複雑な立体形状を持つ必要もありません。円環状に並ぶプロジェクトと一緒に拡縮や回転を行いながら、正面に来たタイトルは文字として読める状態を維持します。

Icon

カーソルの図形はIllustratorで作成した後にアイコンフォントへ変換しTextGeometryで立体化しています。矢印やスクロールなどの形ごとに個別の3Dモデルを読み込む必要がなく、一つのフォントから必要な形を生成できます。形が切り替わってもサイズ、奥行き、材質を同じ条件で扱えるため軽量化だけでなくUIの一貫性にもつながりました。

カーソルのガラス的表現

カーソルは機能を示すUIであると同時に画面内の光を受ける小さな物体です。背景を透過しながら輪郭には反射を残すことで暗い映像の上でも存在を認識できます。形が切り替わっても同じ材質を引き継ぐため操作の役割が変わることとサイト内の連続性を両立できます。

現在のThree.jsであればMeshPhysicalMaterialのtransmissionを使うことで近い質感を比較的シンプルに実装できます。ただし透過表現は背景側の描画を必要とするため画面全体のポストプロセスやDPRとの組み合わせで負荷が変わります。見た目だけを再現するのではなく必要なサイズと表示時間を先に決めて使うことが重要です。

デザインと実装の往復

ここまでの技術に共通するのは3Dを増やすことではなくaircordを知る順序を途切れさせないことです。RenderTargetはページの境界をつなぎ、水面は情報の深さをスクロールへ変換し、カーソルは空間の中で操作の意味を保ちます。モバイルではその順序だけを残して周辺の描画を減らしました。

最初に完成したデザインがあり後から実装で再現したわけではありません。ブラウザ上でカメラや文字、光、遷移を動かしながら何がaircordの体験として必要かを判断しました。その往復によって対象への理解が画面の見た目だけでなくページの構造とコードの動きまで一貫したサイトになっています。

Recognition

• Awwwards — Site of the Day, Developer Award
• The FWA — FWA of the Day
• CSS Design Awards — Website of the Day

Credits

• Client: aircord
• Designer / Developer: Kenta Toshikura (Garden Eight)
• Producer / Director: Toshiyuki Hashimoto (aircord / The Shift)
• Copywriter: Jiyu Park (The Shift)