とある学校のハッカソンで作られた架空のアイテムを扱うウェブサイト Aventuria がおもしろい
いろんな意味で味わい深い
今回ご紹介するのは、フランスに実在するとあるアート系の学校が行ったハッカソンで、ウェブコンテンツとして制作されたサイトです。
世界観はどこか中世ヨーロッパを思わせる感じなのですが、赤ちゃんを勇敢に育てるためのトゲだらけのおしゃぶりという架空のアイテムを扱っている、かなり変わった内容のウェブサイトです。
ハッカソンで作られたものとのことですが、サイト内の素材は AI によって生成されたものが使われているなど、いろんな意味で見どころが多いです。
リンク：
WebGL 描画も凝った作り
今回のサイトの WebGL 実装は、大きく２つ存在します。
１つはサイトを開いた直後に表示されるモザイク模様っぽいポストエフェクトが適用されたもの。
そしてもう１つは、サイトをどんどんスクロールしていくと後半で出てきます。
モザイクっぽいエフェクトが掛かっている冒頭のシーンは、なんかあまり見たことがない質感ですごくおもしろいですね。
これはスクリーンショットではちょっと質感として伝わりにくいかもしれないのですが、モザイクエフェクトを掛けて単純に解像度を落としているという感じではなくて……
たぶん先にブラーなどの処理を行ったうえで、それをさらに低解像度化しているような感じに見えます。
とてもビジュアルが凝っていて、サイトを構成するその他の要素との親和性などもよく考えられていますね。
サイト内で使われているイラストというか絵画調の素材に関しては、どうやら AI を使って生成しているようです。
実在はしない架空のアイテムを扱っているわけですから、きっといろいろプロンプトを工夫してイラストを出力させたんでしょうね。
小さな赤ちゃんを勇敢にするためにトゲ付きのおしゃぶりを与えるという、もうコンセプトからしてぶっ飛んでしまっているウェブサイトなのですが、反面しっかりと丁寧に作られていてそのギャップもおもしろいですね。
ウェブサイトの URL を見るとドメインに webflow とあるので、サイト全体は webflow を使って構築しているのだと想像しますが、結構細かく作り込まれており興味深い事例だと思います。
WebGL の実装としても、サイトの冒頭に出てくる若干ぼやけたような感じの質感を伴うモザイクエフェクトはなかなかおもしろいビジュアルをしていて、ただ 3D モデルを置いただけという簡易的な実装とは明らかにかけ離れています。
アイデア、コンテンツの内容、実装と、それぞれおもしろいサイトだと思います。
ぜひチェックしてみてください。
