Bookmarks 2021.10.25

2021年10月25日 19:44

まえがき

また、更新頻度が落ちつつありますが、いつもどおりデザイン目線というよりは実装社目線のレビューです。

リリース自体は結構前なのですが、実装のレベルが高すぎると思いました。個人的な好みもありますが、イージングのスピード感などがちょうどよく、全体を通して不自然さを感じさせないサイトでした。お手本にしたい。

どんなにデザイナーさんが静止状態でいいデザインをしても、実装して動きをつけたら野暮ったい、、みたいなサイトって結構あると思うんですが、これは完成度が高すぎると思いました。

こちらもデザインと実装のバランスがすばらしい事例です。デザインのトンマナにあった効果的な演出を操作感を損ねずに実装されているので、こちらもお手本にしたいサイトです。Next.js製。

Webflowでここまでできるんだよ、というサイト。はっきり言ってすごい。Webflowはノーコードでサイトが構築できるツールですが、このようなサイトを構築するのにどのくらいのスキルや知識がが必要なんだろうか。

AwwwardsやFWAなどを見ていて、たまにWebflowで作られたサイトが受賞していたりするので、今後もチェックしておきたい。

写真がペラっとめくれるような動きや、マーカーで塗りつぶしたような動きがあり、ちょっとしたアナログ感があってユニークなサイト。スクロールによる要素の位置のコントロールや、重なり順の制御など、難易度の高そうな箇所が所々にある。Next.js製。

スクロールで画像がグニョンと歪む系のサイトはめちゃくちゃよく見ますが、これはその中でもかなり気持ちいい部類の動き。特にサムネイルをマウスオーバーした際の動きがとても良い。光の当たり具合がマウスの動きによっては変化するので、旗が揺らめいているように感じる。three.js、GSAPを使用。

こういう、バリアブルフォントをインタラクティブに使用したサイトって国内だとそんなにない (日本語との相性の問題もあるけど)ので、チェックしておきたい。

WebGLのエフェクトと、タイポグラフィが非常に美しいサイト。横スクロール展開。ページ遷移がないのになぜNext.jsなんだろうか。

布張りの本の質感をWebGLで高いクオリティで再現。こういう3Dの使いかは意味があって好き。光の当たり具合、反射具合がマウスの動きによってリアルに変化する。

サイト全体にWebGLによるCoolなグリッチエフェクトがかかっているにも関わらず、そこまで重くなく、わりと軽快に動作するので一体どういう実装なのか、、。とにかくエフェクトが異常なクオリティでかっこいい。

ブランドサイトなのかコーポレートサイトなのか(両方なのか)よくわからないけど、まずキービジュアルのインタラクションの視差効果がよい。そして超絶軽快に回遊できる。演出も全くじゃまになっておらず、快適。

全体的にNext.jsが流行ってるなぁという印象でした。また、国内で非常に実装レベルの高いサイトがちらほらあり、嬉しいと思いつつも焦りを感じます。

前にも言いましたが、Webサイトの実装においては、すごいサイトがすごいのではなく、違和感やストレスを感じさせないサイトがすごいと思っているので、今回はそういう事例が国内でいくつもあって素晴らしいと思いました。

サポートいただければ、レッドブルを飲んでより頑張れると思います。翼を授けてください。