フランスのウェブ屋さん LA HAUTE SOCIETE のサイトは WebGL を効果的に利用した素晴らしい仕上がり！

doxas : 2015-02-26 14:41:22

細部にまでこだわりを感じる仕上がり

今回ご紹介するのは、フランスにある LA HAUTE SOCIETE という企業のサイトです。

フロントエンドの実装からデザインまでこなす IT 企業のようですね。

ちょっとサイト全体がフランス語なので、内容を細かく把握できていませんが、コンテンツとして見た目だけでも十分に楽しめるのではないかと思います。

サイトに訪れると、最初から WebGL を使ったコンテンツが現れます。

企業のロゴと、その後ろから後光のように輝くパーティクルや幾何学模様などが美しく表現されています。※記事冒頭の画像

このサイトは、一部の人が極端にアレルギー反応を示す、サイトのスクロールが制御されるタイプのつくりです。個人的にはそれほどストレスには感じませんでした。

もし変則スクロールを用いるのは嫌だという場合でも、右上のメニューを開けばコンテンツの一覧がリスト形式で表示できるようになっています。

メニューリストの背景にも 3D コンテンツが！　細かい！

各コンテンツのページでは、それぞれに WebGL コンテンツが用意されています。

全体的にアブストラクトな雰囲気ですが、どれも非常にカッコいい仕上がりになっています。カスタムシェーダやポストエフェクトを割と惜しみなく突っ込んでくるので、ページ遷移のダイナミックなカメラワークなど含め、かなり見ごたえがあります。

画面の下のほうに白っぽいサークル形状のアイコンのようなものが見えています。

この状態は、まだこのページ内でアクションを起こせることを表していて、画面内をクリックするなどすると、ページ遷移無しで WebGL のレンダリングシーンだけが次のステージに変化します。

グリッチっぽい感じのエフェクトはシェーダを使っているのかな？

3D シーンの多くにはホワイトノイズを重ねたようなポストエフェクトが掛かっています。ちょっとザラついたような見た目にするだけで、印象が急に変わるから不思議です。こういうデザイン的な部分にもこだわって作られているのだなあと思います。

電球がライン上に置かれているかのようなライティングエフェクト。

自社のコーポレートサイトにこれだけのコンテンツを突っ込んでくるのであれば、顧客も技術的にどのようなレベルのことまでが依頼可能なのかわかりやすいと思いますし、なによりすごくハイセンスな仕上がりなので、訴求効果も高そうです。

ただし WebGL 実装は three.js を使ったものですね。

カスタムシェーダなどを使っていると思われるので、そこそこ下地のしっかりしたエンジニアがいるんだとは思います。WebGL の技術だけでなく、CSS やそのほかのフロントエンドの技術がしっかり組み合わされて、ひとつの完成されたウェブサイトになっているなと感じました。