![見出し画像](https://assets.st-note.com/production/uploads/images/79462514/rectangle_large_type_2_f06cccd9e0f4ba60d8f35d0a45d0b0f1.png?width=1200)
#1日1サイトレビュー 110 SHIFT LINK
Next.jsとThree.jsの組み合わせ!
1番やりたい技術が合わさっている。。。。。。
こういうサイトを作りたい!
nrealとかも使っているのか、最先端とクリエイティブっていう感じがサイトのテイストとあっている
webpackで作られていて、どんな感じで作っているかが見れない涙
SHIFT LINKはリアルとバーチャル空間内にインターフェースを構築し、あらゆる機器やデバイス、それを扱う人やサービスをつないでいきます。
フォント
・Pangram Pangram
Pangram Pangramは書体デザインをしている鋳造所の名前で、34のフォントを提供している。
今回使用しているフォントはどれなのかは分からない!
カラー
![](https://assets.st-note.com/img/1653702201144-5C9HZ3OhUl.jpg?width=1200)
感想・考察
(1)流れるような流体アニメーション
ライブラリにはthree.jsって書いてあったけど、three.jsでもこんな感じのアニメーションってできるのかな。
デフォルトのジオメトリではない気がする…
あるとしてもポイントジオメトリ?つまりvertexshaderを操作している?つまりネイティブのWebGLを書いている?
![](https://assets.st-note.com/img/1653702285257-IHPjuX0UvX.png?width=1200)
このツールなんだ!これでデザインできるのかしら?
![](https://assets.st-note.com/img/1653702451157-S6favK0DeO.png?width=1200)
(2)フォントの強弱
フォントは1つで、配色も純粋な白と黒で構成されているのだが、フォントサイズを変えることによって強弱を与えることができる。
より相手に伝えたいメッセージは大きく挑戦的に。
![](https://assets.st-note.com/img/1653702644484-OGWN31YTDA.png?width=1200)
(3)飽きさせない仕組み
クリッカブルなところでは、カーソルが大きくなったりインタラクティブな要素を所々で盛り込んでいる。
![](https://assets.st-note.com/img/1653703022003-07Ykd91FIS.png?width=1200)
WebGLスクールが終わったらこういうサイトも作ってみたい!
この記事が気に入ったらサポートをしてみませんか?