多様なビジネスをインタラクティブな WebGL 実装で表現した三菱UFJキャピタル株式会社の 50 周年記念サイト
さまざまな色・かたち
今回ご紹介するのは、三菱 UFJ キャピタル株式会社の 50 周年を記念したアニバーサリーサイトです。
WebGL はスプライトの描画に使われているみたいですが、マウスカーソルの動きに対して結構大胆に大きく動くので、すごく迫力のあるビジュアルになっています。
ただ、全体としてのデザインのトーンがしっかりと統一されていることも相まって、優しい色彩のウェブサイトの雰囲気を壊すような派手さではなく、ちょうどいい温度感のグラフィックスとなっています。
リンク：
多種多様な投資先をビジュアルで表現
今回のサイトでは、2D で描かれたアイコンのようなオブジェクトが、3D 的な空間に散りばめられているかたちになっています。
思いっきり 3D のジオメトリが出てくるという感じではなく、どちらかというと、大量にパーティクルがあってその動きやシルエットによって世界観を表現しているような、そういうテイストに近い実装だと思います。
スプライトの１つ１つにはいろいろな形や色があり、これらは同社の投資してきたさまざまなスタートアップを表しているのでしょうね。
ページの構造は LP のような感じで縦にスクロールしていくことでコンテンツを閲覧することができます。
縦に長いページ全体のそれぞれのセクションで、スプライトの群れがさまざまなビジュアルに変化していきます。
時には文字のような形を作ることもあれば、もっと抽象的なかたまりとして背景に描かれる場面もあります。
いずれの場合も、カーソルを動かした際にはフワッと浮き上がるように動きます。
よく観察してみると、スプライトには本当にいろんなパターンがあるんですよね。いずれもシンプルな幾何学模様ですが、色との組み合わせも含めると結構な種類があります。
また、よく見るとグレーのスプライトがそれらに混ざっていて、これはもしかするとスタートアップを支えてきた三菱 UFJ キャピタルそのものを暗示しているのかもしれません。
スプライトが文字の姿を形作る場合などはこのグレーのスプライトがドロップシャドウのように後ろ側に並ぶので、そのような印象をより強く感じました。
スプライトが動く際は、どこか有機的というか……
あまり硬くない、優しい動きになるように味付けされている感じがあります。
かなり大胆に動くので見た目のインパクトも強く、メッセージ性をかき消してしまわない程度に抑えつつもすごく印象的なウェブサイトに仕上がっているなと感じました。
ぜひチェックしてみてください。
