シェーダを使った表現の美しさが光る！ 凸版印刷の新ブランド・コンセプトサイトがすごい！
立体と平面との不思議な融合
今回ご紹介するのは、凸版印刷の新しいコンセプトを打ち出した新ブランドサイトです。
どれも印象的で個性的な、いくつかの画像がベースになったビジュアルなのですが、WebGL を利用しつつ立体的な処理も同時に行われています。
二次元のような、三次元のような……
不思議な感じの表現なのですが、自然としっかり馴染んでいるのがすごいです。
シーン変化のアニメーションやエフェクトに注目してみよう
今回のサイトは、コンセプトサイト、あるいはブランドサイトと呼ばれるものだと思うのですが、全体に「質感」や、あるいは「素材」といったキワードを強く感じさせる作りになっています。
ここでは主に WebGL で実装されている部分にフォーカスしますが、サイトのどこを見てみても、非常に丁寧に作られていると感じるのではないでしょうか。
まずサイトのロードが完了すると、このサイトの主題であるコンセプト「INSPIRATION」の文字が演出と共に現れます。
他のシーンにも取り入れられている RGB を微妙にずらしたような演出がかっこいいですね。
このイントロ部分の演出は、自動的に次々とシーンが切り替わっていくようになっているので、基本的には放置したままでも、そのまま楽しめるコンテンツになっています。
何もせずにただ眺めるのもいいのですが……
マウスカーソルを動かしてみると、実はインタラクションが仕込まれていることもわかると思います。
二次元的な画像を使っているにも関わらず、微妙に重ねられたように描かれていることと、文字やラインによる表現が重ねられていることによって、ちゃんと立体的な部分も感じられるビジュアルになっています。
この二次元とも三次元とも言えないような微妙なビジュアルは面白いですね。
また、今回のサイトのすごいところはそのシーンの切り替わり方。
ここはぜひ焦らずしばらく演出を眺めてみてほしいのですが、切り替わりにはいくつかのパターンが用意されています。
縦に分割されたようにソリッドな印象で素早く切り替わるシーン遷移があるかと思えば、一方で、歪んで滲んで混ざりあうように切り替わったりするシーン遷移もあります。
どれもシェーダを利用した非常に上手なエフェクト表現だと思います。
インターネットの隆盛と共に、印刷物が軽視されるというような話を見聞きすることがありますが、少なくとも今回のサイトからはそんな危機感は微塵も感じられません。
プロフェッショナルに表現を追い求める……というと大袈裟かもしれませんが、強い意志をすごくはっきりと感じるサイトに仕上がっているなと個人的には思いました。
当サイトではいつも私が見つけたサイトを好き勝手に紹介してしまっていますが、こういうサイトはもっともっといろんな人に見てもらいたいなって思います。
国内の企業が、こうしてウェブで美しい表現に妥協せず取り組んでいるということが、個人的にはとてもうれしく感じました。
ぜひチェックしてみてください。
