最先端を行くクリエイター養成スクールの老舗デジタルハリウッドのウェブサイト
一年間かけて養うプロとしての技術
今回ご紹介するのは、日本でも随一と言ってよいクリエイター専門のスクール、デジタルハリウッドのウェブサイトです。
今回のページは「本科CG/VFX専攻」学課の生徒募集を告知するウェブサイトで、スクロール連動型の豊富なアニメーション処理がなんともかっこよく仕上がったページとなっています。
その尖ったセンスを感じさせる背景の WebGL デモは、シンプルですが色合いも含めてとてもキレイにまとまっています。
恐らく PC 以外の端末でも、レイアウトが崩れることなく表示されると思いますが、フロントエンド目線ではそのあたりにも注目しておきたいところです。
あらゆるものがアニメーションする！
今回のサイトは WebGL が背景に使われているものの、それがコンテンツの主体というわけではありません。
あくまでも、文章や写真で表現されるメインコンテンツがあり、それを引き立てる動的な演出のひとつとして、背景にさりげなく WebGL のアニメーションが利用されている、という感じですね。
背景の WebGL 部分は、尖った針のようなオブジェクトを効果的に利用したワンシーンとなっていて、ページがロードされた直後などにその様子がドカッと表示される以外は、背景でゆっくりとアニメーションしながらページを演出しています。
少しだけ青の入った、濃紺のような下地の上にいかにもデジタルハリウッドといった感じのオレンジ・イエローのラインがなんともかっこいいです。
エッジの利いたデザインで、いかにもデジタルやクリエイティブを想像させてくれるビジュアルだなと感じます。
WebGL の実装としては非常にシンプルで、基本的にはこのビジュアルが大きく変化することはなくて、マウスカーソルなどに反応しながら動く感じですね。
どちらかというと今回のサイトはその上に乗っかるようにして表示されるメインコンテンツのほうが見どころが多くて、画面に表示されるもののうち、アニメーションしないもののほうが少ないんじゃないかと感じるほどです。
実際ほとんどのものが何かしらのアニメーションを伴って動きます……すごいですね……
募集されている内容としては、一年間でプロフェッショナルを目指す本格的なカリキュラムに関するもの。
私自身は通学した経験はないのですが、WebGL スクールにも、これまでに何人かデジタルハリウッドでの受講経験がある人がいらっしゃったりしましたね。それだけ知名度もあり、内容も確かなのだと思います。
今回のページは学課が限定されている告知ページという感じですが、本家のサイトのほうに行ってみたら、ウェブのクリエイター向けの学課とかもあるんですね……
というか全国にこんなに展開していたの知りませんでした……
メニュー画面は同じエッジ仕様ですがカラーリングがガラリと変化してまた違った印象に。
今回のサイトは WebGL を背景に利用しつつ、メインコンテンツのほうにあくまでも主眼を置いた作りが好印象な仕上がりになっています。
日本では、あまり WebGL 全開なサイトを比率からすると見かけにくいのかなと思いますが、こういった形で背景にシンプルでアブストラクトなデモを置いていくスタイルは、もっとたくさん事例があってもいいような気がします。
最近はハードウェアやブラウザの対応環境などもかなりよくなってきていますし、国内での WebGL 利用事例がどんどん増えていくといいなと感じさせられました。
DOM のアニメーションなど、本当に細かいところまでしっかりと作り込まれている素晴らしい出来栄えだと思います。
ぜひチェックしてみてください。
