インタラクティブ性のある淡いグラデーションを用いた背景演出が面白い Demophorius のウェブサイト

doxas : 2022-04-04 13:11:29

明るい背景はクリーンなイメージ

今回ご紹介するのは、医療用の様々な機器や道具を販売している Demophorius という企業のウェブサイトです。

白を基調とした明るい色の背景は、清潔さやクリーンなイメージが重要となる医療機器メーカーらしい、とても明るく透明感のある質感です。

淡いグラデーションを上手に活用しつつ、それらが状況に応じてインタラクティブに変化するようになっていて、見た目は結構シンプルな感じなんですが結構凝った作りになっていると思います。

今回のサイトでは、背景の部分のかなり広範囲に淡くグラデーションの掛かった模様が表れます。

これらの模様は、大きく２つのかたまりから構成されていて、それぞれに似た系統の色が用いられます。たとえば、青の模様とセットになるのはシアン、赤とセットになるのはピンク、みたいな感じですね。

それぞれ、模様は絶えず動いている（座標が変化する）ことに加え、グラデーションの濃淡も同時に変わり続けます。

まるでくもりガラス越しに見た風景のように、かなり広い範囲にグラデーションしているのがわかるかと思います。

これ冷静に考えるとどうやって実現しているのか、パッと見ただけでは判断難しいというか、正確に再現するの結構たいへんかも知れないですね。自分だったらどうやってやるだろうな……

いくつかのオブジェクトを普通にフォグの掛かったシーンに描画して思いっきりぼかす、みたいなことをやってるんだろうか。

かなり複雑なグラデーションで、見ていてなんとも不思議な感覚になります。

また、今回のサイトではシーン遷移の際にもこのグラデーションが活躍します。

スクリーンショットを撮ると単なる淡いグラデーションが掛かったシーンになってしまうので、ここはぜひ実際にサイトで見てみてもらいたいところなのですが、背景のグラデーションが一気に画面全体に広がるようなアニメーション演出が実装されています。

奥のほうにぼんやり見えていたオブジェクトが、まるで四散して画面全体に広がるような感じ、とでも言ったらいいでしょうか。

さらにそこから背景の色が変化するような演出が発生し、各製品ごとのテーマカラーを用いた場面になります。この色の変化もスムーズでとても自然な仕上がりになっていて見事です。

3DCG やシェーダを自分で触るようになるとわかるかと思うのですが、グラフィックスプログラミングにおいて「ぼやっとしたコントラストの低い状態」っていうのは表現するのが難しいです。

もっとわかりやすく端的に言うなら、ぼかすという行為は結構コストの高い処理なので、ここまで大胆に形状が変化するグラデーションは簡単そうで結構複雑なことをやってるんじゃないかな～という想像ができます。

現代では CSS でもぼかしを掛けることができますが、最終的にそれを処理しているのは同じ GPU や CPU なので、負荷が高くならないような工夫も必要になります。