全編が 3D コンテンツとしてド派手に演出されたオリジナリティあふれる OFF+BRAND のマニフェスト
とにかくビジュアルの圧がすごい
今回ご紹介するのは、OFF+BRAND が公開しているマニフェストを、WebGL でゴリゴリのインタラクティブコンテンツにしちゃったよ～ というウェブサイトです。
一般に、企業などが掲げるマニフェストではそのビジョンや目標、コアバリューみたいなものが語られることが多いと思うのですが、それを WebGL 製のスペシャルサイトとして実装したというものみたいです。
最初はどういうサイトなのかいまいちよくわからないまま適当に触っていたのですが、５つあるセクションそれぞれで、固有のユーザーアクションを行うことでマニフェストの内容を読むことができるようになります。
リンク：
まるで古文書を集めているような気分
今回のサイトは、５つの文章でマニフェストを表現しているのですが、最初の状態ではそれぞれの文章は隠された状態になっており、読むことができません。
画面の右端にある CLUES（ヒントの意）にカーソルをホバーさせると、どのようなアクションを行えばよいのかのヒントが表示されます。
５つあるマニフェストにそれぞれ関連したアクションが、個別に５種類用意されている感じですね。
求められる操作は、それぞれ難しいものではありません。
いわゆるウェブ上でユーザーが行うことが多いなんらかのアクションで、マウスまたはキーボードを利用します。
ヒント無しで見つけるのは相当無理があるとは思いますので、ヒントを見つつどのような操作をしたらいいのか考えてみるとよいでしょう。
若干ネタバレになってしまいますが、該当する操作を行うとそれ専用の 3D シーンが現れます。
５つある専用の 3D シーンに移行しただけでは、まだ実績解除とはなりません。
各セクションの実績を解除するためには、そのセクションに入るために利用したユーザーアクションを、さらに複数回、連続で行います。
たとえばスクロール操作なら、さらにどんどん追加でスクロールする、といった具合ですね。
すべてのユーザーアクションを網羅して、５つのマニフェスト文章を集めましょう。
今回のサイトでは、豊富な 3D シーンが用意されています。
また、それぞれのシーンはかなり作り込まれた内容になっていて、それ単体でのビジュアルの迫力も素晴らしく、全体としてのグラフィックスの質感がとても高いです。
ブラーを多用しているなど、どうしても表現として負荷の高い要素が複数組み合わさっていることもあり、動作はかなりスペックを求められる感じがあります。
しかし、多少負荷が高くても見る価値のある、素晴らしい完成度のウェブサイトになっていると思います。
ぜひチェックしてみてください。
