シンプルさがいい意味で際立つデザイン！ 平行投影を使ったロゴマークもかっこいい Climate のウェブサイト
こういうのが作れるようなセンスがほしい……
今回ご紹介するのは、Climate というクリエイティブ・スタジオのウェブサイトです。
WebGL を使っている場所は、トップページの中央にある小さめの Canvas 要素に対するひとつしかないのですが、これが実に効果的に企業の顔としての役割を果たしています。
平行投影で描画されるロゴマークは、透視投影された立体的なオブジェクトとは違った風合いがあり、サイトの雰囲気に見事に馴染んでいます。
モバイル版ではジャイロセンサーに反応する
今回のサイトは、実はあまり解説することは多くありません。
サイトに行くと、マウスカーソルを動かすまでは、一見すると普通に二次元のロゴマークが置かれているだけのサイトにも見えるのですが……
一度、カーソルを画面内で動かしてみると、そのカーソルの位置に応じて、ロゴマークが傾くように動きます。
そして、このロゴマークが立体的に見える状態も、よくよく観察してみると、それが平行投影で描かれていることがわかりますね。
平行投影とは、奥行きがあるように見えるという意味では 3D 的な表現ですが、現実世界の奥行き感とは異なり、遠く離れたものであっても小さくすぼんでいくようには見えず、パースが一定になります。
現実にはありえないような立体的な表現なのですが、それが逆に、ロゴマークという企業を象徴するシンボルとしての意味合いを、より強く感じさせるものになっていると思います。
背景で動いているモノクロの画像のようなブロックは、クリックすることで動画が再生されるようになっています。
この動画の部分は、特に WebGL の演出などはなく、純粋に動画として再生される感じで変わったところはありません。ほんとに、WebGL が使われているのはロゴの部分だけなんですね。
すごく、シンプルです。
ただ、モバイル版ではジャイロセンサーに反応するように作られているようで、PC 版とはまたちょっと違った雰囲気を楽しむことができます。
サイト全体のデザインとしてはモノクロ風で、ほぼ白黒です。
白黒の状態では、動画が再生されているように見えるかもしれないですが実際にはアニメーション GIF が再生されている状態になっていて、クリックされると、動画に切り替わるようになっている感じですね。
動画のカラフルな色使いと、モノクロとのコントラストや色合いの変化が面白いのですが、それを邪魔しないさりげないロゴ演出も、非常にバランス感覚に優れた実装だと思います。
ぜひチェックしてみてください。
