
やらた強い日本へのリスペクトを感じる StringTune のウェブサイトがカオスでおもしろい
クセが強い、だがそれがいい
今回ご紹介するのは、Fiddle-Digital というチームが開発している JavaScript のライブラリ、StringTune のスペシャルサイトです。
StringTune 自体は、WebGL のライブラリというよりは DOM 操作やスクロールの管理などを行うモジュラー設計のライブラリみたいです。
ドキュメントページなども用意されており、導入自体は比較的簡単そうに見えますね。
ここではライブラリの中身ではなく、それを紹介する今回のスペシャルサイトの WebGL 実装について見ていきたいと思います。
リンク:
刀の形をした 3D モデルと「べ」の謎
今回のサイトは、いろんな意味で日本文化へのリスペクトが感じられるサイトになっています。
わかりやすいのはサイト内に無数に配置されている刀の形をした 3D モデルでしょう。それ以外にも、アイコンやイラストなど、日本を連想させるデザインがなされている箇所は多いです。
トップページのファーストビューでは、刀が鞘から少し抜かれたような状態で描かれています。

この日本刀の部分、カーソルでその上をなぞるようにするとモザイクエフェクトが発生するようになっていて、なかなか個性的なビジュアルをしています。
また、刀の刀身やハバキ(刀身と鍔の間の金属部分)には日本語の言葉が書かれています。
Fiddle-Digital という開発元なので、カタカナで「フィドル」と書かれているところまでは妥当に思えるのですが、ハバキの部分にある「べ」の一文字はどう捉えたらいいんでしょうね……
その文字の形状が、記号としてかっこよく見えたとかの理由なんですかね。なんにせよ、サイト内にはいくつか「べ」が出てきます。

StringTune というライブラリのスペシャルサイトだと思うので、基本的にはその機能性や思想がインタラクティブコンテンツのような感じで次々と披露されていきます。
WebGL を使っている箇所もそれなりにありつつ、かといって、WebGL だけでビジュアルを作っているという印象でもなく、CSS なども駆使してさまざまな形でいろんな演出が組まれています。
共通するのは、やっぱり日本への思いがそこかしこから滲み出してくることでしょうか。

日本刀って、日本人から見てもその美しさや機能美には凄まじいものがあると感じますよね。
アニメや漫画の影響もあって、海外でも人気があることも納得できます。
今回のサイトは、日本人の感性とはどこかちょっと違った部分はありつつも、すごく楽しく賑やかに、すごくポジティブにコンテンツがモリモリになっていてなんだか見ていると楽しい気持ちになりますね。
モザイク風のエフェクトとかも個性的でおもしろいです。
ぜひチェックしてみてください。