見たこともないような演出がたくさん登場! スマートなデザインも注目な Taro Yoshimura さんのポートフォリオ
静と動、あるいは直線と曲線を感じさせる仕上がり
今回ご紹介するのは、株式会社バケモノ所属のフロントエンドの開発者、Taro Yoshimura さんのポートフォリオサイトです。
超偶然ですが、今週はここまで水曜・木曜と海外のポートフォリオサイトを連続でご紹介していました。そんな流れからの、日本国内でも有数の WebGL の使い手 @ysmrt6 さんのポートフォリオサイトが公開されたということでご紹介しようと思います。
これまでにも、かなりハイエンドな事例に関わってきた実装者さんということもあって、今回のポートフォリオサイトでも非常に心地よいアニメーションを利用した、インタラクティブな演出が多数盛り込まれています。
なお、サイトのデザインは @tkhs329 さんが担当されたということです。お二人の Twitter アカウントのリンクは以下に貼っておきます。
リンク:
触ってわかる楽しさ
今回のポートフォリオサイトでは、大きめのフォントを活用したデザインがビジュアルの軸になっています。
その中で、随所に盛り込まれている WebGL のダイナミックな演出が、見る人にいい意味での驚きや感動を与えてくれるような、そんな作りになっていると個人的には思いました。
トップページ部分では、事例の名称をそのまま取り入れた大きめの矩形の中で、マウスカーソル位置に対するインタラクティブなレンズの歪みのような演出が発生します。
この上のキャプチャ画像をよーく観察すると、円形に少しだけ文字がずれているというか、歪んでいる箇所があるのがわかるでしょうか。このようなレンズっぽい歪みとは非常に相性の良い、RGB をずらすような演出も同時に使われていて、質感がとてもきれいに仕上がっています。
今回のサイトの場合、インタラクティブ性のある演出はもちろんなんですが、遷移エフェクトがめちゃくちゃ凝った作りになっています。
Yoshimura さんのサイトはページ遷移の演出がいつも異常に作り込まれてますね…… これは想像ですが、遷移時というのは大きくビジュアルを変化させることを「ある意味許されている」わけで、そこに注力するというのは演出のパワーバランスとしてはすごく理に適ってると思います。
今回のサイトでは空間が大きく広がるような、見事な遷移エフェクトを見ることができます。
また、トップページ部分ではスワイプするように画面上でドラッグ操作を行ったり、あるいはスクロール操作を行ってやることで、事例を横方向に動かすことができるのですが……
この横方向に事例が動く際や、あとはイントロの演出とかでもそうなのですが、文字が大きく歪むようなエフェクトを見ることができます。
こちらも、すごくダイナミックな変形で面白いですね。
静止画で見たら、もちろんフォントの文字までしっかり見えますが、これがインタラクティブに動いているときは全然違ったように見えるのが不思議です。なんとも面白い。
サイト全体のデザインとして、直線的なエッジの利いた形がメインになってるのかなと思いますが、要所要所で動きに合わせて曲線が登場し、しかもそれが様々なバリエーションの動きを見せてくれるのでとても刺激的で飽きがこず、終始最後までかっこいいですね。
基本的に白と黒の組み合わせでコンテンツの枠組みが作られており、事例の詳細を開いたときだけ、スクリーン上に様々なカラフルな画像が現れるというのもメリハリが利いてていいですね。
非常にかっこいいサイトになっています。
ぜひチェックしてみてください。