ゲノム解析において独自の技術を持つ国内企業 ビットバイオーム株式会社のウェブサイト
あらゆる技術を駆使した実装が面白い
今回ご紹介するのは、日本の国内企業でゲノム解析に独自の技術を持つビットバイオーム株式会社です。
公式サイトによれば、独自のゲノム解析技術として「シングルセルゲノム解析」の技術を持っているようです。これはたったひとつの細胞からゲノムを解析できるというもので、世界的にもすごい技術なのでは……と素人ながらに感じました。
WebGL の実装としても、2D から 3D まで、シェーダを駆使した面白い表現がいろいろ取り込まれていて、非常に興味深い事例になっています。
リンク:
自動的に動くものとインタラクティブに反応するもの
今回のサイトには、あらかじめアニメーション処理が組み込まれていて自動的に動くもの、あるいは動き続けるものがある一方で……
ユーザーの操作に対して、インタラクティブに反応する要素もいくつか配置されています。
それらのバランス感覚というか、目的に応じた使い分けが非常に見事ですね。
以下は、自動的にアニメーションしながら現れる、イントロのシーンの様子です。泡のような感じでサークル模様がふわりと広がる様子がアニメーションで描き出されます。
今回のサイトはトップページ部分に WebGL の表現が集中した構造になっています。
先程のキャプチャ画像にあった、ふわっと広がってくるサークル模様がそのまま画面の中央に配置され、そこを流れるようにパーティクルが漂っています。
パーティクルは自動的にアニメーションする要素のひとつです。
インタラクティブな要素としては、カーソルの位置に追従するように表示されるパーティクルや、背景の左右に見えている塩基配列のようなオブジェクトなどが微妙にカーソルに応じて動きます。
画面の下の方に「TECHNOLOGY」や「SERVICE」といった文字が書かれているのが見えるかなと思うのですが、この部分にはマウスカーソルをホバーさせてやることで、ページ内の様子が切り替わるようになっています。
具体的には、後ろのほうに見えているオブジェクトが、手前にぐるっと回り込むような感じで近づいてくる演出が起こります。
このとき、よーく観察しているとわかるのですが、中央に配置されているサークル模様が、そのまま窓のような役割を果たしています。
下の画像をよく見ると、指先の部分など、サークルの外側に出てしまっている部分にブラーが掛かっていますよね。サークルの部分がまるで窓のように機能し、奥にある世界を覗き込むようなイメージになっているわけですね。
当サイト(WebGL 総本山)は WebGL にフォーカスしたサイトなので、トップページ部分にある WebGL 実装を中心に紹介しましたが、今回のサイトはその他の全体的な完成度も非常に高くなっています。
文字が流れるように登場したり、要素がインタラクティブに動くようになっていたりと、かなり丁寧に作り込まれている印象を受けます。
WebGL の演出もほかではあまり見ないような、奥行き感を上手に活用したレイアウト、また、それを実現するだけの高い技術を感じさせる内容になっています。
ぜひチェックしてみてください。