3D シーン内に散りばめられたパーティクルを用いてさまざまな表現を行う Heidelberg Materials のウェブサイト

doxas : 2025-09-25 12:23:30

パーティクルが状況を説明する

今回ご紹介するのは Heidelberg Materials というドイツの企業のウェブサイトです。

今回のサイトはおそらく、脱炭素という世界的な社会問題にフォーカスした内容のもので、同社がどのようにそれに向けた取り組みをしているのか、ということを６つのセクションで説明しています。

それぞれのセクションごとに 3D モデルの形は違いますが、徹底してパーティクルを用いて様々な表現が行われているのが特徴かなと思います。

今回のサイトの 3D 表現は、先にも書いたようにすべてがパーティクルによって構成されています。

いわゆる面（ポリゴン）を持った 3D モデルはアイコン的な役割をするものくらいしか出てこないのですが、パーティクルが立体的に、しかも結構ダイナミックに動くので、3D 感は強く感じます。

背景のグリーンの色彩も、おそらくですが動画などではなくインタラクティブに生成しているんじゃないかなと思います。

コンテンツ全体は６つのセクションがあり、それぞれにいわゆる下層ページのような感じでより詳細なコンテンツが用意されています。

いわゆる文字などを多く使って読ませるタイプのものがある一方で、たとえば地球の形をしているオブジェクトが主役のセクションなどでは、それ固有の表現なんかも見られますね。

インタラクティブかつ、ユーザーが楽しみながら情報を閲覧できるように工夫されている感じがします。

個人的におもしろいなと感じたのは、パーティクルしかほとんど出てこないのに、3D シーンにきちんと意図が込められている感じがすること、またその巧妙さです。

背景に散らばっているパーティクルの量の違い、というのが一番わかりやすいと思うのですが、どういうふうに演出すべきかを注意深く検討したうえで作り込まれている感じがします。

カーソルの動きに応じてインタラクティブに変化する部分なんかも、たぶんあえてこのくらいの落ち着いた印象に留めているんでしょうね。

今回のサイトは絵面だけを見ると、パーティクルが飛んでるだけですし背景も似たようなトーンの色彩なのですごくシンプルに見えるかもしれません。

ただ個人的には、パーティクルというシンプルな道具を用いながらも、そのなかでいかに印象的に、かつ効果的にシーンを構築するべきか、じっくりと意図を持って設計されているように感じました。

なにか物販をするようなタイプのプロモーションとはまた違った趣のウェブサイトだけに、こういう作り方がぴったりだなという印象を持ちました。