Play ページから WebGL の作例を見ることもできるソフトウェア開発企業 atuin.media のウェブサイト
シンプルな力強さ
今回ご紹介するのは atuin.media というソフトウェア開発を手掛ける企業のウェブサイトです。
work のページを見ると、ウェブだけでなくサイネージやアプリ開発などソフトウェア開発のさまざまな分野に実績を持つ企業のようですね。
サイト内には play という下層ページがあるのですが、ここでは WebGL のインタラクティブに動く作例なども紹介されており、ソフトウェア開発の基礎力の高さを感じさせるウェブサイトとなっています。
リンク：
デザインとしての美しさを感じる
今回のサイトは、どちらかというと演出盛り盛りな感じというよりはシンプルな印象のデザインになっていると思います。
このシンプルさは WebGL 実装に対しても同じことが言えて、派手さに頼らない感じがなんともかっこいいんですよね。
トップページでは白い背景の上に、画面中央にはメッセージ、さらにそれを取り巻くように 3D オブジェクトが描画される内容で、ほんとに一見するとすごくシンプルなビジュアルをしています。
細長い青いラインのようなオブジェクトは、メッセージの手前に文字を遮るように動くこともあるのですが、その際には文字の部分がまるでネオンのように光り輝き浮かび上がります。
この演出すごくおもしろいですよね。
この演出を見ると、メッセージの部分は HTML 内に置かれたテキストではなく WebGL によって描画されている文字なのかなと想像ができますよね。
実際、ページを少しスクロールしてみると別の WebGL の演出が文字に掛かってくる場面があるので、DOM に配置されたテキストではなくてわざわざ文字をレンダリングしていることがわかります。
このスクロール時に発生するエフェクト、いわゆるモザイクのように色がピクセレートされる感じのものなのですが、こんなわずかな一瞬にしか表示されないエフェクトを丁寧に実装しているところに彼らの思想や態度が表れているように感じました。
サイト内には過剰な演出があるわけでもなく、文字を見せるところとグラフィックを見せるところがしっかりとデザインされているように感じます。
play のページはかなり演出感が強い事例とかも掲載されているので、WebGL 使いのひとは見てみるとよいかもしれません。
必要最低限の装飾と、派手すぎない WebGL の実装。
それらが醸し出すなんとも言えない力強さと言いましょうか、余計なことを過剰に喧伝しない硬派なかんじがなんともかっこいいウェブサイトだと思いました。
シンプルな内容で誰かを納得させるのって、本当に難しいことだと思うのですが今回のサイトはそれを実践しているなと感じました。
WebGL の実装としても丁寧な仕事で、わかる人には良さがわかる、そんな WebGL 実装だと思います。
ぜひチェックしてみてください。
