イラスト表現やチラシのような表現に WebGL を利用したアイスランドにあるカフェ・バーの Anna Jóna ウェブサイト

doxas : 2022-06-08 13:03:10

首都レイキャビクにてオープン

今回ご紹介するのは、アイスランドにあるカフェ Anna Jóna のウェブサイトです。

バーやレストランという側面もあるお店みたいで、サイト内には店内の様子を撮影したと思われる写真も掲載されているのですが、まあ北欧のおしゃれな雰囲気がひしひしと伝わってくるような感じです。

WebGL は 2D 的な表現が中心ですがとてもなめらかにグラフィックスが処理されていて気持ち良いです。

今回のサイトは一見すると WebGL 使ってない感じに見えるというか、WebGL を使わなくても普通にできそうな感じというか……

大袈裟な WebGL 感っていうのが無いんですよね。

これは良い意味で書いてるのですが、ちょっとしたさりげない表現に WebGL が使われているような感じの実装です。

この窓越しに店内の様子が見える場面も、たぶん WebGL だと思うのですが、こういうのも WebGL を使わなくたってまあできなくはないと思うのですよね。

実際、WebGL は一切使わずに普通にスプライト的に画像を配置している場面もあります。

中盤あたりで出てくる料理やカクテルのイラストが出てくる部分は、たぶん WebGL を使っていないと思います。

本当に必要なところに、必要な粒度で WebGL を、という設計になっている感じです。

さらにサイトを下にスクロールして進んでいくと、今度は背景の色が変わるとともに、店内にはミニシアタールームもあるよ～みたいなことが書かれたセクションが出てきます。

ここでは画面全体を覆うようにイラストが出てくるのですが、どうやらここは WebGL で描画されてるっぽいんですよね。

ライトの光や、スクリーンから流れてくる光の表現が、上手に演出されていると思います。

また、その下にはチラシというかポスターのようなものも表現されている箇所があり、ここではマウスをホバーさせてやると紙がめくれるようなアニメーションを見ることができます。

余白というか空間的な広がりが多く取られていて、どこかゆったりとした雰囲気がサイト全体を通じて感じられるデザインで、なんともおしゃれですよね。

いわゆる EC サイトのように操作性や UX が重視されたサイトとは違い、空気感をしっかりと演出することに特化した構成になっていて、そういう意味ではすごく成功しているなと個人的には感じました。

個人的にはシアタールームの場面の表現が、映写機の光がチラついたりする様子も含めてすごくステキだなと思いました。こういう WebGL の使い方も 3D 表現とはまた違った意味でいいですよね。