作品 · Web / WebGL / Claude Code · 2026

The Someone's Tale

ガラスアートのコレクティブとデザインコンサルティングを行っているチームのサイト

概要

「The Someone's Tale」のサイトを制作した。画面を開くと、縦に走るガラスの筋を光が横切っていく象徴的なファーストビューが現れる。この表現とともに、ロゴとして組んだタイポグラフィがアニメーションで立ち上がる。ガラスの筋を光が横切る情景は、彼らが制作しているアート作品と直接つながっている。ガラス越しに、さまざまな現象がどう見えるか。その作品のテーマを、Web 上でも体験できるようにした。

背景

Web 上でも作品の面白さを体験できることを念頭に置き、3D 表現でリブの入ったガラスをつくった。このガラスを通して展示会の作品を感じられ、サイトが世界観の入り口として機能することを目指した。

方法

リブガラスの部分は three.js で表現し、サイトの全面を覆うようにした。縦の筋に2つの光源が当たり、光は自動で動きながら、常に違う顔を見せる。読み進めると、筋の奥の光は作品ごとに色を変える。Detour は橙、trade は緑、Memories は淡い薔薇色。スクロールは Lenis と GSAP でつないで、流れを切らさず閲覧できるようにした。書体は3層に分け、ロゴ、見出し、UI テキストで役割の違いがわかるようにした。

結果

ガラスを Web 上で表現するという試みは、形になった。展示に足を運ぶ前に、作品のテーマを画面で一度通り抜けてもらえる。