透明感のあるグラデーションとアニメーションが秀逸！ WOTA 株式会社のウェブサイト
寒色だけではない色遣いのうまさ
今回ご紹介するのは、水に関連したソリューションを開発・提供している WOTA 株式会社のウェブサイトです。
水に深く関係した企業のサイトということもあり、色遣い、そしてアニメーションのスピードやシルエットの柔らかさなど、随所に工夫が感じられます。
シンプルなコーポレートサイトなのですが、とてもキレイにまとまっています。
リンク：
WOTA l Water Freedom for Everyone,Everywhere
スクロールに反応するちょっとした演出も楽しい
今回のサイトは、水と深いかかわりを持つ製品を手掛けている企業らしい、とても優しい風合いが特徴的です。
ページの冒頭部分では、背景に美しいグラデーションが現れるのですが……
このグラデーションは絶えずアニメーションしており、刻一刻と姿を変えながら、様々な表情を見せてくれます。
一見するとわかりにくいかもしれませんが、実は寒色系の青や緑といった色だけでなく、ほんの少しの僅かな暖色が使われているんですよね。
非常に小さな色の変化なのでわかりにくいかもしれませんが、ほんの少しだけ、大きく色相の異る色が加わることで奥行きのあるグラデーションを実現しています。
また、この背景のグラデーション以外の部分にも WebGL が使われている部分があるのですが……
こちらは結構さりげない演出なので、ゆっくりじっくりサイトを見ていると、もしかしたら気が付かないケースもあるかもしれません。
この上の画像を見ると、微妙に写真の部分が湾曲しているのがわかるでしょうか？
この一見すると単なる画像にしか見えない部分が、実は WebGL でレンダリングされた CG になっています。
スクロール操作に応じて写真が歪むようなエフェクトが掛かるのですが、これがなんとも言えない「まるで水中であるかのような質感」の演出にうまく寄与しています。
このスクリーンショット上ではわかりようもありませんが、実は CG で描かれる画像とまったく同じ位置に透明な <img> 要素が配置されているなど、HTML としてのコンテキストも意識した作りになっています。
縦方向にスクロールしながら見ていシングルページ的な作りですが、随所に水をイメージさせるリッチな演出が仕込まれていて、良い意味で小さくキレイにまとまっています。
WebGL の使い方としては最近の流行を押さえた丁寧な作り。
特に一見画像に見えるけど実は CG ですよ～ っていうのは結構最近よく見かけますよね。
スクロールに連動して水の流れや柔らかさが演出された、見事な実装だと思いました。
ぜひチェックしてみてください。
