次葉文化アーカイブ

制作区分

自主制作・公開デモ

サービス分類

Webサイト制作

公開状態

公開済み

スクロールがそのまま物語の時間軸になる、Three.js（WebGL・GLSLシェーダ）による3Dスクロールストーリーテリングのブランドサイト。文化資料の修復・デジタル化・公開を担う専門会社を題材に、世界観の設定から演出設計・実装まで一貫して制作した。

画面全体がひとつの Three.js シーンで、スクロール量がそのまま物語の時間軸になる3Dスクロールストーリーテリングサイト。トップは画面高さ約12枚分（1,240svh）を「発見・残すべきもの・修復・走査・構造化・公開・継承」の7幕に区切り、一枚の紙が裂けて褪色し、修復され、走査光にさらされ、点群となって意味の網目に変わるまでを、途切れのない一続きの映像として見せる。舞う粒子は塵→繊維→画素→ノードと役割を変えるが実体は最後まで同一の粒子系で、事業工程の移り変わりを「一つのものの変化」として表している。カメラ距離・仰角、紙の破損度・修復度、走査光、粒子数、背景トーンなど18の連続値を幕ごとのキーフレームで定義し、この幕定義を3D描画と本文表示の唯一の元データとすることで、映像と文章が常に同じ進行度で動く。描画は端末性能に応じた4段階の品質制御を持ち、45fpsを2秒下回ると最大2段まで自動で落とす。動きを抑える設定（prefers-reduced-motion）やWebGL非対応の環境ではシーンを生成せず静的表示に切り替える。3D計算は three・React に依存しない純関数として分離し、ブラウザ無しで検証できる形にした（設計判断の記録90件・テスト142件）。土台は Next.js 16（App Router・静的書き出し）+ React 19 + TypeScript で、事業紹介・工程・技術・実績・資料アーカイブ・ジャーナルの各ページを持つ。資料データは型付きの TypeScript コンテンツモデルとリポジトリ層で構造化し、将来のDB・API差し替えを見据えた設計とした。公開範囲はビルド成果物の境界として実装し、非公開資料は生成物そのものから除外、翻刻は人手確認済みと機械読みを区別して表示する。墨・和紙・藍・銅を基調とした配色、明朝と等幅の書体、影を使わず罫線と余白で組む構成で、WCAG 2.1 AA を手計算で検算しながら仕上げた。