当サイトでもすっかりおなじみの WebGL 使い ikeryou（池田亮）さんが代表を務める devdev Inc. のウェブサイト

doxas : 2021-08-27 13:59:31

ジェネラティブアートのようなテイストがかっこいい

今回ご紹介するのは、当サイトではすっかりおなじみの池田亮（@ikeryou）さんが代表を務める devdev Inc. のウェブサイトです。

池田さんは過去には WebGL スクールの講師として登壇してくださったこともありますし、何度か実際にお会いしたこともあるのですが仕事に対する取り組み方や考え方など、いろいろな視点から深く考察されていてすごいなといつも感心させられます。

今回のサイトはどこかジェネラティブアートのようなテイストのビジュアルになっていますが、サイト内のコンテンツはほぼトップページのみなので、まだベータ版という感じなのかもしれません。

がっつりリニューアルされてしまう前に紹介したいなと思ったので、今回取り上げさせていただきました。

今回のサイトはトップページのみの構成で、そこにリンクが置かれているだけのシンプルな内容です。

必要最低限の内容でとりあえず公開した、という感じのベータ版的なサイトなのかもしれませんが、メインビジュアル１つでも十分に楽しめるインタラクティブなウェブサイトとなっています。

サイト上に現れるグラフィックスは、社名などの文字のパーツよりも手前のレイヤーに描かれているようで、かなり迫力と存在感がありますよね。

スクリーンショットではちょっと見えにくいと思うのですが、全体を構成する 3D の要素としては、ボックス、長方形のワイヤーフレーム、丸い形のパーティクルが主な要素です。

ボックスは 3D で描かれますが、ライティングで面ごとの陰影が表現されたりするわけでもないため、一見すると 2D 的な印象を受けるかもしれません。

この 3D と 2D の中間みたいな特徴的なビジュアルがそのままこの作品の味にもなっていて、掴みどころのない不思議な質感を生み出しているなと感じます。

また、マウスカーソルの位置に応じたインタラクティブな反応も、今作の特徴の１つでしょう。

この上の写真を見ると、各種のオブジェクトが画面の右側に寄っているように見えるかと思いますが……

このときは、カーソルが画面の左側、ちょうど社名表示されているあたりに置かれていました。

カーソルの位置を割けるように、オブジェクトがダイナミックかつ、やや慣性を伴ったような軌道を描いて動いていきます。単に素直にカーソルを避けるようにするだけなら簡単ですが、今回のケースのように慣性っぽい動きをつけるとなるとプログラムが途端に複雑になるので……

そのあたりにも注目しつつ、動きを観察してみると面白いかもしれません。

ページ内のオブジェクトの色はいくつかのプリセットの中からランダムで選ばれるようです。

池田さんの Twitter や facebook の投稿では、このサイトで使われているようなジェネラティブアートっぽいテイストの作品がたくさん公開されています。

普段からプロトタイプを作るようなイメージで様々な表現を模索されているのだと想像しますが、それらの作品はどれも独創的で、他には見られない魅力を持った作品ばかりです。