ゴッドレイ風のエフェクトを効果的に利用した独自の世界観がかっこいい PHQ のウェブサイト

doxas : 2024-05-09 12:12:56

シンプルだけどかっこいい

今回ご紹介するのは、クリエイティブ・エージェンシー PHQ のウェブサイトです。

WebGL を効果的に利用したエフェクトがサイト内各所で上手に取り入れられており、やや古典的な表現ではあるものの、逆にそれがいい意味で味になっています。

ユニークで、ユーモア。

すごく丁寧でおもしろいウェブサイトです。

今回のサイトでは、WebGL を用いた表現は原則としてモノクロで描画されます。

また、WebGL 実装の種類としては１種類だけで完全に演出用として割り切って実装されている感じですね。

トップページの冒頭部分のほか、各下層ページでも冒頭に同様の実装が埋め込まれたかたちになっています。

さて…… これ、静止画で見てもなにがなんだかよくわからない絵になってしまいますね。

カーソルを動かすと、いわゆるゴッドレイのような感じで光と影のラインが描かれるようになっているのですが、静止画だとその味わいがまったく伝わりません。

これはぜひ、実際にサイトに行って見てみてほしいところです。

光と影の織りなす柔らかな陰影は、美しいとさえ感じるような見事な味付けになっています。

WebGL でこういった効果を実装したことがある方なら、どういうふうに実装すればこのような表現ができるのか、想像できるかもしれませんね。

今回のケースでは、かなりノイズが乗ったようなビジュアルになっているので、まるで古いモノクロフィルムの映画を見せられているかのような、独特な風合いになっています。

これも静止画では伝わりにくいというか伝わらないと思いますが、実際のサイト上の様子はたまに明度が変化するような点滅効果が施されていたり、フィルムにホコリが付いたような模様が時折現れるようになっていたり、細かい工夫がたくさん盛り込まれています。

今回のサイトは演出部分こそモノクロですが、その他の要素については結構カラーのまま置かれているパーツも多く、演出部分とコンテンツ部分でしっかりと表現を分けている感じがします。

かといってそれによってチグハグな印象になることもなく、派手すぎず地味すぎない、すごくバランスの良いデザイン・演出だなと個人的には感じました。

ゴッドレイのようなエフェクトって実装自体はそんなにむずかしいものでもないのですが、今回のサイトの実装は緩く優しいグラデーションが上手に実装されていてレベルが高いと思います。