写真やメモをボードに貼り付けたような 3D ビューがかっこいい！ LA CASA DE PAPEL の特設サイト
見た目はシンプルだけど……
今回ご紹介するのは、日本では「ペーパー・ハウス」という邦題で知られているスペインのドラマ LA CASA DE PAPEL のウェブサイトです。
こちらのドラマはスペインで制作されたものだそうですが Netflix が権利ともども買い取ったらしく、Netflix で視聴できる人気ドラマとして日本でも話題になったものみたいです。
わざわざ特設サイトを作った感じからすると、新しいシーズンの宣伝とかなんでしょうか…… 私は残念ながら本作を観たことはないのですが、サイトはじっくりお金を掛けて作った感が濃厚に漂っていて、かなり力の入ったプロモーションが組まれているのだろうなと感じます。
リンク：
2D と 3D を上手に使った表現が圧巻
今回のサイトは、最初こそムービーが流れますが、基本的にそこから先はほぼすべてのグラフィックスが WebGL によって描かれたシーンによって構成されています。
ホワイトボードのような面に、メモや写真を貼り付けた感じのシーンが展開されるのですが、この時点で既になんとも重厚な雰囲気がありますね。
薄暗い部屋で壁に対面してこれを眺めているような…… そんな気持ちにさせられます。
このようなボードを眺めているような場面では、カーソルが赤いサークルに置き換えられ、これが視線の役割を担ってくれるようになっていますね。
また、ドラッグ操作を行ってやると、ボードのどの部分に視線を向けるのかを自由に操作することができるのですが、このときに視線の軌跡が赤いラインで残るような演出も発生します。
滑らかに視線移動するアニメーションが動き、スイスイとたくさん動かしたくなるようなインターフェースです。
メモや写真は、それぞれが個別のコンテンツになっています。
クリックして選択してやることでフォーカスされ、少し拡大したような状態で画面の中央にそれがポップアップしてくるような感じです。
このとき、フォーカスしている写真などがカーソルの位置に応じて微妙に動くようになっていて、立体的なオブジェクトとして表現されています。
驚くのは「モノクロの静止画がカラーの動画に変わる」という演出。
突然写真の中の風景に色がついて動き出すのはなかなかおもしろい演出だと思いました。
写真の表面がノーマルマッピングによって微妙に凹凸があるように表現されているなど、CG の知識がある程度あったほうが、より今回のサイトの気合いの入りっぷりは伝わりやすいかもしれません。
一見すると、平面的な空間に画像が無造作に配置されているだけに見えるかもしれませんが、ひとつひとつのオブジェクトは立体的な構造を持ち、しかも表面の質感などにも実にこだわって作り込みがなされています。
とても完成度の高い、素晴らしい実装だと感じました。
ぜひチェックしてみてください。
