様々な国際記念日などをピックアップしイラスト化した EPIC days がおもしろい

doxas : 2021-01-21 14:33:24

キレイで楽しいイラストはどれも見応えがある

今回ご紹介するのは、WebGL を利用したウェブサイトの開発ではたびたび名前を目にする、EPIC Agency がリリースしているサイトです。

今回のサイトでは直訳すると「国際デー」となる International day をテーマにしていて、恐らく EPIC のスタッフがピックアップしたいくつかの国際デーについて、イラスト化されたものと一緒にそれら記念日が紹介されています。

国際デーについて調べてみると、国連のような機関が設定しているものから各種団体が設定しているものまで様々あるようですが…… 今回のサイトは必ずしも国連などの機関が制定したものではない記念日も含まれているみたいです。

リンク:

EPIC days

数値を立体化しただけで空間的広がりが生まれる

今回サイトでは立体的に動くオブジェクトとして、記念日の「日」の数値を立体的なジオメトリにしたもの、さらに登場するイラストを立体的にしたものの2種類の 3D オブジェクトが登場します。

しかしどちらかというと 3D であることを主張しているという感じではなく、あくまでも 2D のいわゆる普通のウェブサイトとしてのインターフェースを保持しながら、ちょっとしたエフェクト的に 3D の表現を活用している、という雰囲気です。

こういう 2D と 3D のちょうどいいバランスを見極めるのって、簡単そうで難しいんですよね。

January の 01 と言えば、世界共通の記念日ハッピーニューイヤーですが、これは確かに国際機関が制定したような記念日ではないと思いますので……

やはり、EPIC のメンバーが彼らの心象風景に合わせて選択した記念日が使われているのだと思います。

ご覧のとおり、画面の左側には立体の数値のオブジェクトが表示されるようになっており、中央~右側にかけてイラストが出てくる感じですね。

イラストはどれもちょっとずつテイストが異なっており、普通に味わい深い作品がたくさんあります。

また、静止画でキャプチャするのが実に難しいのですが……

この記念日のイラストが出ている状態のビューでは、スワイプ操作を行うことで次々に記念日を切り替えながら閲覧していくことができるようになっています。

このスワイプ操作時のアニメーションが滑らかでとても素晴らしいさわり心地になっていて、ほんの少しイラストの部分が波打つように動くんですよね。

ユーザーの操作に対して視覚的なフィードバックが適切になされており、それによってページを捲っているような感覚がうまく表現されているなと感じました。

今回のサイトでは、想像で書いてしまうんですけど後ろにある数値の部分と手前にある画像の部分を別々のプロセスで描画してるんじゃないかな……

数値の部分は結構画角が狭いカメラ設定でレンダリングされているような感じがあり、これは意図的に狙ったものなんじゃないかなと思います。

一方でイラストのほうは極端に歪んだりしないので、それによって無意識のレベルで数値とイラストとの間に物理的な距離を感じられるようになっていると思います。(それを狙ってやっているかどうかはわからないですが……)

シンプルな 3D シーンですが、いろんな工夫が凝らされたサイトだと思います。

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

リンク:

EPIC days

share

follow us in feedly

search

search

monthly

sponsor

social