まるで線画のイラストのような質感を持った多彩な 3D シーンがおもしろい Accueil のウェブサイト

doxas : 2025-01-31 12:08:00

ポップなビジュアルがおもしろい

今回ご紹介するのは Accueil というブランディングを手掛けるフランスの企業のウェブサイトです。

ブランディングやコンサルティングを手掛ける企業のウェブサイトのビジュアル、というと、もちろんひとによりそれぞれ差はあるでしょうが、今回のケースのようなポップな雰囲気ってちょっとめずらしいような気もします。

いわゆるコミックや漫画のような、線画調の 3D シーンがなんともおもしろい、素晴らしい仕上がりのウェブサイトとなっています。

今回のサイト、シンプルな線画風の 3D シーンで構成されており、特に WebGL や CG に対する知見がない場合はビジュアルとしての圧は一見すると控えめに感じるかもしれません。

しかし WebGL 実装という意味では、こういう枠線みたいなのを描画することって実は普通に CG を描画するよりもコストが大きいですし、いろいろ考慮しないといけないことも多くなりますし、見た目の印象とは裏腹にすごく技巧的なウェブサイトだと思います。

トップページの冒頭、キービジュアルの部分などではマウスカーソルが立体化したようなオブジェクトが自由気ままに空間を行き交う様子が描かれます。

こういう自走するオブジェクトのことをしばしば boid と呼んだりしますが、WebGL で boid を立体的に動かすのって結構手間が掛かることなので、これも見た目のシンプルさに反してすごく手間が掛かっている実装だと言えると思います。

今回のサイトのビジュアルはミニマリストっぽい感じとポップな印象が同居していて、なんとなく雰囲気は優しい感じなのですが、WebGL 実装的にはバキバキに尖っていてそれがまたいいですね。

そしてさらに、下層ページを開いてみるとあらためて驚かされるような演出がシレッと出てきます。

各下層ページごとに、ヘッダ部分（冒頭部分）に固有の 3D シーンが用意されています。

細い針金のようなオブジェクトが生きているかのように動いたり、フォントが 3D のバルーンになって浮き上がったり……

それぞれのページごとにまったく違う仕込みがしてあって、こっちもめちゃくちゃ技巧的でかっこいいですね。

見る人が見ればその凄さがわかる、かなり硬派な WebGL 実装のサイトだと思いました。

トップページにある矢印のようなオブジェクトが飛び回っているシーンを絵やイラストに例えるとするなら、美麗で荘厳な絵画というよりはちょっとした落書きみたいな印象を受けるかもしれません。

しかし今回のサイトの実装は、そういったライトなイメージに反して美麗で荘厳な絵画にも負けないくらい工夫と技巧が凝らされたものだと思います。

ウェブサイト全体のデザインとの調和も見事で、3D のすごく手の込んだ実装なのに、実に自然に演出がサイトに溶け込んでいます。