CSS 3DとJavaScriptの習作として制作された、めくれる3Dデジタル写本デモ。
本やテキストをクリック、または下のボタンでページをめくることができます。
Interactive Web Art
巻物（スクロール）から冊子本（コデックス）への移行は、人類史における情報インタラクションの最も偉大な飛躍の一つでした。
巻物は最初から最後まで順番に読む必要がありましたが、コデックスは任意のページへの即座の「ランダムアクセス」を可能にしました。このパラダイムシフトこそが、今日のハイパーテキストやWebナビゲーションの源流にほかなりません。
本デモでは、その古典的な「本」というマテリアルを、現代のWebフロントエンドの3D表現によって再解釈します。
ブラウザの2次元平面に立体的な「奥行き」をもたらすために、CSSの3D機能を使用しています。
大元のコンテナに設定された perspective が視点の位置を決定し、めくられる各ページには transform-style: preserve-3d を指定して親子要素の立体関係を保持しています。
また、ページの表裏は backface-visibility: hidden によって制御され、めくられた裏側だけが的確に浮かび上がるよう設計されています。
かつて修道院の暗い書斎で、写字生（Scribe）が手作業でインクを走らせて本を書き写したように、現代では開発者がAIコーディングアシスタントと対話しながらコードという「呪文」を紡いでいます。
AI（OpenAI Codexなど）は、私たちが求める設計思想や要件を解釈し、素早く正確なコード片を出力します。人間は編集者、あるいは編纂者として、それらを美しく調和する一つのアプリケーションへと組み上げていきます。
下のボタンを押して呪文を唱えてみましょう。AIがキャンバスコードを「召喚」し、本の上にインタラクティブなアートを描き出します。
専門学校でのGAS（Google Apps Script）の研究から始まった私のプログラミングの旅は、自動化という「実用性」だけでなく、フロントエンドがもたらす「感情の揺らぎ」や「視覚体験」の探求へと広がっています。
技術は常に進化し、AIが私たちのコーディングスタイルを変えようとも、「誰かにとって心地よく、驚きに満ちた体験を創造する」というものづくりの本質は変わりません。
この手元の小さなデジタル写本が、その新しい一歩を証明しています。
Nishijima.Dev Portfolio