摩訶不思議な世界を見事に再現！ ハリーポッター外伝となる映画タイトルのウェブサイト！
大人気シリーズの外伝的位置づけの作品
今回ご紹介するのは、あの大人気シリーズであるハリーポッターシリーズの外伝、その映画タイトルのティザーサイトです。
タイトルは「Fantastic Beasts and Where to Find Them」とちょっと長いのですが、どうやらハリーたちが登場するよりも昔の、時間軸的には 70 年ほど遡った時代が舞台のストーリーみたいですね。
今回のサイトは、その映画の広告塔としての意味もあるのでしょう。非常に凝った作りと、驚くようなたくさんの演出が仕込まれた素晴らしいサイトに仕上がっています。
あっと驚くインタラクション
今回の映画は、ハリーポッターシリーズに名を連ねるだけあって、やはり魔法がテーマの中心にあるようです。
その映画のウェブサイトもやはり、まるで魔法のような驚く演出がたくさん仕込まれていて、見ているだけでも楽しいウェブサイトになっています。
まず冒頭のトップ画面からして、既に気合いが入っています。
画面上でマウスカーソルをスイスイと動かしてみましょう。するとそこに魔法のステッキを振ったかのように、白い霧のような光が動的に生成されます。
マウスカーソルの位置をリアルタイムに監視しながら、そこに動的にポリゴンを生成しているのだと思いますが、これはいかにも魔法使いを連想させるような、びっくりする演出ですよね。
ウェブサイトは映画の舞台を巡るような仕掛けになっているのが特徴で、映画内で登場するロケーションをいくつか選択し、そこを探索できるような仕掛けになっています。
地図の部分も色合いこそ地味ですが、非常に高精細でサクサクと動作する様子は見事ですね。
どこか一箇所、目的地を選択すると、その場所の風景が全天球モードで表示されます。
360 度、あらゆる方向を自由に見ることができるモードですが、現実の風景を写真として撮影したものなのか、それとも CG かなにかで作られた映像なのか、ちょっと判然としません。たぶん、人為的に作られたものかなとは思うのですが、時代がちょっと古いような、レトロな雰囲気がよく出ていますね。
この全天球モードからは、一箇所、建物のなかに入り込めるアイコンが浮いている場所があるのですが、そこをクリックしたときのロード中の演出がこれまた凝っています。
このローディング中の画面でマウスカーソルを動かすと、時空がねじ曲がるかのように、ぐらぐらと風景が揺れて見えます。
ロード中も見る者を飽きさせない（ロード中であることを意識させない）空間歪み演出がすごい。
さらに、室内に入るときなどにも、全天球モードが切り替わる瞬間の独特な演出があります。
まるで時空の隙間に吸い込まれてしまったかのように、渦を巻きながら風景が一瞬で消えてしまう様子はシンプルながら効果的な演出だと思いました。
魔法という不可思議なものをしっかりと意識して作られており、見ているだけで映画館に足を運びたくなってしまうような、それこそ不思議な魅力がありますね。
吸い込まれるような演出の他にも、オブジェクトがどこからともなく飛んで来るような、ポルターガイストのような演出があったりもして、ほんとに盛りだくさんです。
超人気シリーズのティザーサイトだけあって、そこに込められているパワーにはすごいものを感じます。
あまりウェブの開発やプログラミングに詳しくない人であっても、これだけ見事に魔法の世界を再現されていれば、一見して驚くこと間違い無しという感じの作りです。
単にウェブサイトを作り慣れているというだけでなく、WebGL を使った立体表現に、どのような工夫をすれば品質価値を高められるのか、そこまでしっかりと練られたサイトのように感じました。
動的なポリゴンの生成による魔法の光のような表現や、空間が歪んだような表現など、よくよく考えてみればシンプルな技術のちょっとしたことの応用です。しかしそれらがサイトの雰囲気に見事にマッチしているのがすごいですね。
ぜひみなさんもチェックしてみてください。
