王道かつ古典的な WebGL の使い方がいっそのこと心地よさを醸し出す Oakley のスペシャルサイト
こういうのでいいんだよ感
今回ご紹介するのは、スポーツ用品などを扱うメーカー Oakley のスペシャルサイトです。
スポーツ用のサングラスの製品を扱うサイトのようですが、わざわざドメインを取得して作られているサイトっぽくて、それだけ力が入っているのでしょうね。
WebGL の実装としては王道というか定石というか、あまり変化球的な内容が含まれない普通の WebGL 実装なんですが、それが逆にシンプルでいい味出してます。
リンク：
余計な情報がないということの良さ
今回のサイトの WebGL 実装は本当にいい意味でシンプルです。
環境マッピングで映り込みのような質感を再現しつつ、余分なインタラクティブ性を極力排除した直球な WebGL 実装です。
サイトのロードが終わって最初に表示される画面（この記事のトップ画像）からして、ド直球でいいですよね。
画面をスクロールしてやると、そのスクロール量に応じてセクションが切り替わります。
セクションが変化するごとにサングラスの 3D モデルの姿勢も変化し、時には下から煽るように、時には後ろから覗くように、サングラスが動きます。
ただこのときも、変なエフェクトとか一切掛かっていません。
とてもシンプル、だがそれがいい的なものを感じます。
場合によっては、サングラス以外の 3D モデルやジオメトリが出てくる場面もありますが、それらも必要最低限という感じですね。
これ正直どこまで狙ってやっているのかわからない部分もあるのですが、個人的には、ウェブサイトを構成するほかの要素も比較的シンプルな感じでデザインされている気がしますし、3D のほうもそのトーンに合わせているんじゃないのかな～ とは感じました。
一周回って、今回のサイトの場合はこれでいいんだよなって思いました。
WebGL でどんどんできることが増え、過剰に演出が盛り込まれているウェブサイトを見かけることも多くなった昨今。
今回のサイトのように製品の機能性や特徴をシンプルに伝えたい場合には、変に演出を盛り込むよりもシンプルかつ軽快に動作してくれることのほうが大事なケースってあるよなというのを、今回のサイトを見ていてすごく感じました。
演出をすることが悪いということではないですし、それはケース・バイ・ケースであるという前提はもちろんありつつ、今回のサイトのような王道的な WebGL 実装もやっぱりいいなと個人的には感じました。
ぜひチェックしてみてください。
