Pixi.js を利用して仏閣の独特な静謐さをウェブ上で見事に表現した実相山 正覚寺のウェブサイト
独特な空気感が面白い
今回ご紹介するのは、東京は中目黒にある正覚寺のウェブサイトです。
お寺のウェブサイトとしてはびっくりするくらいオシャレなサイトに仕上がっているのですが、だからといって派手ということでもなく、どこか神秘的で荘厳な雰囲気を感じさせる、独特な空気感のあるウェブサイトとなっています。
WebGL の実装としては Pixi.js を使っているみたいですが、ノイズを使ったディストーションエフェクトでシーンの切り替わりなどを表現しています。
リンク：
いろいろな技術を上手に組み合わせた実装
今回のサイトのトップページは、ロゴマークとグラデーションが絶えず流れるように動く独特な雰囲気のビジュアルです。
あんまり見たこと無い動きというか……表現というか……
不思議な感じがします。
ただ、背景の部分はどうやら動画を流しているだけみたいですね。ロゴの部分にはマウスカーソルで干渉することもできるので、ここは Canvas で動的な表現を行っているようです。
ロゴマークのところも、なんか一見するとシェーダを使って動的に変化するグラデーションを生成しているのかなとも思いましたが……
もしかしたら、背景に流れている動画をそのままテクスチャに使った上で、その UV だけをマウスカーソルの動きに応じて歪めているのかもしれないですね。若干、端の部分が切れたような感じに見えることがありますが、これは UV が範囲外に出てしまってるんだと思います。
インタラクティブ性のあるトップページから、少し下にスクロールしてやると、今度はいくつかの印象的な動画を使ったセクションが出てきます。
動画自体がすごくきれいな仕上がりになっていていいですね。
画面の左側に表示されるタイトル部分をクリックしてやると、全編を通しで閲覧することができます。
また、このページ上でさらにスクロール操作を行うと、ノイズを利用したディストーションエフェクトを見ることができます。
こちらは今どき珍しくもないというか…… よく見かける表現ではあるのですが、お寺という神秘的な空間を上手に演出したエフェクトとして、相性が良いなと感じました。
静止画で見るとノイズでめちゃくちゃ歪んでいるように見えますが…… このノイズディストーションエフェクトはほんの一瞬のことなので、実際にサイトで見ているときはそこまで過剰な演出にも感じないと思います。
色使いや空気感がとても丁寧に整えられている印象で、WebGL を使っていない各種ページ上もとても美しいと感じます。
フォントの使い方、画像の使い方、またサイト全体に実装されたトランジションの手触り感など、どれもとても丁寧で落ち着いた雰囲気です。
きれいにまとまった美しい実装だと思います。
ぜひチェックしてみてください。
