唯一にして無二の透明感に思わずため息がこぼれる Misaki Nakano さんが手掛ける mofu のウェブサイト
天地がひっくり返っても作れる気がしない
今回ご紹介するのは、mofu という法人のウェブサイトなのですが、こちらは @misaki_mofu さんが先日設立した法人のウェブサイトとのことです。
Misaki Nakano さんと言えば WebGL を用いた実績を多数お持ちですし、技術面の解説を詳細に説明した記事を公開されていたりもするので、当サイトをご覧のみなさんであれば名前をご存知なのではないかなと思います。
高い技術と研ぎ澄まされた感性がこんなふうに１つに結実することって…… あるんですね……
リンク：
とにかくその目で感じてみよう
今回のサイト、正直あまりわたしが言及することが無いと言いますか、なにかを言うことが野暮な感じさえします。
こう書くとべた褒めしているかのように映るかもしれませんが、これは本当にお世辞ではなく、他ではこういうウェブサイトはちょっと見たことがない気がします。
もちろん、技術面で素晴らしいというのはもちろんですが、それをこういった形で１つの体裁に整えたというのが本当にすごいなとただただ単純に驚いてしまいます。
ウェブサイトが表示された直後のイントロでは、まず背景の流体のような表現が目に飛び込んできます。
この流体のような表現、恐らくシェーダで実装しているのでしょうがいわゆる Stable Fluids のような感じではなく、独特の層を持った流れのようになっていてとてもおもしろいですよね。
最初は流体のようなバックグラウンドだけが見えている状態ですが、徐々にじんわりと mofu という社名が浮かび上がってきます。
この社名部分に限りませんが、浮き上がってきた文字にはマウスカーソルの動きに対するインタラクションが仕込まれていて、カーソルを素早く動かすことで絶妙な明るさの変化などを楽しむことができます。
ウェブサイトの構造としては上から下までスクロールしていくことでコンテンツが次々と現れるようになっていて、下層ページなどは（いまのところは）無いようです。
各セクションごとにいろいろな仕込みがあり、とにかく立体感と透明感、そしてスムーズなイージングの利いたトランジションによる触り心地など、細部にも工夫が凝らされています。
こういう表現を思いつくということもすごいですが、実際にそれを作り上げてしまうというのがまたすごいです。
WebGL 実装としてはいわゆるシェーダ芸と呼ばれるタイプの実装に近いものかなと思いますが、得てしてこういう作りにしてしまうとシェーダ側で多くの表現を担保しなければならないので、WebGL 実装としての難易度はどうしても高くなってしまいます。
この実装を見て感動したり感銘を受けたりする人がきっと多くいて、真似したい・自分もこういうものを作ってみたいというふうに感じる人も多いと思いますが、ジオメトリを使って 3D 表現するのとはちょっと方向性の違う実装なので、なかなか簡単に真似するのは難しそうに思えます。
背景の模様も、一見すると上から下まで同じものがただ流れているだけに思えるかもしれませんが、見ているセクションによって流れ方が違っていたり、本当に細部にまでとことんこだわって作られていると感じました。
ぜひチェックしてみてください。
