そんなところまで CSS で作り込むの！？ 逆に WebGL を使ってないのがすごい L’Atelier のウェブサイト
逆の意味で驚かされたウェブサイト
今回ご紹介するのは L'Atelier という機関が公開しているレポート風のウェブサイトです。
こちらの機関、いわゆる研究や分析を主体とする組織みたいなのですが、その分析結果のアウトプットとして今回のサイトが作られた……ということなのかなと想像しています。
ただ、個人的に驚いたのはその分析結果などのデータではなく、ウェブサイトの作りです。
全体的に非常にビジュアルに凝った作りなのですが、びっくりするくらい「WebGL が使われていない」んですよね……
リンク：
Social Mobility in the Digital Age | L'Atelier
CSS で多彩な表現をしつつも WebGL を使った部分も
今回のサイト、当サイトで紹介するサイトとしては非常に珍しく見どころが WebGL ではない部分ばかりです。
なんというか、そんなことまで CSS でがんばっちゃうの！？ と思わずツッコミを入れたくなるような、そんな表現が多く登場します。
たとえば、コンテンツの冒頭に現れるトランプのカード、立体的なアニメーションをしているように見えるのですが、これは WebGL 実装ではなく CSS でアニメーションが制御されています。
その他にも、ページ内に登場する多くのオブジェクトというかグラフィックス全般ですね、これらの多くが WebGL を用いずに実装されています。
ブラーが掛かっていたり、スクロールに連動してアニメーションしたりと、なにも言われずに見たら WebGL かな～ と思っちゃうような多くの表現が、WebGL を使わずに実装されています。
コンテンツの量がかなりあるのですが、本当にたくさんの表現が WebGL 抜きで実装されており、いつになったら WebGL が出てくるんだ、もしや最後まで出てこないのでは、と思わず心配になるレベルです。
静止画をぼかしたり動かしたりすることで WebGL を使わなくてもリッチに見えるよう上手に表現されている。
さて、それではいったいどこに WebGL が使われているのかと言うと、途中でサイコロのようなオブジェクトが出てくるセクションがあるのですが、その場面で唯一 WebGL を利用したグラフィックスが使われています。
これは勝手な想像ですが、たぶん影を表現したかったのかな……
回転するキューブ状のオブジェクトを描くだけならいっそのこと CSS で頑張るということも不可能ではなかったと思いますが、さすがに影を落とすとなると素直に WebGL 使ってしまったほうが楽だろうということになったのかもしれません。
当サイトは WebGL に関するトピックを中心に扱うサイトなので、WebGL 以外の部分にフォーカスしたサイトの紹介の仕方はあまりしないのですが、今回のサイトに関しては本当に WebGL 実装以外の部分が見事すぎて驚かされました。
WebGL を唯一使っている部分も、たぶん影のためにやむを得ず WebGL で表現しているのかなと想像しますが、そのあたりどのような技術的な判断があったのか、実装した人に聞いてみたいような気もします。
これを読んでいるみなさんは、どんなふうに感じた・感じるでしょう。
ぜひチェックしてみてください。
