Project Facts
- Project: HONKA RE:FRAME! Website
- Client: デジタルハリウッド株式会社
- Course launch: 2026/4/21
- Garden Eightの担当範囲: Design, Development, 3D Production
- Relevant capabilities: Web design, Creative development, Three.js / WebGL, 3D production, Interaction design
- URL: school.dhw.co.jp/p/honka_reframe/
HONKA RE:FRAME!はデジタルハリウッドの本科CG/VFX・本科XR・本科UI/UXデザインの受講生が専門領域を越えて学ぶ選抜クラスです。
Garden EightはWebサイトのデザインと開発、人物を含む3DCG制作を担当しました。サイトの役割は授業内容を説明するだけではありません。AIが答えを出す時代に問い続けること、つくり続けることへの挑戦を訪問者の中から引き出す必要がありました。そこで「問い」を読むための言葉としてだけでなく、立ち止まり、見つめ、やがて歩き出す身体の体験として構成しました。
ストーリーと身体感覚
このクラスが扱う問いや意味は外から正解として与えられるものではありません。対話し、手を動かし、考え直す中で少しずつ輪郭を持っていきます。その価値をカリキュラムの説明だけで伝えようとすると、問いは理解すべきテーマとして訪問者の外側に置かれてしまいます。
私たちはサイトに明確なストーリーと身体感覚が必要だと考えました。空間だけで構成すれば世界への入り口をつくれます。タイポグラフィを中心にすれば思想を強く伝えられます。しかし今回見せたかったのは完成した世界観ではなく、問いに向かう人の姿勢です。考えることを頭の中の働きだけにせず、立ち止まる、手を伸ばす、歩き出すという動きへ置き換えました。
中心に置いた人物からは特定の誰かを想起させる特徴をできるだけ取り除いています。誰かの物語を眺めるのではなく、訪問者がその姿へ自分を重ねられる余白を残すためです。一方で匿名性を強めるほど人物はマネキンやロボットにも見えやすくなります。静止する場面にも呼吸と重心の揺れを感じる緩やかな動きを加え、身体がそこに存在していることを伝えました。
パーティクル
人物の手元に浮かぶオーブは問いや意味、そこから創造へ向かう途中の状態を表しています。無数の粒子は一度まとまったように見えても揺らぎ、また別の姿へ変化します。最初から明確な輪郭を与えず、向き合う時間によってかたちが現れてくるという考えをそのまま動きにしました。
スクロールが進むとノイズは少しずつ落ち着きます。人物とオーブの関係も変わり、訪問者はConceptからAbout、Purpose、Curriculumへ進みながら問いが創造へ近づいていく過程を見ます。本文の情報が具体的になる流れと3Dの状態変化を重ねることで、背景の演出ではなく情報を理解するための時間として機能させています。
スクロールと3D
デスクトップではスクロールの軸が縦から横へ切り替わり、最後にもう一度縦へ戻ります。移動方向の変化はサイトを印象づけるためだけのものではなく、情報の役割が変わる境界です。
最初の縦スクロールはTopからConceptへ進み、このクラスの思想へ入っていく導入です。初めから強い操作を求めず、馴染みのある移動でメッセージへ集中できる状態をつくりました。Aboutに入ると移動は横へ変わります。Purpose、Curriculum、Supervisorと続く情報は一つの答えへ深く入るものではなく、クラスを構成する考え方、学び、関わる人の関係を広げるものです。画面が横へ展開することで視野の広がりを身体的に伝えます。
Entryでは再び縦スクロールに戻ります。ここで人物の手元からオーブが消え、止まっていた身体が歩き出します。足が地面に触れるたびに跡が生まれ、その周囲に身体の反射が現れます。問いに向き合う状態から創造へ進み、自分で未来へ向かう。サイトの移動軸と人物の動きが同時に切り替わることで、情報を読む時間を応募へ向かう行動へ収束させました。
人物、オーブ、背景はそれぞれ独立した演出として置いていません。DOMのセクションとThree.js側のカメラやパーティクルを同じ進行値で制御し、文章を読む位置と3Dの状態がずれないようにしています。
モバイル
モバイルではデスクトップと同じ横移動を再現せず、縦スクロールを中心に組み直しています。画面の幅と入力方法が異なる環境へ横移動をそのまま持ち込むと、情報の読みやすさより演出が先に立つためです。変えなかったのは問いから創造へ進む順序です。人物とオーブの関係、情報が具体化していく流れ、最後に歩き出す展開を保ちながら、移動方法は端末に合うものへ変えました。デスクトップの形を縮小するのではなく、体験の中心がどこにあるかを決めた上で構成を適応させています。
技術ノート
ここからは実装側に注視して補足します。中心になったのはスクロールとWebGLの同期、GPU上で動かすパーティクル、人物の足から生成する足跡の調整です。
スクロールを一つの進行値へ変換する
デスクトップの入力はLenisによる縦スクロールを基準にしています。横区間へ入ると各セクションの幅から必要な移動距離を計算し、その距離に相当する高さをスクロール領域へ確保します。区間内の縦方向の移動量をtranslate3dの横方向へ変換することで、入力方法を変えずに縦から横へ進む構成をつくりました。
WebGL側ではTop、Concept、About、Purpose、Curriculum、Supervisor、Entryなどの各地点にカメラの位置と注視点、パーティクルの収束度、フォグ、深度ぼけ、背景ノイズ、人物のモーション、地面の表示状態を定義しています。それらをGSAPの一つのタイムラインへ並べ、スクロールの進行値からまとめて更新します。Entryへ移ると人物をStandingからWalkへ切り替え、パーティクルを消し、足元の描画を有効にします。DOMと3Dで別々のタイミングを持たせず、同じ位置を基準にすることで文章と人物の変化を一続きにしました。
パーティクルのGPUシミュレーション
オーブは一つの3Dモデルを変形しているのではありません。各粒子の位置と速度をFloat型のRenderTargetへ保存し、速度更新用と位置更新用のシェーダーで毎フレーム計算しています。読み取り用と書き込み用のRenderTargetを入れ替えることで、CPUへ粒子座標を戻さずにシミュレーションを続けます。画面に描くPointsは更新後の位置テクスチャを参照します。
Credits
- Client: デジタルハリウッド株式会社
- Designer / Developer / 3D: Kenta Toshikura (Garden Eight)