SCENE 02 / LIFT
情報を並べるのではなく、
距離として設計する。
光、速度、余白、カメラの曲率。視線が次の意味へ到着するまでの時間を、インターフェースの一部として扱う。
- INPUT
- Native scroll
- PATH
- Curved ascent
- ROLE
- Meaningful motion
SCENE 03 / ORBIT
遠くでは全体像。
近づけば、証拠。
空間の奥行きを装飾ではなく情報階層へ変換する。軌道上のノードは、思想・技術・プロジェクトを一つの関係図として結ぶ。
- 01STRATEGY目的から逆算する
- 02SYSTEM構造を軽く保つ
- 03PROOF結果を可視化する
SCENE 04 / TRANSFORMATION
分解は、
理解のためにある。
構造体が分かれ、役割が見え、再び一つになる。モーションそのものが「複雑さを整理して成果へ変換する」という思想を説明する。
1render loop
5connected scenes
0critical text in canvas
SCENE 05 / ARRIVAL
演出の先に、
現実の行動を置く。
最後に残るのは、派手さではない。何を理解し、次に何を選べるか。その一点へ着地する。
現実のプロジェクトへ↗ 通常表示で内容を確認するGROUND TRUTH01
THE SYSTEM UNDER THE EXPERIENCE
3Dが止まっても、
サイトは止まらない。
重要な文章、ナビゲーション、FAQ、CTAはすべて意味のあるHTMLとして残しています。WebGL非対応、低速回線、Save-Data、モーション停止時には、通常の縦型サイトへ自然に切り替わります。
- HTML
見出し、本文、CTA、SEO、アクセシビリティ
- WEBGL
空間、光、粒子、カメラ、意味のある変形
- SCROLL
0〜1へ正規化し、一本の時間軸として同期
DESIGN BUDGET02
PERFORMANCE IS PART OF THE ART DIRECTION
体験を重くしないための、
明確な上限。
≤1.5
Mobile DPR
端末の画素密度を無制限に使わず、GPU負荷を抑える。
1×
Animation Loop
状態更新と描画を一つのrequestAnimationFrameへ集約する。
0 KB
External 3D Models
すべてThree.jsのプリミティブと点・線から生成する。
100%
Reversible
戻りスクロールでも同じ時間軸を自然に逆再生する。
FAQ03
BEFORE THE NEXT DEPARTURE
よくある確認
スマートフォンでも同じ3Dが動きますか？
PC版の縮小ではなく、粒子数・描画密度・カメラ距離を削減した専用品質へ切り替えます。Save-Dataや低速回線では静的表示を優先します。
3Dが読み込めない場合はどうなりますか？
canvasを非表示にし、全シーンを通常のHTMLセクションとして表示します。本文とCTAは最初からcanvasの外にあるため、情報は失われません。
スクロール操作を奪いませんか？
ネイティブスクロールを維持し、スクロール量を進捗へ変換するだけです。ホイールやタッチを独自に捕捉するスクロールジャックは使いません。
アニメーションを止められますか？
ヘッダーの停止ボタンでいつでも静的表示へ切り替えられます。OSのモーション低減設定も検出し、初回表示から静的モードを選択します。
ARRIVAL / 100%
インターフェースの外側へ。
体験を作る目的は、体験そのものではない。理解と行動の距離を短くすること。
UNIPLANCK.COMを開く↗