スクロールと連動した不思議な感覚が面白い! 日本のウェブ制作会社の WebGL 実装!
不思議でポップな世界観
今回ご紹介するのは、日本のウェブ制作会社である、株式会社コンテンツさんのウェブサイトです。
公開直後に結構話題になったので、既に見たことあるぞという人も多いかもしれませんね。
こちらのサイトは WebGL の高速な描画能力や 3D の表現を活用しながらも、2D としても面白い見せ方をされていて、とても工夫された表現が素晴らしいですね。
スクロールすると何が起こるのか、ワクワクしながら閲覧できます。
動的に形が変化する様子も楽しい
今回のサイトの特徴は、3D のような、はたまた 2D のような、まるで立体が飛び出す絵本を見ているかのような楽しさにあると思います。
ページの冒頭では、画面のなかに何やら怪しげな物体がウネウネしながら現れます。こいつがいわば主人公のような役割で、各コンテンツを牽引していってくれます。
サイト全体がひとつの縦に長いコンテンツになっていて、スクロールすることで、少しずつシーンが変化していきます。
背景の写真が切り替わりながら変化していく冒頭部分は、本当に絵本かなにかを見ているような気分にさせられます。
そのままスクロールを続けていくと、不意に壁のようなものが現れ、コンテンツの内容が切り替わったことを見ている人にさり気なく教えてくれます。
そしてここがなかなか圧巻なのですが、壁のようなものが登場するのと同時に、形が不定だったウネウネくんが、ここで突然文字の形になるんですね。
しかも、よく見てみると、色が微妙に半分ずつ混ざりあっているような、そんな形をしています。
この表現はとても面白いですし、ユーザーに不思議なインタラクションを与えつつ、コンテンツの変化も同時に伝えてくれています。
さらにスクロールし続けていくと、上の画像にあるように、完全な 3D 表現になる部分も用意されています。
アブストラクトな雰囲気は統一されていますが、2D と 3D が突然シームレスにつながっていく様子はあまり見かけない面白い表現方法だなと思いました。
スクロール操作中は、ウネウネくんも常に画面内を動き回っており、文字としての姿だけでなく、活発で楽しげな雰囲気の演出に一役買っています。
今回のサイトは、一番下までスクロールしてしまうと、冒頭にあったシーンに自動的にフォールバックするように実装されているようで、永遠にスクロールし続けることができるという不思議な構造です。
サイトの中心に一本の通路があり、そこから各コンテンツに枝分かれしていくというちょっとトリッキーな構成ながら、ポップな雰囲気がとても心地よいものとして見る人を楽しませてくれますね。
WebGL の使い方にはいろいろな手法があり、またそれらを使ってどのような表現を行うことができるのかを考えると、それこそ組み合わせは無限にあります。今回のサイトはどちらかというと WebGL が主役級の扱いになっていますが、海外では、ワンポイントのアクセントとして WebGL が利用されるケースも多くなってきているように思います。
日本の企業のウェブサイトにも、これほどのレベルのデモがちらほらと見受けられるようになってきて、しかもそれが多くの人の話題になったことは個人的にも嬉しい出来事でした。
様々な形、あるいは見せ方で、日本のウェブにもより多くの WebGL コンテンツがやってくることを期待させる、素晴らしいサイトだと思います。
ぜひチェックしてみてください。