見出し画像

#2 Emakimono Viewer — スクロールする文化アーカイブを世界へ

Sato

文化は「流れるもの」だった？

現代の UI は、クリックとリストとフィードによって「分断された世界」を提示します。しかし、かつて文化は、もっと「流れるように」伝達されていたのではないでしょうか？

たとえば、絵巻物。ページをめくるのではなく、横に流すことで物語を体験する表現です。その中には、空間・時間・出来事・関係が「ひと続きの風景」として描かれています。

絵巻物とは、本来「読むもの」ではなく「繰り展げて追うもの」です。左へ左へと少しずつ巻きをほどき、現れては消えていく絵を追いながら、物語の世界に没入していく ──。その体験は、絵を静かに鑑賞するというよりも、アニメーションを味わう感覚に近いかもしれません。

スマートフォンで横に繰り展げながら鑑賞する「九相図巻」。美しい女性の死後の変容を、流れるような視覚体験として味わえる。

Emakimono Viewerとは？

Emakimono Viewerは、横スクロール UI による流動的な文化表現を再発明する試みです。日本の伝統的な絵巻物の構造に着想を得て、次のような要素を備えています：

  • スクロールによって空間と時間を一体化して体験できる構造

  • 章や場面が区切られずに“流れる”ように視認できるビジュアル構成

  • 背景に沿って関係性や登場人物、空間情報がなだらかに繋がる

しかし、現実の絵巻物を手に取る機会は非常に限られており、書籍や図録では断片的にしか掲載されていません。デジタル上でも、縦スクロールや静止画の一覧表示が一般的で、「繰り展げる」本来の鑑賞方法を体験できる機会はほとんどありません。

そこで私たちは、ウェブの横スクロールという表現手法を活かし、「絵巻物を繰り展げながら鑑賞する」インターフェースを再現することに挑戦しました。

この UI は、文化資料を静的に保存するのではなく、「非線形な文脈のなかで再体験する」装置として設計されています。また、Emakimono Viewer はCANW の姉妹プロジェクトとして、GitHub 上で独立した OSS として展開されています。

CANWエコシステムにおけるEmakimono Viewer（Horizontal Scroll Emaki）の位置づけ。各プロジェクトは、Lifelike・Cultural・Emergentというコンセプトを軸に有機的につながっている。

現在は以下の 2 作品を公開中です：

🐸 鳥獣人物戯画絵巻（Chōjū-jinbutsu-giga）
💀 九相図巻（Kusōzu – Nine Stages of a Decaying Corpse）

これらは、教科書などで断片的に紹介されることはあっても、全体を連続的に見ることはなかなかできません。本サイトでは、横スクロールを使って一気に絵巻物を展開し、あたかもアニメを観るように物語を追いかけることができます。

なぜ今「横スクロール」なのか？

現代のウェブデザインは縦スクロールが主流です。しかし、流域・物語・関係性・季節の巡り……こうした文化的・生態的構造は、むしろ横に流れる方が自然ではないでしょうか。

  • 絵巻物のように、時間は「空間」に沿って展開する

  • 空間が移動しながら、関係性が変化していく

  • 順番に縛られず、スクロールの速さや方向で体験が変わる

このような非線形的な感覚を取り戻すために、Emakimono Viewer は“横へ流す”という身体的インターフェースを再導入しています。

実装技術と展望

Emakimono Viewer は、以下の技術で構築されています：

  • Next.js + TypeScript による軽量なフロントエンド

  • PixiJS を視野に入れたキャンバスベースの描画拡張（開発中）

  • JSON/CSV による柔軟な章・注釈データ管理

  • Supabase を視野に入れたデータ構造の整備

  • GitHub 経由で誰でも素材・データ・構成にコントリビュート可能

Emakimono Viewerの技術スタック構成図。将来的な拡張を見据えた構造と、その展望もあわせて示している。

現在は「鳥獣人物戯画」と「九相図巻」に焦点を絞り、コードをシンプルに保っています。

For Contributors

本プロジェクトは現在、オープンソース化（OSS）に向けてリファクタリング中です。最小限の構成から出発し、将来的には以下のような改善を目指しています：

  • TypeScript 化と Next.js のバージョンアップ

  • 絵巻のデータ構造の整備（JSON, Supabase 等）

  • サムネイル付きのナビゲーションや閲覧インジケーターの追加

  • 新しい絵巻の追加や、テーマ別コレクションの展開

「絵巻物 × フロントエンド」というユニークなテーマに興味がある方、ぜひ一緒にこのプロジェクトを育てていきませんか？
👉 GitHub リポジトリはこちら → https://github.com/satoshi-create/emakimono-next

Emakimono Viewerのロードマップ。現在のフェーズ1からフェーズ2へと展開中。コーダーだけでなく、ノンコーダーやリサーチャーも参加しやすい構成を目指している（ロードマップの全体はコチラ）

おわりに：UIとしての文化表現へ

Emakimono Viewer は、単なるスクロールビューワーではありません。
それは、「文化や関係性をどう UI として表現できるか？」という CANW の問いへの、ひとつの具体的な応答です。

時間が流れ、空間がにじみ、関係がゆるやかに浮かび上がる。そんな可視化を可能にする UI。

それは、未来の文化アーカイブのための、新しい絵巻なのです。

関連リンク

次回は、「From RDB to Network」によるデータの関係化について紹介します。

📌 プロジェクト全体はこちらから https://github.com/satoshi-create/complexity-and-network-webdesign

📚 シリーズ「CANW 創発するネットワーク」全 5 話

1️⃣ #01 CANW とは何か？
https://note.com/enjoy_emakimono/n/n940e49019336?sub_rt=share_pw

2️⃣ #02 Emakimono Viewer
https://note.com/enjoy_emakimono/n/n2f70c08234d3?sub_rt=share_pw

3️⃣ #03 from RDB to Network
https://note.com/enjoy_emakimono/n/n309d96546d6b?sub_rt=share_pw

4️⃣ #04 AI Collaboration
https://note.com/enjoy_emakimono/n/nd4e4c797aa6f?sub_rt=share_pw

5️⃣ #05 Vital / Emergent
https://note.com/enjoy_emakimono/n/n7338372a264c?sub_rt=share_pw

いいなと思ったら応援しよう！