ラインがまるで生きているように動いていくイントロ演出が秀逸！ 東神開発株式会社のウェブサイト
とにかく痺れるステキなイントロ
今回ご紹介するのは東神開発株式会社のウェブサイトです。
いわゆるショッピングモールなどの運営・開発を行う会社みたいなのですが、もっと広く、街や暮らしを俯瞰して捉えた事業を広く展開している企業のようです。
今回のサイトにはその会社が持つ哲学や理念みたいなものがギュッと詰め込まれており、イントロの演出には特にその強い思いがしっかりと盛り込まれ表現されています。
リンク：
WebGL 使いなら再現する方法を考えてみるのもおもしろい
今回のサイトでは、WebGL は主にイントロの演出で使われています。
このイントロの演出、スキップすることもできるのですが…… ぜひ飛ばさずにご覧いただきたい見事な完成度になっています。
スクロール操作を行うたびに変化が起こるようになっており、黒いラインがまるで生き物のように動き出します。
これ、静止画で見ても全然その素晴らしさが伝わらないですね……
本当に、動いているところはすごいのでぜひ実際にサイトに行って見てみていただきたいところです。
ラインが動くのは、主にシーン遷移の瞬間なのですが、奥行き感と平面的な表現を上手に組み合わせ、シーンごとに企業の理念や哲学をうまく可視化しています。
技術的な部分でいうと、大きくカメラワークとラインの描画の２つのトピックがあると思います。
ラインが描画されていくプロセスをカメラがスピード感あふれる感じで追いかけていくのですが、これがなんとも気持ち良い動きになっています。
WebGL 実装者であれば、どうやったら同様の表現が可能なのか、技術的な観点から考えてみるのもおもしろいと思いますし、たぶん、これ作るの結構たいへんだったんじゃないかなという想像が個人的には働きました。
サイト全体のデザインのトーンに対して揃えるという部分もあったのでしょうが、WebGL であえて単色のラインだけで表現する方向性に決めたのは、なかなか割り切った大胆な判断だなと感じます。
シルエットと動き、その２つに絞って演出を組み立てていくのはある種のストイックさみたいなものを感じますし、それを見事な完成度で実現したのは本当に素晴らしいことだと思います。
いわゆる 3D 的なビジュアルとしての派手さこそ控え目ですが、とても完成度の高い WebGL 実装となっています。
ぜひチェックしてみてください。
