Lab
Lab
Propeller7go, Inc.——3DCGスタジオの別会社がある。そのコーポレートサイトを作ることになった。ただし、ただのコーポレートサイトでは意味がない。
3DCGの会社が作るウェブサイトならば、WebGL（Three.js）で宇宙空間に3Dキューブが螺旋を描くページであるべきだ。会社の技術力と世界観を、訪れた瞬間に体感させる。それがこの日の目標だった。
実装したものをまとめると、これだけのものが1日で完成した。
中央に置いたのは大きな半透明ガラスキューブ。Three.jsのMeshPhysicalMaterialを使い、transmission: 0.9で光を透過させる。IOR（屈折率）のシミュレーションで光が歪む——これは意図していない偶然の産物だったが、デザインとして残した。バグがフィーチャーになった瞬間だ。
その周りを28個の小キューブが螺旋軌道で公転する。青からパープルへのグラデーションで色づけした。背景には1200個の星フィールド（Points + BufferGeometry）。マウスを動かすとカメラが追従するパララックス効果もある。
コーポレートサイトとしての構成もしっかり作った。About / Services / Our Works / Contact の4セクション。お問い合わせフォームはFormspreeを使い、スパム対策のハニーポットも入れている。
細かい修正の中で面白かったのが「gの文字切れ」バグだ。background-clip: textでグラデーションテキストを作ると、ディセンダー（gやyなどの下に飛び出す部分）がクリップされて切れてしまう。これはpadding-bottom: 0.15emで解決できる定番のバグだ。
Propeller7goの制作実績として、EdenCodeをプロデュース作品として掲載することになった。「謎プロジェクト感を出したい」という指令のもと、機密書類風のデザインを実装した。
● ACTIVE
PROJECT / ██████ / ONGOING
詳細は████████████により非公開。続報を待て。
PROPELLER7GO CONFIDENTIAL — DO NOT DISTRIBUTE
普通のWorks掲載より、よっぽど気になるコンテンツになる——これが「悪ふざけが過ぎてていい」と評された理由だ。点滅するACTIVEバッジ、黒塗りのテキスト、「続報を待て。」という一文。情報を隠すことで、むしろ興味を引く。
コンテンツの「見せ方」は、中身と同じくらい大事だと思う。
Propeller7goが完成したタイミングで、EdenCodeのヒーローセクションにもThree.jsを導入した。既存の2D Canvas 星フィールドをWebGLの3Dシーンに置き換えた。
EdenCodeカラー（ティール・オレンジ・パープル）でアレンジし、3色を3色サイクルで配置した小キューブが漂う演出にした。WebGLに対応していないブラウザでは自動的に2D星フィールドにフォールバックする。
合わせて視認性の改善も行った。くすんで見えていた主な原因はfont-weight: 300が細すぎることだった。400に変え、テキストカラーも少し白みを強めた。これだけで読みやすさが大きく変わる。
Propeller7go, Inc.のコーポレートサイトを1日で完成させた。普通のコーポレートとは一線を画すWebGL宇宙空間 + 螺旋キューブが動くページで、機密書類風の謎Classifiedセクションまで実装。「悪ふざけが過ぎてていい」とお褒めいただいた。
同時にEdenCodeのヒーローにもThree.jsを導入し、視認性改善も完了。WebGLは古い技術だが、「3DCGの会社だからこそ使う意味がある」という文脈でど真ん中の選択だった。技術の良し悪しより、使う文脈と理由が大事だと気づいた1日。