CG としての完成度が高く見る者を圧倒する迫力を感じさせる Fenestrated Screw System のウェブサイト
非常に完成度が高く高品質なビジュアル
今回ご紹介するのは Fenestrated Screw System という、おそらく背骨を固定するための医療器具に関する製品のウェブサイトです。
主に、高齢者向けにしっかり背骨を固定して日常生活をサポートする、といったような医療器具だと思うのですが、どうやらこれ日本で開発されている製品なんですかね……
サイト内には普通に日本の住所や社名、電話番号などが書かれているのですがサイトの内容自体は海外向けになっていて、全体的にすべて英語で書かれています。
WebGL 実装としての完成度が高く、ビジュアルの迫力が凄まじいです。
リンク：
Expedium Verse® Fenestrated Screw System
イントロ演出はまるでゲームのワンシーンのよう
今回のサイトは、医療系サイトによくあるようなパーティクルの浮遊する三次元空間を舞台に、製品の 3D モデルが様々な形で演出されます。
ロード完了後に最初に表示されるイントロの演出は、まるでゲームのワンシーンのように印象的でかっこいいカメラワークになっています。光沢のある金属の素材感などがすごくよく表現されています。
この最初のイントロの時点で、ちょっと今回のサイトはヤバそうだぞ感が漂っています……
サイトはスクロール操作で次々とコンテンツが進んでいくタイプで、複雑な操作などは一切不要です。
スクロールで進んでいく各シーンは、それぞれ製品の特徴や優れている点をうまく CG を使って表現しており、とても直感的で、素人でも医療的にどういう効果があるのかはなんとなく想像できるような作りになっていますね。
骨をボルトで固定して、さらに必要に応じてセメント的なもので固めて補強したりするようですが、そういった実利的な効果を様々な CG 的なテクニックを駆使して表現しています。
骨の内部にめり込んでいる部分に対してだけノイズのディストーションが掛かっていて、立体的な構造が把握しやすくなっている。
驚くのは、ギラギラと派手な色使いがされていることなどではなく……
その 3D 的な見せ方に対する工夫です。
たとえば、器具の構造や特徴を説明するフェーズでは、白いパーティクルのようなものが現れて、3D の線のようなものが描かれます。
プレゼン資料などで強調したい部分に下線を引いたりするのと同じように、3D シーンのなかで注目させたい部分や製品の優れた点が上手にアピールされており、しかもわかりやすいんですよね。
WebGL を使っていない部分のアニメーション制御なども本当に素晴らしく、非の打ち所がないという感じの仕上がりです。
医療系のサイトでは、パーティクルをうまく使ってどこか抽象的な三次元空間を舞台にした画作りがされることが多いですが、これはいったいなんでなんでしょうね……
今回のサイトの場合、製品自体の金属的な質感との対比としてそのあたりのバランスがよく、とても引き込まれるグラフィックスになっていると思います。
スクリーンショットこそ撮っていないですが、ブラーのようなポストエフェクトも完璧に制御されており、インタラクティブ性という観点でも素晴らしい出来栄えです。
これ日本で作られている医療器具のサイトですが、サイトの制作は国内のスタジオだったのかどうか…… 気になりますね……
このクラスのウェブサイトはなかなか巡り会えないレベルだと思います。
ぜひチェックしてみてください。
