Skip to main content
GDN8 PATIO

aircord

Published
利倉 健太

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主要ページデザイン

aircordはデジタル技術を用いた体験をつくるクリエイティブスタジオです。イベントや展示・施設などを対象にテクニカルプロデュースからソフトウェア・アプリケーション・ハードウェアの開発までを担っています。一般的なポートフォリオサイトでは一覧から詳細へ画面を切り替えることで仕事の情報にたどり着けます。ただ、完成物を整然と並べるだけでは、映像・光・音・装置・ソフトウェアを横断して現実世界に作用するaircordの仕事を捉えきれません。必要とされるのは表現を加えて印象を強くすることではなく、情報へ近づく過程そのものに奥行きを与えることです。

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

中心に置いたのは2Dから3Dへ移り、また2Dへ戻る構成です。ページごとに別の演出を足すのではなく、いま見ている画面を一つの物体として空間へ送り、その表面から次の情報へつなぎます。同じ画面が移動の前後で姿を変えるので、サイト内の位置は残ったまま別の空間へ入れます。

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

Aboutの水面表現

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

UI

空間の表現が複雑になるほど、触れる側の役割ははっきりさせておく必要があります。カーソルはプロジェクトを開く、スクロールする、前の画面へ戻るといった、いま可能な操作を形で示します。対象に触れた瞬間に切り替わるので、説明を増やさなくても次の動きは伝わります。3D空間の中ではUIも同じ光と質感を受ける物体として扱いました。体験と操作の境界は視覚的に切らず、機能の意味だけは残しています。

モバイル

モバイル版のホームとAboutとメニュー画面

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

技術ノート

ここからは実装側に注視して補足します。中心になったのは画面をつなぐ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

Credits

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