全編 3D シーンで構築されたアニメ作品のような仕上がり! 日本のクリエイティブエージェンシー ZIZO のウェブサイト

doxas : 2020-02-19 15:25:42

日本のカルチャーにフォーカスした演出がたくさん

今回ご紹介するのは、株式会社 ZIZO が提供する WebGL 製のウェブサイトです。

たぶん、海外向けのコーポレートサイトなのかな…… 国内向けには、もう少し文章で説明が付与されたコーポレートサイトがあるのですが、今回のサイトにしてもそちらの国内向けコーポレートサイトにしても、すごく社風や組織の文化が感じられる独特な作りになっています。

全編 3D で組まれた今回のサイトには、楽しい仕掛けがたくさん盛り込まれています。

リンク:

We are ZIZO - Digital and Creative agency in Japan

スクロール操作、あるいはオートパイロットでも閲覧可能

今回のサイトは、ローディング画面からすごく凝った作りになっており、日本語の文章を縦書きで表現する方式が取り入れられたいい意味でアクセントの強い演出からスタートします。

日本人が英語のタイポグラフィなどを見たときに感じる「洗練されたかっこいいイメージ」を日本語で表現していて、逆に海外のユーザーから見たらすごくかっこよく、あるいは可愛らしく見えるのではないでしょうか。

すべてのロードが完了すると、今回のサイトで描き出される「ZIZO ワールド」が現れます。

空中庭園のような空に浮かぶ巨大な台地の上に、桜の木や鳥居といった、日本の文化を感じさせるオブジェクトが並んでいます。

スクロール操作を行ってやることで、このワールドの中を流れるようにカメラが移動していくのですが、カメラワークがとてもスムーズで、本当に映像作品とかアニメを見ているかのような雰囲気を味わうことができます。

カラフルなシーンの雰囲気も見事なのですが、今回のサイトではシーンがモノクロで描画される瞬間があったり、一部の文字のシルエットが重なったところだけが異なる質感で描画される瞬間があったり、演出面もかなりこだわって作られています。

特に、特定の文字のシルエットが重なった部分だけがワイヤーフレームになる演出など、なかなか独特で見事ですね。

3D や WebGL の扱いに慣れていないと今回のサイトのような作品は作れないと思いますので、実装された方の技術力の高さがうかがえます。

キャラクターのデザインも可愛らしいですし、本当に見ていて楽しいサイトです。

今回のサイトでは、スクロール操作を行うことでカメラが自動的に動いて様々なシーンを見ることができるのですが、スクロール操作を行わなくても自動的にシーンが進んでいくように、オートパイロットを設定することもできます。

メニューを開くと日本のコーポレートサイトへのリンクなども置かれていますが、本当にこの組織の持つ空気感が、どのサイトを見てもしっかりと表現されていてすごいですね……

WebGL のテクニックとして紹介したい細かいポイントがたくさんあるのですが、全部を説明してしまうのも野暮かなと思いますし、ぜひ実際にサイトをご覧になってみてください。いろいろな工夫が凝らされており、参考になる点も多いと思います。

ぜひチェックしてみてください。

リンク:

We are ZIZO - Digital and Creative agency in Japan

share

follow us in feedly

search

search

monthly

sponsor

social