同じ 3D オブジェクトも見せ方ひとつでこんなにも多彩な表情に！ 株式会社PRMO のウェブサイト
シンプルだけど力強い
今回ご紹介するのは 株式会社PRMO のコーポレートサイトです。
WebGL を演出の要としたウェブサイトになっており、非常に多彩な表情を見せてくれる 3D モデルが主役です。
それぞれの場面ごとに違った質感を持ちながら、思わず目を引かれるポップな味付けで非常に楽しいウェブサイトとなっています。
リンク：
シームレスにつながる場面転換
今回のサイトでは、スクロール操作を行うと画面に表示されているなにかしらのオブジェクトが反応するようになっています。
というのも、一番最初に表示される画面も、スクロール操作を行うまではわかりやすい反応を返してくるわけではないので、常にインタラクティブ性の出発点がスクロール操作になっているような感じの設計になっています。
社名でもある PRMO のそれぞれのアルファベットが本当にさまざまな表情を見せてくれます。
メタリックな質感になったり、時にはフラットな質感になって色が塗られた状態になったり、同じ形状のアルファベットの 3D モデルを登場させながらも、多彩な演出が組み立てられています。
背景のカラーや、テキストに割り当てられている色なども同時に変化していくため、各シーンごとにメリハリのきいたビジュアルに仕上がっています。
すごく派手、という感じでもないのですが全体的なトーンがポップな感じでとても楽しげな雰囲気です。
PRMO の４つのアルファベットが多くの場面で背景を彩りますが、一部のセクションではこれらのアルファベットが表示されなくなる瞬間もあります。
そこではまた別の立体的な表現が用いられていて、サイト全体で、平面的な演出と立体的な演出とが組み合わされた構成になっています。
すごくテクニカルなことをしているという感じではないのかなと思いますが、シンプルな技術を適切に組み合わせてこういった独自の世界観を表現しているのはレベルが高いな～と思いました。
いわゆるデザインから実装まで幅広く手掛けるクリエイティブスタジオ、という感じの組織なのかなと想像しますが、ウェブサイトを見ても偏りなく高い品質を提供できるのだろうなということが伝わってきます。
変に技術的に凝ったことをするのではなく、丁寧に１つ１つ作っていく、みたいな感じの印象を受ける WebGL 実装です。
各シーンが切り替わる際のシームレスかつ滑らかな遷移はとても自然で、モーションもスピード感やイージングが絶妙なバランスに仕上がっていると感じました。
ぜひチェックしてみてください。
