著名な四人の女性たち……その内面の美しさまでを表現した Pixi.js 製のウェブサイト Beyond Beauty
2D 系の表現の参考に
今回ご紹介するのは、世界的にも有名な四人の女性たちが主人公のウェブサイトです。
彼女たちの内面の美しさにまで迫るかなり手の込んだコンテンツが用意されており、女性の持つ美しさや強さを上手に表現しているサイトになっていると思います。
音声や画像をたくさん使っていますが、そこに Pixi.js 製のインタラクティブな表現を加えることで、さらにひとつ上の表現が実現されています。
WebGL のシンプルな使い方が光る
今回のサイトは、Pixi.js をメインに使っていることからも想像がつくかもしれませんが、基本的な表現の方向性としては 2D メインです。
ただそのなかにも、コンテンツの前後関係というのがしっかりと意識されたレイヤー分けがなされており、非常にダイナミックな、動きのある表現が特徴的です。
いわゆる普通の 3D 表現とはまた違って、コンテンツとしての階層構造がしっかりと意識されているのがすごいです。
サイトには、主役となる四人の女性たちを様々な側面から捉えた魅力的なコンテンツがたくさん詰め込まれています。
背景部分のふわふわと浮遊するサークル型のオブジェクトなどを含む、多くのオブジェクトが Pixi.js によって描かれているようです。
DOM によって構築されている部分ももちろんたくさんあるのですが、Pixi.js のレンダリング結果として描かれるものも、結構たくさんありますね。
またシーン遷移の際のアニメーション処理などでは、よりはっきりと、WebGL を利用した表現が使われています。
なんと呼ぶのが適切なのか判断に迷いますが……ノイズを利用したフェードアウト演出は、比較的シンプルなものなので演出方法として参考になるのではないでしょうか。
一瞬のアニメーションにも丁寧な仕事がなされていて素晴らしいです
その他、イントロだけでなくメインコンテンツのなかにも、Pixi.js を使った表現がいくつか見受けられますね。
ベースはあくまでも 2D なので、立体のオブジェクトがぐりぐり動くという感じではないのですが、本当にさり気なく動きのある演出が自然な感じでコンテンツに埋め込まれていて、なにか雑誌や新聞などの、紙媒体のメディアを見ているような気持ちになります。
大きめに取られた余白と、画像や文章などのコンテンツとのバランスも素晴らしくて、デザインセンスが見事です。
私はデザインのことはほとんど専門的なことはわからないのですが、それでもこれが優れたデザインの技工と、類まれなるセンスによって作られたサイトであることが感じられました。
特にフォントの使い方がすごく見事だなあと思ったのですが、それを論理的に説明できるわけでもなく、素人目線でただただすごいなあと感心してしまいました。
WebGL の技術という意味では、ほとんど難しいことは行われていませんね。ちょっと考えれば流用できそうな、本当にシンプルな実装が中心です。シンプルな表現でもその使い方ひとつでこんなにも印象的な仕上がりになるのだなと、あらためて考えさせられました。
ぜひチェックしてみてください。