これほど多彩な作例が一堂に会すはまさに偉業！ Yuta Takahashi さんの WEB R&D がやばい
努力と継続のちから
今回ご紹介するのは WEB R&D という名前のウェブサイトで、文字通り、ウェブ制作における研究とその成果をまとめたウェブサイトです。
作者は Yuta Takahashi さん（ @yu_cfbif ）で、実はずいぶん前から、ポツポツと SNS 上でその作品を紹介しているのを陰ながら拝見していたのですが、今回はそれらをまとめたウェブサイトを公開してくださった、ということみたいですね。
１つ１つの作品の完成度が高いことはもちろんですが、それらをまとめて紹介する今回のサイトそのものも、非常に完成度が高いです。
リンク：
メタボールや水面などの柔らか触感
今回のサイトでは、メタボールが演出上の中心的役割を担います。
また、メタボールの周辺にある水面や、メタボールが拡張されて表示されるスクリーンのような部分も、やはり水面を想像させるような表現が用いられています。
これらが一種、演出上の軸足のような感じで構築されているのかなと思います。
シーンの中央にメタボールがあり、そのメタボールから飛び出してきた各作品のサムネイルが周辺に並びます。
常に１つはいずれかの作品がフォーカスされた状態になっており、それがまるでスクリーンのような感じの体裁で、画面上部に表示されています。
よく観察するとわかるのですが、周辺に並んでいる多数の作品がなにかこう、種のような感じに扱われていて、スクロールなどの操作を行うと「中央に置かれたメタボールがそれを吸収し、スクリーン状の部分が展開される」という感じになっています。
言葉で説明するとちょっとわかりにくいかもしれないですが……
この上のスクリーンショットは、作品のサムネイルが貼られた球体のようなオブジェクトを、中心にあるメタボールが吸収している瞬間です。
結構一瞬の演出なので、ぼんやり見ていると気が付かないかもしれないですが、メタボールが作品を吸収して投影しているような建付けなのだと思います。
各種作品の完成度がまた素晴らしくて、アイデア、ビジュアルとしての良さ、インタラクティブ性としての触り心地みたいなものが、いずれも高次元でシンプルにまとめられています。
WebGL でなにか作品をつくる、というときに、多くの人がぶつかる壁に「なにを作ったらいいか思いつかない」というのがあると思うんですよね。
まず最初に作りたいものがある場合はよいのですが、なにも作りたいものがないときに、技術の断片だけを知識として持っていても、それをどう活かしたらいいかがうまく結びつかないというのは意外とよくあることだと感じます。
今回のサイトを見ると Yuta Takahashi さんが長い時間をかけて積み上げてきたものが垣間見えて純粋に圧倒される気持ちもありますし、多くの WebGL でなにかを作ってみたい人にとって、ものすごく貴重な事例集になっているようにも感じました。
ぜひチェックしてみてください。
