思いを繋ぐ糸のように――東京オフィスが新設された株式会社スタジオ ディテイルズのウェブサイト！
世界広しと言えどもあまり見かけない演出方法
今回ご紹介するのは、日本の企業のウェブサイトです。
名古屋に本社がある、スタジオ ディテイルズさんが、このたび東京オフィスを新設することとなり、これに合わせて WebGL を利用したページが公開されています。
該当ページでは、まるで思いをつなぎ合わせるかのように、糸のようなオブジェクトを利用した演出が行われています。
あまり見たことのない、珍しい WebGL 実装だと思いますし、非常に雰囲気よく仕上がったサイトは、技術的なことが注目に値するだけでなく、単純に眺めているだけでもどこか心が癒やされるような感覚にさえなりますね。
一本の線が描き出す世界観
今回のサイトは、イントロ部分のデモの実行が基本的には自動で進んでいく感じになっています。
要所要所で、ユーザーがスクロール操作を行うまでは遷移が行われないなど、ある程度のインタラクションは考慮されています。
ローディングが行われている最中も、糸が徐々に伸びていくような演出があるのですが、その「糸」の演出が最初から最後まで印象的に使われます。
これは実際に実行されているところを見てもらうのが一番かなと思うのですが、いくつか画像も踏まえて紹介していきます。
これ、キャプチャ画像だとちょっとわかりにくいかもしれませんが、一本の糸が折れ曲がるようにして陰影を表現しています。
テレビなどの、映像の分野ではこういった演出がされているのを見たことがあるような気もしますが、それを WebGL で実現しているというのが本当にすごいですね。
おそらく、SVG などのパスデータからジオメトリを生成しているのだと推測しますが、動的にこれがぐいぐいと動いていく様子は本当に圧巻です。
上の画像はなるべく縮小しないで切り抜いてみたんですが、どうでしょう。
これだけ精細な表現を一本の線で行っているというのは見事というほかありません。
また、一部にはカーソルの位置に反応してラインが歪むようなエフェクトが仕込まれているところもあり、これは頂点シェーダで行っているようですね。
カーソルの位置と、三次元空間上の頂点を連動させるにはそれなりに難しい計算が必要なのですが、そのあたりも違和感なく実装されているあたりにヤバさを感じます……
ラインで描かれる世界は、糸を使ってなにかがつながっていくような、そんな印象を持たせる不思議な温かさに満ちているように感じました。
東京に新しくオフィスを新設したことを紹介するサイトではあるのですが、名古屋と東京とを、思いという糸が繋いでいくというのが、言葉ではなくビジュアルで表現されていて、本当に感激しました。
個人的には、こういったサイトが日本国内でもどんどん増えていってほしいと感じます。
今回のサイトの WebGL 部分を実装されたのは、ホムンクルス所属の荒井祐一郎（@yuichiroharaiJP）さんだそうで、これだけ WebGL 実装部分のレベルが高いのも納得です。 ※今まさに開催中の WebGL スクールでも講師を務めてくださっており、ほんといつもお世話になります……
今回のサイトは恐らく期間限定公開になるのかなと思いますので、気になる方は早めにチェックしてみてください。
リンク：
HELLO TOKYO· 株式会社スタジオ ディテイルズ | 東京・名古屋のデザイン事務所・グラフィック・WEB・アプリ・プロダクト・ブランディング
