透明感のあるオブジェクトや美しい背景が描き出す世界観が見事な JIII ATELIER のウェブサイト

doxas : 2025-08-26 12:25:07

可愛らしく美しいトーン

今回ご紹介するのは、JIII ATELIER のウェブサイトです。

こちらは大阪を拠点に活動されている中路裕美さんの屋号なのかなと思うのですが、英語と日本語でのそれぞれの表記があり、視点がグローバルな感じに仕上がっていますね。

WebGL は演出上とても重要な役割を担っていますが、それ一辺倒にならずにサイト全体としての統一感を重視した作りになっていると思います。

今回のサイトは、WebGL を使っていくつかの演出を行っています。

わかりやすいのは、ページの冒頭から登場するロゴの 3D モデルでしょう。こちらは透明感のあるマテリアルで、なんとも目を引きますよね。

スクロールに連動して姿勢が変化するなどしつつ、サイト内の随所でこのロゴが登場します。

WebGL に詳しくない人の場合、このロゴマークを見ても「最近こういう質感よく見るよね～」くらいにしか感じないかもしれませんが……

実際に動いている様子をよく観察してみると、すごく丁寧に、しっかりと作り込まれていることがわかります。

というのは、サイト内で横スクロールしている要素などが 3D オブジェクトのツルツルとした表面に映り込んだように描画されます。

こういうのって見た目以上に実装するのが難しいので、気がついたときはマジでビビりました。

また、3D オブジェクトだけではなくて実は背景の淡いグラデーション部分も WebGL で実装されていると思います。

ぼんやり見ていると気が付かない人もいるかもしれませんが、実は絶えずグラデーションの模様が変化しながら動いているんですよね。

ウェブサイト上に配置されている各種画像なども同様のトーンで統一されており、デザインやスタイルという意味でもレベルが高いと感じました。

今回のサイトの WebGL 実装は、ものすごく奇をてらったものというわけではないと思いますが、見た目以上に丁寧に作り込まれている感じがあり、しかもそれはわかる人にしかわからない感じになっていると（故意か偶然かはわかりませんが）個人的には感じました。

たぶん HTML 要素が 3D オブジェクトに映り込む部分とかは、これ以上目立つようにしてしまうと逆に露骨に、過剰な情報量になってしまうような気もするんですよね。

明確に「オブジェクトに HTML 要素が映り込んでいるな～」と気がつく人はごく少数かもしれませんが、そういったさりげない部分に対する作り込みがサイト全体の雰囲気を間違いなく底上げしていると思いますし、すごくレベルの高い WebGL 表現だなと思いました。