たくさんのスプライトがインタラクティブに画面を彩る！ 立命館先進研究アカデミー RARA のウェブサイト
滑らかなアニメーションがステキ
今回ご紹介するのは、立命館大学の取り組みのひとつ、立命館先進研究アカデミー RARA のウェブサイトです。
RARA という略称は Ritsumeikan Advanced Research Academy の頭文字とのことですが、実際に今回のサイト上で紹介されている研究者（フェロー）の方々を見てみると、専門領域はかなりバリエーション豊富な感じですね。
RARA 内外問わず、それぞれの専門領域同士が相互に刺激し合ったりすることで新たな価値創出がなされるのだろうなと、素人ながらに想像してしまいます。
今回のサイトでは大量のスプライトが WebGL によって描かれており、とても滑らかなアニメーションが心地よい質感となっています。
リンク：
細かい動きに注目してみよう
今回のサイトには、いわゆるバリバリの 3D 表現というのは出てきません。
ただ、2D のスプライトを立体的な構造を踏まえてレイアウト・アニメーションさせていて、視覚的な情報量は多いです。
たとえば、サイトがロードされた直後のイントロ演出では、まるで渦を巻くように各種オブジェクトが飛び出してくるような迫力のある表現を見ることができます。
静止画で切り取ってしまうと、やっぱり本来の迫力がまったく伝わってこないですね……
ぜひこのあたりは、実際にサイトに行ってご覧いただきたいところです。
各種スプライトは、それ自体はステッカーのような平面的なグラフィックスにすぎないのですが、それらが折り重なり、かつマウスカーソルの位置に応じてインタラクティブに反応したりすることで、かなり奥行きを強く感じるような表現がなされています。
また、スクロール操作に連動したシーンの変化もあり、こちらも非常に滑らかで気持ちの良いアニメーションに仕上がっています。
こういうスプライトを利用した作例って、パッと見た印象だけで言うとジオメトリを使った 3DCG 的な表現と比較して簡単そうに思われる方も多いかもしれません。
しかし個人的には、見た目の派手さだけでごまかすことができないため、スプライトベースの表現にはそれ特有の難しさがあるなと感じることが多いです。
今回のサイトに見られる各種アニメーションは、WebGL を使っている部分もそうでない部分も、いずれも時間の流れをすごく上手に操っており、じっくり観察するとそれぞれのオブジェクトが動き出すタイミングや、その速度、止まるまでの余韻などがすごく工夫されているんですよね。
シンプルそうに見えて実は繊細な作り込みがしっかりなされている、手作り感の強い実装なのかなと感じました。
WebGL の事例にも、3D のジオメトリがたくさん登場するもの、シェーダを使ってエフェクト表現に特化しているもの、また今回の事例のようにスプライトを滑らかに動かすものなどいろいろなタイプがあると思います。
もちろんそれは技術的な要件だけでなく、クライアントが何を表現したいのか、どういうメッセージをサイトに盛り込みたいのか、といったことやデザインとの兼ね合いなどによって様々なケースがあり、何が正解ということは一概には決められないと思います。
今回のサイトの場合は、モノクロで表現されたスプライトがなんとも言えないアカデミックな雰囲気を演出していて、そこに結構反応が大きめのインタラクションが掛かっていることがうまく作用し、伝統と革新、さらにはそこに込められた楽しさ・ワクワク感などが、ビジュアルを通してユーザーに伝わるような工夫がされていると個人的には感じました。
非常に完成度の高いサイトだと思います。
ぜひチェックしてみてください。
