
ストーリーを感じさせるさまざまな演出が見ている者を飽きさせない CAPPEN のウェブサイト
インタラクティブ性のある演出がたくさん
今回ご紹介するのは CAPPEN というスタジオのウェブサイトです。
いわゆるウェブ制作を主戦場とするスタジオだと思うので、もしかしたらその事例を見たことがあるという方もいらっしゃるかもしれません。
今回のサイトでは至るところに演出が盛り込まれており、WebGL はそのなかでもあらゆる場面で活用されています。
リンク:
Award-Winning Website Development Studio in Miami
流体とも違う個性的なエフェクト
今回のサイトでは、かなり多種多様な演出が見られます。
そこには WebGL を用いているケースもたくさんあるのですが、そうでないケースも含めて本当にいろんな演出が盛り込まれていますね。
トップページではインクのようなかんじのカーソルに追従するエフェクトが発生しますが、流体とも違った独特な質感です。

これなんて言ったらいいのかな…… カーソルが動いた位置に一定量のインクが落とされ、それが徐々に蒸発して消えていく、みたいな感じです。
ゆっくりとカーソルを動かしてみると、流れが発生しているというよりはインクが落ちてシミを作っているという感じで、なんともおもしろいエフェクトだと思います。
また、トップページからスクロール操作を行うと黒い背景の部分がグッと画面全体を覆うように広がって、また違った雰囲気になります。

CG としては金属の輪が連なったような感じのオブジェクトが WebGL で立体的に描画されるのですが、これが一種のロゴというか、アイコンのような感じで多くの場面で描かれます。
スクロールに連動して様々な要素が現れては消えていき、その一連の流れも工夫が凝らされたモーションになっています。
こういうサイトは動きが多すぎてうるさい、または落ち着かない、みたいな感想を持つ人もいそうだなと感じるくらいには演出がモリモリですね。

個人的にはこういう演出が若干過多なのではないかと思われるようなサイトは嫌いではなくて、自分たちの色をこういう形でウェブ上に表現したんだなと思って見てみれば非常に興味深い事例だと感じます。
エフェクトの1つ1つの質感が異常に高いレベルで統一されているのも驚きの要素で、とにかく隙がないんですよね。本当にすごいと思います。
ぜひチェックしてみてください。