次葉文化アーカイブ

どんなものか

スクロールすると、画面の中の立体映像が物語のように移り変わっていくサイトです。古文書や工芸品などの文化資料を、修復・デジタル化して読み解きながら公開する会社を題材に、世界観づくりから映像の演出まで一つひとつ組み立ててつくりました。

なぜ作ったか

資料そのものだけでなく、見つけて、整えて、読み解いて、受け継ぐという仕事の流れまで含めて一つのサイトとして見せることが発端です。できあいの型に当てはめるのではなく、題材の世界観づくりから場面の割り振り、映像の動き方までを一から起こしました。文化資料を扱う会社らしい落ち着いた佇まいと、画面の中で静かに動く表現を両立させています。

見どころ

• スクロールするだけで、一枚の紙が傷み、手当てされ、読み取られ、受け継がれていくまでを、映画のようにひと続きで見られます。
• 所蔵先や人物、キーワードといった手がかりから、一点ずつの資料の情報を見られます。

できること

• スクロールに合わせて、画面の中の立体映像が7つの場面へと移り変わります（トップページは画面およそ12枚分の長さ）
• 舞う細かな粒は、ちり・紙の繊維・画像の粒・情報の点へと意味を変えながら、最初から最後まで同じ一群のままです
• 映像と文章を同じ設計図から作っているため、どこで止めても絵と言葉がずれません
• 端末の性能に合わせて動きの重さを4段階で自動調整します
• 資料の一覧と詳細から、所蔵先・人物・キーワードなどの情報を見られます
• 動きを抑える設定や、対応していない環境では、静止した表示に切り替わります

特に工夫したところ

• 映像は動画ファイルではなく、Three.js（WebGL）でその場で描いています。紙の裂けや色あせ、読み取りの光などを、あらかじめ用意した映像ではなく計算で作っているため、どんな速さでスクロールしても途中で飛んだり止まったりしません。
• カメラの位置、紙の傷み具合と直り具合、光、粒の数、背景の色味など18の値を、7つの場面ごとに「始まりと終わり」で定義しています。この一つの設計図から映像と本文の両方を作っているので、絵と言葉が必ず同じ進み具合で動きます。
• 重い演出をそのまま出すのではなく、端末の性能を見て4段階に落とす仕組みを入れました。動きが遅くなった状態が2秒続くと自動で軽い設定へ下げ、動きを抑える設定の方や対応していない環境では、そもそも映像を作らず静止した表示に切り替えます。
• 映像の計算部分はライブラリから切り離した独立の計算式として書いてあり、ブラウザを開かなくても正しさを確かめられるようにしました。設計上の判断は90件、確認用のテストは142件を残しています。
• 資料のデータは型付きの構造で持ち、表示は専用の読み出し層を通すことで、後からデータベースや外部APIへ差し替えられる設計にしました。
• 非公開の資料は画面上で隠すのではなく、公開用に書き出す成果物そのものから除外し、翻刻は人が確認した行と機械が読んだ行を分けて表示します。

実際に触ってみる