ビジュアルにもこだわって作られた便利でかっこいいコードスニペットやコンポーネントを提供する Osmo

doxas : 2025-02-25 12:09:19

技術のバラ売り

今回ご紹介するのは Osmo というプロダクトのウェブサイトです。

こちらのサービス、どうやらコードスニペットやコンポーネントなど、ウェブ制作にすぐに使えるコードやパーツを有料で利用できるというものみたいですね。

教育向けのチュートリアルなど、コンテンツもどんどん追加していく旨がアナウンスされています。

今回のサイトの FAQ を見ていると、以下のように考えたことがこのプロジェクトを始めるキッカケになったと書かれています。

私たちはいつも制作の際に、古いプロジェクトを掘り返しては「あれはどうやって作ったっけ？」と考えてばかりいることに気が付きました

これ、開発者であればきっと誰もが心当たりがあるというか、似たような感覚を抱いたことってきっとあると思うんですよね。

そのような気づきを出発点に、コードの断片、またはコンポーネントのような独立したパーツを切り出して、再利用できるようにしようと考えていったのでしょうね。

今回のウェブサイト上の表現としては、ページの冒頭に WebGL によるインタラクティブなキービジュアルの実装があります。

おそらくこれは、このプロジェクトの統一した世界観を表したものなのでしょう。似たようなビジュアルは Instagram などを見ても（他の場面でも）用いられていることがわかります。

静止画ではなく、あえて明滅するインタラクティブな WebGL 実装としてこれを用意した背景まではわかりませんが、すごく印象的で個性的なビジュアルですよね。

今回のサイトでは立体的に動く HTML 要素も出てきます。

この上のスクリーンショットの場面などは WebGL ではなく CSS 3D だと思いますが、サイトそのものを立体的な構造で捉えていることがよくわかります。

場面によっては、立体ではない静止画を使いつつもカーソルの動きに応じて光源が動いているかのように見せている箇所もあり、こういった小さな技術の数々をまとめてサブスクリプションで使えるようにしている、という感じのサービスなんでしょうね。

岩肌がうっすらとライトで照らされたような感じに見せている

世の中いろいろなものがサブスクリプションで提供される現代ですが、コードスニペットをサブスクで提供してしまおうというのはなかなかおもしろいアイデアですね。

ただ個人的には、あっという間に AI に代替されそうな感じもしてしまいます。それこそウェブサイトを構成する小さなパーツを手軽に提供してくれる、というのは AI が得意な領域のような感じがしますしね。

とはいえ、そこはおそらく「凄腕の、実績も十分な人間が、価値ある内容を提供しますよ！」というところに価値を置いているからこそのサービスなのだと思います。

WebGL 実装としてはものすごく高度なことをしているというわけじゃないと思いますが、個性的なビジュアルはほかであまり見たことのない外観で、なかなか興味深いです。