思わずこういうのでいいんだよといいたくなるステキな流体表現！ Ryan Ritzenthaler さんのポートフォリオ
触り心地ってあるんですよね
今回ご紹介するのは Ryan Ritzenthaler さんというフルスタックの開発者さんのポートフォリオサイトです。
実装だけじゃなくデザインもご自身でされる方みたいなのですが、今回のサイトもインタラクティブ性から外観まで本当に素晴らしい出来栄えとなっています。
昨今あまりにも気軽に取り入れられ過ぎていると感じる流体表現が、本当に見事に組み込まれていてたいへんほっこりします。
リンク：
Ryan Ritzenthaler - Full-Stack Developer
すべてが流体というわけじゃない
今回のサイトは、ベースは白い背景に黒いテキストという感じで、一見すると派手さをそこまで強調した感じではないシンプルめの見た目です。
ただ、カーソルを動かすと大きく配置された文字が流体表現によって大きく歪みます。
流体に RGB シフトを組み合わせたような感じで非常に触り心地がよいです。
静止画ではどうしてもこの「触り心地」の部分が伝わらないと思うのですが、実際に動いている様子を見てもらうと、その心地よさの部分が伝わるのではないかなと思います。
流体って結構質感を調整できるパラメータは多いのですが、AI に全部実装してもらうような場合だと、それらを理解して適切に調整するのって結構難しいのではないかなという想像が働きます。
その点、今回の実装はすごく心地よい動きと余韻に調整されていて、とてもいいかんじです。
必ずしもすべてのシーンに流体が適用されているというわけでもなく、適切に使い分けがなされています。
全体のデザインのトーンを崩さずに、またユーザーが要素に注目するのを邪魔しない程度の味付けになっている気がします。
たぶん、純粋に歪めるだけのタイプではなく RGB をずらしたディストーションにしているからだと思いますが、背景の白さとエフェクトとのコントラストが強く、派手すぎないけど心地よく感じる絶妙なラインを実現しているのかなと思いました。
なんでもかんでもいたずらに流体で派手にすればよいわけではない、というようなことを自分自身よく感じるのですが、ではいったい適切な流体というのはなんなのだ？ という問いも同時に湧き上がってきます。
デザイン的には特にこれといった単一の正解がある話ではないと思うのですが、今回のサイトのようにしっかりとした意図を感じる流体表現には、一定の満足度というか、納得感があるように思います。
ページ遷移のエフェクトとかも非常にかっこよくて、見ていてとても気持ちがよいサイトになっています。
ぜひチェックしてみてください。
