流れるような表現が美しい！ ドイツや上海にオフィスを構える MING Labs のウェブサイト！
世界に四つの支店を展開
今回ご紹介するのは、ドイツや上海など、世界の様々な地域で活躍している MING Labs という企業のウェブサイトです。
ウェブサイトの作りは WebGL 以外の部分も含めてとてもよくできていて、この企業の十分な技術力を感じさせてくれる見事なコーポレートサイトになっています。
WebGL 実装部分は、流れるような、あるいは風にたなびくような、透明感のあるラインを用いた表現になっています。
招き猫は……上海オフィスを持ってるからかな？
今回のウェブサイトは、全体にラインを上手に利用した WebGL の実装で各所の演出を行なっています。
このラインの動きが非常に面白くて、またページごとに、同じラインを使うものでも全く違った表情になっているのが興味深いです。
トップページには、彼らの組織名である「MING」をあしらったデモが用意されていて、ここではまるでラインが流れる水を表現しているかのように、滑らかにアニメーションしています。
ロード完了直後のカメラワークもいい感じです。
パッと見た感じでは、特にキャプチャ画像だとわかりにくいと思うのですが、アルファベットのシルエットの外側にも、微妙に溢れ出したような感じでラインが流れていきます。
絶えずアニメーションして動いているので、刻一刻と姿が揺れ動き、なんともかっこいいです。
また、別のページでは、同じように流れるラインを使いながらも、なぜか招き猫を模した形になっているデモなんかもあります。
招き猫の発祥は日本だと思うのですが、上海にもオフィスを持っている企業なので、中国で人気の招き猫を模したデモを用意したのかもしれませんね。
その他にも、彼らのことを説明する ABOUT ページなどに WebGL の実装が置かれています。
こちらも、やはりラインを使った表現になっていて、グラデーションの美しい背景のなかで、ゆらゆらと風に揺れるような美しいラインが印象的です。
サイト全体の要所要所に、こんな感じで WebGL が使われたデモが置かれているのですが、WORK ページなどにはむしろ、WebGL ではなく CSS などを上手に活用した表現が多いようです。
派手に WebGL で立体表現するだけでなく、コンテンツに応じた適切な表現がなされているなと感じました。
クライアントとする企業の名前や、活動に対して与えられたアワードの履歴なども掲載されているこのサイト。
それらを見るに、かなりいろいろなところで評価を受けている企業のようです。
上海などのアジア圏にもオフィスを構えているからでしょうか、彼らのサイトに置かれているスタッフの写真には、黒髪のアジア圏のひとたちを写したものも多く掲載されています。
WebGL の実装としては比較的シンプルなほうかなと思いますが、少ないオブジェクトでも、一体感を持って動きや外見を整えていくと、かなりかっこよく見えますね。
やっていることはそれほど難しい内容ではないので、three.js などを使えば再現するのも、比較的簡単でしょう。実装の参考にしてみても、いいかもしれません。
ぜひチェックしてみてください。
