
WebGL を利用した多彩な表現が派手すぎないほどよい温度感で展開される Inkwell のウェブサイト
AI に関連した企業かな?
今回ご紹介するのは Inkwell という組織のウェブサイトです。
どうやら AI に関連したサービスなどを開発している企業なのかなと想像しますが、今回のサイトは特になにか固有のサービスを販促・プロモーションするようなものではないようです。
WebGL を活用して、派手ではないのですがすごくさわり心地のよい見事なインタラクティブコンテンツを構築しています。
リンク:
Inkwell — the Intelligence Layer that optimizes processes, reduces costs and fuels creativity.
スクロール連動型
今回のサイトはスクロール操作だけでスイスイと閲覧できるようになっています。
いわゆるネイティブなスクロールバーが出るわけではなく、プログラムで上手にコンテンツ化がされているタイプで、WebGL を使った演出などが次々とスクロールに連動しながら現れます。
冒頭のカードが円形に並んだようなイントロの演出も、WebGL 製ですね。
カードに描かれているものは、AI によって今後変化が予測されるような対象…… ということなのかなと思います。
カードのような目に見える視覚効果だけでなく、同時にテキストが状況に応じて変化するなどしつつ演出が進んでいきます。
モーションは優しい感じですごく滑らかに、そして生き生きとしています。
カードの見せ方も多彩で見ていて飽きないコンテンツです。
この上のスクリーンショットにあるように、カードがズラリと列をなす様子は圧巻です。
透視投影ではなく、あえて平行投影を使っていることでカードの大きさが一様になっており、それがまたいい雰囲気を作っていますね。
今回のサイトは 3D 的なオブジェクトもどこか平面的に描画しようとしている感じがあり、それが露骨すぎない温度感でコンテンツの雰囲気を描き出している感じがします。
今回のサイトの WebGL 実装は、派手という感じではないのですがすごく丁寧に作り込まれている感じがあります。
最後のスクリーンショットで泡のような感じに描かれているオブジェクトも、たぶん単なるサークル(円)ではなく球体だと思うんですよね。
ユーザーが干渉できるインタラクティブな仕組みや、それをウェブサイトの体裁に連動させて動かす様子など、WebGL 実装だけではなくウェブサイト全体としての完成度の高さを感じます。
ぜひチェックしてみてください。
リンク:
Inkwell — the Intelligence Layer that optimizes processes, reduces costs and fuels creativity.