未来を予見させるような様々な見せ方のバリエーションが楽しい ACSL のブランドサイト
ストーリー性のある構成のウェブサイト
今回ご紹介するのは ACSL というドローン事業などを手掛けている企業のウェブサイトです。
こちらの企業は以前にも WebGL 実装のサイトを公開していたことがあり、今回も WebGL をガッチリ組み込んだハイエンドなウェブサイトになっていますね。
今回は、そんな ACSL のブランドサイトの実装を紹介します。
実装は株式会社スタジオ ディテイルズさんの手によるものみたいです。相変わらずのクオリティとなっています。
リンク:
いろいろな表現を楽しもう
今回のサイトでは、ブランドサイトということもあって ACSL がどのような企業で、どのようなビジョンを持ち、これからどう変わっていくのかが示されています。
かなりストーリー性のある内容のコンテンツということもあり、それぞれの場面に応じた様々な WebGL 表現が取り入れられています。
今回のサイトではシーンごとの表現の違いを楽しみながら見てみるのがいいかもしれませんね。
トップページのデフォルトのビューでは、流れるラインが疾走感のあるシーンを演出します。
西暦で示された年代が変化するアニメーションや、フェードインしながら現れるフォントなどもとてもおしゃれですね。
スクロールすることでシーンが変化したり、あるいは場面によってはクリックしたままホールドすることで場面転換が発生します。
背景色が変化するパターンや、流れるようなラインの形が変化する表現など、本当にバリエーション豊かなビジュアルが多数用意されています。
一見すると似たように見える質感の場面でも、よく観察してみると微妙に背景色が違っていたりしますし、見る人を飽きさせない工夫がいろいろ組み込まれていますね。
シェーダを使って頂点を制御しているのだとは思いますが、サイト全体の表現がかなりリッチなものばかりなのもあって単純に CPU の負荷は若干高めになっています。
ソースは読んでいないのでちょっと正確なところはわからないですが、負荷が高くなりすぎないようにフレームレートは適宜落としたりしてるんじゃないかな?
かなりビジュアルを重視した作りなので、そのあたりは WebGL 実装の場合はトレードオフをどう取っていくのかは結構難しい問題ですよね。
ポリラインだけでなく、より細いラインを活用したシルエットの表現などもお見事!
ACSL さんはドローン事業やその自律制御システムを手掛けるというかなり未来志向な事業を行っている事業者さんだけあって、毎回サイトには WebGL もりもりな感じでローンチしてくるのがすごいですね……
彼らの掲げるビジョンからすれば、近い将来ドローンは人々の生活に欠かせない、当たり前の存在になっていくことを目指しているのだとは思いますが……
とは言え、今現在という時間軸では彼らがリーチしたいユーザーは、最終的な一般のエンドユーザーというよりは、同じビジョンを共有できる事業者の方々なのかなという印象を受けました。
ウェブの表現としてはかなり先鋭的で、チャレンジングな実装だと思います。
ぜひチェックしてみてください。